ブログで利用しているテーマ・パーツ等

備忘録的にリンクとかメモ。

更新日：2022/09/24

はてなブログのテーマ

blog.hatena.ne.jp

www.notitle-weblog.com

目次カスタマイズ

見出しを付ける。リストの先頭を連番に。

デザイン>カスタマイズ>デザインCSS

/* 目次カスタマイズ */
.table-of-contents:before{
content: "目次";
font-size: 120%;
}

.table-of-contents li,
.table-of-contents ul{
 list-style-type: decimal;
}

フォントまわりのカスタマイズ

本文フォントのサイズと色、改行幅を変更。

/* 本文カスタマイズ */
html,body {font-size: 15px; color: #505050; }
.entry-content p {line-height:1.6; margin-bottom:0.8em; margin-top:0.5em; }

タイトルがちょっと味気なかったので、文字間隔の変更とシャドウを付けてみた。

/* タイトルカスタマイズ */
h1#title a {
    font-size: 140%;
    letter-spacing: 0.4em;
    color: #29b6b7;
    text-shadow: 0px 0px 5px #808080;
}

見出しのデザインをカスタマイズ

こちらのサイトを参考に、見出しのデザインも変えてみました。

www.notitle-weblog.com

/* 見出しカスタマイズ */
h1.entry-title {
  padding: 6px 10px;
  border-left: 8px solid #29b6b7;
  border-bottom: 1px solid #29b6b7;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

.entry-content h3 {
  font-size: 18px;
  color: #000000;
  padding: 6px 0;
  border-top: 2px solid #2d70a4;
  border-bottom: 2px solid #2d70a4;
  line-height: 1.5;
}

.entry-content h4 {
  font-size: 16px;
}

トップに戻るボタン

右下に出る上矢印。↓のページを参考に、動くように修正。

glglsti2019.hatenablog.com

デザイン>カスタマイズ>ヘッダ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/5.6.1/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

デザイン>カスタマイズ>フッタ

<!-- ページトップへ戻る -->
<script>
$(function () {
    /** ページトップ処理 **/
    // スクロールした場合
    $(window).scroll(function() {
        // スクロール位置が200を超えた場合
        if ($(this).scrollTop() > 200) {
            $('#pagetop').fadeIn("slow");
        } else {
            // ページトップへをフェードアウト
            $('#pagetop').fadeOut("slow");
        }
    });

    // クリックした場合
    $('#pagetop').click(function() {
        // ページトップへスクロール
        $('html, body').animate({
            scrollTop: 0
        },"slow");
        return false;
    });
})(jQuery);
</script>

<!-- トップアイコンの設定 -->
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>

デザイン>カスタマイズ>デザインCSS

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:4%;
    right:10px;
    padding:10px 20px;
    color:#aaaaaa;
    text-align:center;
    opacity: 0.5;
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover{
   color:#000000;
}

トップページを記事一覧にする

romita.hatenablog.com

アフィリエイトツール

kaereba.com

CSSカスタマイズ

rough-log.com