ブログカスタマイズ：目次の見た目を変える

今日は目次の見た目の変え方を調べて試行錯誤し、当ブログに適用してみたので忘れないように書き残しておきます。

やったこと
目次の見た目を変えるにはデザインCSSに変更用のコードを書けば良い
- 適用したコード
- デザインCSSにコードを埋め込む
出典・参考

やったこと

目次の表示の変え方を調べた。
非公開のテスト用ブログで試行錯誤して自分なりのコードを書き上げた。
当ブログに目次表示変更のコードを適用した。

目次の見た目を変えるにはデザインCSSに変更用のコードを書けば良い

適用したコード

/*-- もくじ --*/
/* 目次の背景色と枠線の設定 */
.table-of-contents { margin-left: 0; padding: 15px 10px 15px 35px; border: 1px solid #1f6ed4 !important; background-color: #f9fcfe !important; display:inline-block; }
/* 目次の先頭行の表示 */
.table-of-contents:before { content: "【目次】"; font-size: 100%; font-weight: bold; line-height: 12px; color: #000000; }
/* 大見出しの設定 */
.table-of-contents li { margin-left: 10px; font-weight: bold; font-size: 90%; list-style-type: square; }
/* 中見出しの設定 */
.table-of-contents li ul li { margin-left: 15px; font-weight: normal; font-size: 90%; list-style-type: circle; }
/* 小見出しの設定 */
/*.table-of-contents li ul li ul li { font-size: 90%; list-style-type: disc; }*/
.table-of-contents li ul li ul li { display: none; }

基本的にコメント行に、その直下の行の説明を記載してある。
目次のHTMLの出力は、箇条書きと同様に<ul><li>タグを使った形式となる。
3行目：.table-of-contents が目次全体を示している。目次全体の外枠や背景色の設定をしている場所。display: inline-block; を指定することで目次の横幅が目次の内容に従って可変となる。
5行目：.table-of-contents の後ろに :before を付けることで一つ前の要素として扱うらしい。目次の直前に content という要素を挿入する、と理解した。このため、ここで content="目次" と指定することで目次枠内の一番上に「目次」と表示されるようになる。ここを書き換えると好きな文字列を表示できる。
7行目：table-of-contentsの後ろに半角スペースを開けて li と指定することで大見出しを示すことになる。<ul>タグに続く最初の<li>タグを示す、と理解した。list-style-type: square; は、マーカー文字（文字列先頭のマーク）を指定するもので、 square は小さい黒塗り四角マークを示している。指定できるマーカー文字の種類はこちらを参照のこと。
9行目：table-of-contents の後ろに半角スペースを開けて li ul li と指定することで中見出しを示すことになる。考え方は7行目と一緒で、大見出しに続いているので中見出しとなる（ネストしている）。margin-left: 15px; というのは文字列の頭を左からどの程度ずらすかを指定している。
11行目：table-of-contents の後ろに半角スペースを開けて li ul li ul li と指定することで小見出しを示すことになる。考え方は7,11行目と一緒。font-size: 90%; というのは文字のサイズを指定しており、ここでは本来表示する文字サイズの90%に縮小することを指定している。なおこの行はコメントアウトしており、このまま貼り付けても有効にならないので、有効にするにはコメントアウトを外し、12行目をコメントアウトする。
12行目：小見出しを示している（11行目と同じ）。display: none; というのは該当する要素を表示しないように指定している。

デザインCSSにコードを埋め込む

[デザイン-詳細設定-デザインCSS]を開く。

はてなブログの設定画面左の「デザイン」をクリックする。

工具アイコン（詳細設定）をクリックする。

一番下の「{ } デザインCSS」をクリックする。
デザインCSSのテキストボックスを開く。

「{ } デザインCSS」を開いたら下部のテキストボックスをクリックする。
テキストボックスにコードを貼り付ける。

デザインCSSのテキストボックスに目次表示変更のコードを貼り付ける。
設定変更をブログに反映する。

コードを貼り付けたら「変更を保存する」をクリックする。