はてなブログで目次の作り方（ブログ投稿前に準備）

※2019年11月15日に公開した記事ですが、背景色・文字色の追加とスマホ版の見た目の改善を行いました。ユーザに適した柔軟なカスタマイズが可能となっております。

色々な手法がある中で選択に悩まず、短時間で効果的な方法を至ってシンプルに解説。

今回は、はてなブログで見栄えの良い目次の作り方を紹介する。

標準で用意されている目次をそのまま使うと大見出し・中見出し・小見出し毎に箇条書きの段落が出来る程度で至ってシンプル。パッと見た目に目次かどうかも分かりにくい。

そこで、デザインCSS機能を利用して、目次の「タイトル」、「番号付きリスト」、「文字の大きさ」、「太字」、「背景色」への対応手順を説明する。

目次の表示方法を意識して、見出しに番号等を付ける工夫をする前に、ブログ開始時のDNS設定等と併せて準備しておくことが理想である。

目次のカスタマイズ手順
記事の編集内容（サンプル）
デザインCSS対応前（標準の目次）
デザインCSS対応後
参考情報

目次のカスタマイズ手順

ダッシュボードの「デザイン」をクリック

WEB版

「スパナマークのカスタマイズアイコン」をクリック
「{}デザインＣＳＳ」をクリック
ボックス内をクリック
下記のコード（WEB版）をメモ帳等のテキストエディタにコピー＆ペーストしてからデザインCSSにコピー＆ペースト
「設定を保存する」をクリック

スマホ版

「スマホマークのスマートフォンアイコン」をクリック
「ヘッダ」をクリック
タイトル下のボックスをクリック
下記のコード（スマホ版）をメモ帳等のテキストエディタにコピー＆ペーストしてからデザインCSSにコピー＆ペースト
「設定を保存する」をクリック

コード（WEB版）

.table-of-contents:before{
content: "＜目次＞"; /* タイトル */
font-size: 100%; /* 文字の大きさ */
font-weight:bold; /* 文字の太さ　通常はnormal */
color:#000; /* 文字の色 */
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.entry-content .table-of-contents {
background: #f7f7f7 ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px; /* 枠内の余白（上右下左） */
margin: 0;
}