はてなブログの目次の階層をCSSでコントロールする方法 - PTP ～エキサイティングにいいモノがある

f:id:clatter:20190321185238p:plain
はてなブログの目次についてコントロールしよう。

はてなブログは文中のHタグを自動的に拾って、自動で生成してくれる機能がある。かつてはJavaScriptでゴリゴリと記述する必要があったが公式で用意してくれてありがたい限り。Hタグとは大見出し、中見出し、小見出しに使われているH3、H4、H5タグなど。

しかし長文記事でこまかく見出し分けしている記事の場合は目次がだらだらと長くなりすぎる。

① H3 大見出し
② 　H4 中見出し
③ 　H4 中見出し
④ 　　H5 小見出し
⑤ 　H4 中見出し
⑥ 　　H5 小見出し
⑦ H3 大見出し
⑧ 　H4 中見出し
⑨ 　　H5 小見出し
⑩ 　　H5 小見出し

こんな構成の記事の場合にこの全て10個の見出しが目次領域に表示されてしまう。正直邪魔である。

ページの品質を保つためには自分で目次のHTMLを編集して作成するのが良い。しかしそれでは時間がかかりめんどくさい。せっかくのブログサービスの利点が台無しだ。時短と見栄えの折衷案が必要となる。

まず最初の要件、基本的には目次を設置した場合は自動的に第二階層の見出しまで表示させたい。記事構成例で言うとH3,H4タグについてのみ表示させたい。

その場合はブログの設定「デザインCSS」に以下を記述しておこう。

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

レスポンシブにしていない場合はスマートフォンデザインの「ヘッダ」「タイトル下」のにも記述しておこう。

<style>
<!--
.table-of-contents ul ul{display:none;}
-->
</style>

第一階層は .table-of-contents クラス。第二階層のULタグ以下の第三階層のULタグを「display:none;」によって非表示にするという意味。

記事によっては第一階層の見出しだけ目次にしたい場合がある。その場合は記事毎にHTMLにCSSを追記しよう。

記事のモードを「HTML編集モード」にし、「記事の先頭」に以下を記述しよう。

<style>
<!--
.table-of-contents ul {display:none;}
-->
</style>

第一階層は .table-of-contents クラス。第二階層のULタグ以下を「display:none;」によって非表示にするという意味。

以上によって基本は第二階層までの目次を作成、必要に応じて第一階層のみの目次を表示と言った要件が実現できる。

記事毎にHTMLにてstyleタグを追記できた。今回は目次のコントロールに使用したが、記事内でだけで有効なデザインを記述するなどにも使えそうだ。一つの記事だけで良いのにわざわざ共通のデザインCSSに書かなくても良いのは魅力的だ。

ただ難点は、HTML編集にて記述したstyleタグは見たままモードでは見えない。記事を編集しているときに消してしまわないように注意しよう。