はてなブログの目次のデザインカスタマイズ集

はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。

ご使用のテーマによって、調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。

目次の挿入方法

基本的なことですが、はてなブログで目次を挿入するには記事編集画面上部のツールバーで目次のアイコンをクリックすると挿入できます。

目次デザインパターン集

目次のカスタマイズをするには以下のコードをデザインCSSに入れて下さい。テーマによっては調整が必要です。

FontAwesomeの呼び出し

目次横のアイコンはFontAwesomeを使っているので、呼び出しのコードを貼っていない方は以下を追加してください。
headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

ストライプ背景

色は各自変更して下さい。もちろん、background: #カラーコードとすればストライプ背景ではない単色塗りの背景もできますよ。

/*  目次ストライプ背景 */
.entry-content .table-of-contents {
    position:relative;
    color:#555;
    font-size: 100%; /*文字サイズ*/
    background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);/* ストライプ背景 */
    border:none;
    border-left: 8px solid #7fdbb6;/* アクセントカラー */
    padding: 50px 25px 15px 45px;
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%!important;
    box-sizing: border-box;
}
.entry-content .table-of-contents,
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
}
.entry-content .table-of-contents::before {
    display: block;
    font-family: 'FontAwesome';
    content: '\f009';
    color: #7fdbb6;/* アクセントカラー */
    font-weight: bold;
    font-size: 120%;
    padding-left: 3px;
    margin: 0;
    position: absolute;
    top: 15px;
    left: 10px;
    border-bottom: none;
}

.entry-content .table-of-contents:after {
    display: block;
    content: 'Contents';
    color: #7fdbb6;/* アクセントカラー */
    font-weight: bold;
    font-size: 120%;
    position: absolute;
    top: 15px;
    left: 35px;
}
.entry-content .table-of-contents>li {
    font-weight: bold;
}
.entry-content ul.table-of-contents li a {
    color: #555;
    text-decoration:none;
}

ストライプ背景2

/* 目次 ストライプ背景2 */
.entry-content .table-of-contents {
    position: relative;
    color: #555;
    font-size: 100%;
    background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
    border: none;
    border-top: 40px solid #7fdbb6;/* アクセントカラー */
    padding: 10px 25px 15px 45px;
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%!important;
    box-sizing: border-box;
}
.entry-content ul.table-of-contents,
.entry-content ul.table-of-contents li {
    list-style-type: decimal;/* 番号振り */
}
.entry-content .table-of-contents::before {
    display: block;
    font-family: 'FontAwesome';
    content: '\f00b';
    color: #fff;
    font-weight: bold;
    font-size: 120%;
    padding-left: 3px;
    margin: 0;
    position: absolute;
    top: -35px;
    left: 10px;
    border-bottom: none;
}

.entry-content .table-of-contents:after {
    display: block;
    content: 'Contents';
    color: #fff;
    font-weight: bold;
    font-size: 120%;
    position: absolute;
    top: -35px;
    left: 40px;
}
.entry-content .table-of-contents>li {
    font-weight: bold;
}
.entry-content ul.table-of-contents li a {
    color: #555;
    text-decoration:none;
}

二重線囲み

/* 目次 二重線囲み */
.entry-content .table-of-contents {
    color:#555;/* 文字色 */
    padding: 50px 25px 15px 35px;
    position: relative;
    background-color: #F6F6F6;/* 背景色 */
    border: 4px double #7fdbb6;/* アクセントカラー */
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%!important;
    box-sizing: border-box;
    border-radius: 8px;
}
.entry-content .table-of-contents::before {
    display: block;
    font-family: 'FontAwesome';
    content: '\f046';
    font-weight: bold;
    font-size: 120%;
    padding-left: 3px;
    margin: 0;
    position: absolute;
    top: 15px;
    left: 10px;
    color: #7fdbb6;/* アクセントカラー */
    border-bottom: none;
}

.entry-content .table-of-contents:after {
    display: block;
    content: '目次';
    font-weight: bold;
    font-size: 120%;
    position: absolute;
    top: 15px;
    left: 35px;
    color: #7fdbb6;/* アクセントカラー */
}
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
    margin-left: 0;
}

.entry-content .table-of-contents li a {
    text-decoration: none;
    color:#555;/* 文字色 */
}

.entry-content .table-of-contents>li:first-child {
    border-top: 1px dotted #CCC;
    padding-top: 10px;
}

.entry-content .table-of-contents>li {
    font-weight: bold;
}

.entry-content .table-of-contents ul>li:last-child {
    padding-bottom: 10px;
}

ステッチ風

/* 目次 ステッチ風 */
.entry-content .table-of-contents {
    position: relative;
    color:#555;/* 文字色 */
    background: #F2FBF7;/* 背景色 */
    border: 2px dashed  #7fdbb6;/* ステッチ風ボーダー */
    box-shadow: 0 0 0 10px #F2FBF7, 4px 5px 6px 5px rgba(0,0,0,0.5);
    padding: 50px 25px 15px 45px;
    width: 97%!important;
    margin: 2em auto;
    box-sizing: border-box;
    border-radius: 8px;
}
.entry-content .table-of-contents::before {
    display: block;
    font-family: 'FontAwesome';
    content: '\f0fe';
    font-weight: bold;
    font-size: 130%;
    padding-left: 3px;
    margin: 0;
    position: absolute;
    top: 15px;
    left: 10px;
    color: #7fdbb6;/* アクセントカラー */
    border-bottom: none;
}

.entry-content .table-of-contents:after {
    display: block;
    content: '目次';
    font-weight: bold;
    font-size: 120%;
    position: absolute;
    top: 15px;
    left: 35px;
    color: #7fdbb6;/* アクセントカラー */
}
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
    margin-left: 0;
}

.entry-content .table-of-contents li a {
    text-decoration: none;
    color:#555;/* 文字色 */
}
.entry-content .table-of-contents>li {
    font-weight: bold;
}

目次リストのスタイル（番号順、円）

目次のリストを番号順にするのは以下のように指定します。

.entry-content .table-of-contents,
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
}

黒四角にするには

.entry-content .table-of-contents,
.entry-content .table-of-contents li {
    list-style-type: square;/* 四角 */
}

として下さい。

目次を表示・非表示に切り替える

目次を表示を切り替えるカスタマイズは以下のゆきひーさんの記事をご参照下さい。
www.yukihy.com

以上はてなブログで使える目次のカスタマイズをご紹介しました。

その他のはてなブログカスタマイズ記事はこちらをどうぞ。
blog.minimal-green.com