はてなブログでは目次を簡単に入れる事が出来ます。[:contents]と編集画面で打ち込めばその部分が目次に変換されてブログに表示されるようになります。
しかし、デフォルトのままでは、リストが表示されるだけなので味気ないもの。この部分にCSSを適用して装飾し見やすくしてみましょう。そして今回紹は、装飾はもちろんですが、各項目にCSSを使って連番を表示させています。
下のが今回の記事の目次です。こんな風に表示出来ます。
1,2,3と進むだけでなく入れ子になった目次にも連番が付きます。
下記の画像のように、1.1、1.2、1.3のような感じですね。子だけでなく、孫やひ孫にも対応しています。また、この表示はスマホにも対応をしております。
※上記は目次を画像にして表示しています。ちなみにこちらはハイフンを使用。
※先日公開したテーマCONTENTSには標準で適用済です。
Wikipediaでもこもような表示になっています。後は、WordPressの目次プラグインであるTable of Contents Plusのように表示される事になります。このように表示される目次を今回紹介するCSSで作成出来ます。そのままコピペで使う方は説明は飛ばしてそのままソースを使っていただいても構いませんが、一応どのような仕組みなのかを次の項で説明していきます。
連番をカウントするCSS
目次の装飾部分は通常のCSSを使用しているのですが、カウントをするCSSを簡単ではありますが説明していきます。
contentプロパティ
連番をCSSで表示させたい時に使うのはcontentプロパティというものです。これは擬似要素であるbeforeやafterと一緒に使う擬似要素の拡張プロパテイのようなものです。このcontentプロパティを使用する事で要素の前後に文字や画像等を表示出来ます。今回の「目次」という一番上の表記もcontentプロパテイで表示をしています。
counter-increment
このプロパティを数値を表示したい部分に適用し値をカウントしていきます。そしてcontentプロパティを使って表示させていきます。counter-incrementの値は、名前を任意に付ける事が出来ます。今回は目次なので「toc」と名前をつけています。
例えばChapterを数字の前に表記したい場合には、
"Chapter "counters(toc, ".")
上記の画像のような表示になります。
counter-reset: toc;
これは数値のカウントをリセットさせています。リセットしないとずっと入れ子状態の目次が出来たり、正しくカウントがされません。
オマケ
今回の目次に表示さえる為にいれています。
今回使用したCSS
下に記述してあるCSSをカスタマイズCSSやスマートフォンデザインのヘッダに入れる事で使用する事が出来ます。
※今回はCSSの適用方法の説明は割愛させていただきます。
最後に
今回は目次に連番を表示させる方法をご紹介してきましたが、いかがでしたでしょうか?お気に召したようでしたら使っていただければと思います。今後は表示と非表示を出来るようにも対応をしていこうと考え中です。