DREAMARK

WEBLOG

ブログの目次をウィキペデア風に連番で表示するCSS

f:id:dreamark:20160528195241p:plain

はてなブログでは目次を簡単に入れる事が出来ます。[:contents]と編集画面で打ち込めばその部分が目次に変換されてブログに表示されるようになります。

しかし、デフォルトのままでは、リストが表示されるだけなので味気ないもの。この部分にCSSを適用して装飾し見やすくしてみましょう。そして今回紹は、装飾はもちろんですが、各項目にCSSを使って連番を表示させています。

下のが今回の記事の目次です。こんな風に表示出来ます。

1,2,3と進むだけでなく入れ子になった目次にも連番が付きます。

下記の画像のように、1.1、1.2、1.3のような感じですね。子だけでなく、孫やひ孫にも対応しています。また、この表示はスマホにも対応をしております。

f:id:dreamark:20160528180059p:plain
※上記は目次を画像にして表示しています。ちなみにこちらはハイフンを使用。

※先日公開したテーマCONTENTSには標準で適用済です。

contents - テーマ ストア - はてなブログ

Wikipediaでもこもような表示になっています。後は、WordPressの目次プラグインであるTable of Contents Plusのように表示される事になります。このように表示される目次を今回紹介するCSSで作成出来ます。そのままコピペで使う方は説明は飛ばしてそのままソースを使っていただいても構いませんが、一応どのような仕組みなのかを次の項で説明していきます。

連番をカウントするCSS

目次の装飾部分は通常のCSSを使用しているのですが、カウントをするCSSを簡単ではありますが説明していきます。

contentプロパティ

連番をCSSで表示させたい時に使うのはcontentプロパティというものです。これは擬似要素であるbeforeやafterと一緒に使う擬似要素の拡張プロパテイのようなものです。このcontentプロパティを使用する事で要素の前後に文字や画像等を表示出来ます。今回の「目次」という一番上の表記もcontentプロパテイで表示をしています。

counter-increment

このプロパティを数値を表示したい部分に適用し値をカウントしていきます。そしてcontentプロパティを使って表示させていきます。counter-incrementの値は、名前を任意に付ける事が出来ます。今回は目次なので「toc」と名前をつけています。

counters(toc, ".")の「"."」の部分を「"-"」に変更すると数字間の表示はハイフンになります。他にも表示させたい任意の文字を入れる事で表示する事が出来ます。counters(toc, ".")の前に「""」で挟んで任意の文字を入れると連番の前に文字列を表記させる事も出来ます。
例えばChapterを数字の前に表記したい場合には、
"Chapter "counters(toc, ".")

f:id:dreamark:20160528175325p:plain
上記の画像のような表示になります。

counter-reset: toc;

これは数値のカウントをリセットさせています。リセットしないとずっと入れ子状態の目次が出来たり、正しくカウントがされません。

オマケ

今回の目次に表示さえる為にいれています。

今回使用したCSS

下に記述してあるCSSをカスタマイズCSSやスマートフォンデザインのヘッダに入れる事で使用する事が出来ます。
※今回はCSSの適用方法の説明は割愛させていただきます。

最後に

今回は目次に連番を表示させる方法をご紹介してきましたが、いかがでしたでしょうか?お気に召したようでしたら使っていただければと思います。今後は表示と非表示を出来るようにも対応をしていこうと考え中です。

Copyright © 2016 DREAMARK All rights reserved.