はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。
ご使用のテーマによって、調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。
目次の挿入方法
基本的なことですが、はてなブログで目次を挿入するには記事編集画面上部のツールバーで目次のアイコンをクリックすると挿入できます。
目次デザインパターン集
目次のカスタマイズをするには以下のコードをデザイン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