【初心者向けカスタマイズ】はてなブログの目次の構造（HTML/CSS）を徹底的に解説

はてなブログのカスタマイズ例はネット上にたくさんのコピペコードが存在するので、プログラミングの知識が全くない初心者でも簡単にデザインをいじることができます。

そんなはてなブログですが、適当にコピペしてるとネックになってくるのが目次とリストのデザインなんですよね。

（リストデザインのCSSをいじったら目次までデザイン引っ張られたって方、結構な数いらっしゃるのでは？）

誰しも理想の目次デザインを設定できるように、「ここの線を太く青くするならこう」「もう少し間隔あけるならこう」「小見出しを消すならこう」と、記事内のコードコピペで解決するように作りました。

読み終わる頃には初心者でも基本的な目次デザインを理解できているはずですよ。

▼気になる情報だけクリックして下さい

はてなブログの記事内に目次を設置する方法

スマホビューの場合、なてなブログのデフォルトの目次は以下のデザインです。

記事内に目次を設置する方法

これを設置する方法は簡単で、記事内に以下の1行を書きます。

[:contents]

目次のHTMLはどうなっているか

この目次のHTMLはこんな感じ（これはコピペしなくていいです）

<div class="table-of-contents">
    <ul>
        <li><a>大見出し1</a></li>
        <li><a>大見出し2</a></li>
    </ul>
</div>

感覚として、「はてなの目次は.table-of-contentsの中にあるリストなんだなあ〜」くらいでいいです。

今回はこれで表示される目次のデザインを変更する方法を書いていきます。

目次の枠のスタイルを変更する

目次の枠線についてはborderとborder-radiusで指定します。
solidは実線、dashは破線です。

.table-of-contents{
    border:solid 2px #000; /* 実線(solid)、2pxの太さ、色は黒(#000) */
    border-radius: 5px; /* 角の丸みがつきます */
}

目次の背景色を変更する

背景色はbackgroundで指定します。

.table-of-contents{
    background:#000;
}

目次に影をつける

box-shadowには5つの要素を指定します。

• box-shadow: [水平方向の位置] [垂直方向の位置] [ぼかし量] [広がり量] [色]

.table-of-contents{
    box-shadow: 0px 0px 9px 3px #ddd;
}

目次のテキストのスタイルを変更する

画像ミスです。大見出しだけでなく、全てのテキストスタイルが変更されます。

.table-of-contents li {
    color:#000; /* 好きなカラーに */
    font-size:18px; /* 好きなサイズに */
}

目次に中見出しや小見出しを表示させないようにする

デフォルトの目次は中見出しや小見出しまで表示されてしまいます。
当ブログでは大見出しのみ表示するように設定しました。

小見出しを非表示にする

.table-of-contents ul ul{
    display: none;
}

中見出しも非表示にする

.table-of-contents ul {
    display: none;
}

行間を調節する

行間はline-heightで調節します。

.table-of-contents li a{
    line-height: 10px;
}

目次のテキストリンクの色をGoogle仕様のカラーにする

馴染みのGoogleカラーにすることでクリックできる箇所であることを暗示しています。

.table-of-contents li a:link {
    color: #1A0DAB; /* リンク色 */
} 
.table-of-contents li a:visited {
    color: #660099; /* 訪問済みのリンク色 */
} 

以上です。
今後サンプルコード等追加するかもしれないです。