haru and...

猫のようにだらけ、犬のように遊ぶ。

【ブログカスタマイズ】記事に目次を表示させる方法

はてなブログに見出しを設定する方法、またそのデザインカスタマイズについて記載します。

 

記事に目次を表示させるには

はてなブログでは2015年9月から「目次記法」で目次の挿入が可能となりました。
記事内に[:contents]と記入するだけで目次が自動作成されます。


[:contents]の前後には文字や空白を入れず、1行で指定します。

staff.hatenablog.com

 

目次のスタイルをカスタマイズするには

目次のデフォルトスタイルはチョットダサいのでカスタマイズします。
この記事にも目次を表示させていますが、下記のスタイルを
カスタマイズのデザインCSSに追記しています。


リストタイプを番号にする

.table-of-contents li,
.table-of-contents ul{
/*リストを番号にする*/
list-style-type: decimal !important;
}

リンクの下線を非表示にする

.table-of-contents a {
/*リンクの下線非表示*/
text-decoration: none;
}

「目次」の文字列を表示する

.table-of-contents:before{
content: "目 次";
font-size: 110%;
font-weight: bold;
}

注意点

テンプレートによっては効かないデザインCSSで記述した無いようが優先されないものがあるようです。
その場合「!important」を宣言することで適用されるようになります。

 

最後に

私の場合見出しの付け方が下手くそだったりするので
目次の意味があるのかはわかりませんが、コレを付けることに寄って
記事の構成を若干ですが考えながら書くという習慣がつくとかつかないとか。。