はてなブログで目次を生成する見出しレベルをCSSで調整する

目次機能とは

はてなブログには目次を簡単に生成できる目次機能があります。

[:contents]

と差し込むだけです。

ボタンもある

目次の対象にされるのは markdown でいう # 見出し による見出しです。## 見出し や `### 見出し のような下のレベルまで目次の対象になります。

レベルが深いとノイジーな目次になってしまいます。Word ではどのレベルまでの目次を表示するか設定できるので、同じことをしたいなと思っていました。

ためしたら、デザインCSSで、少しスタイルを追加するだけでできました。（ただし仕様上、スマホ表示には非対応）

調整方法

レベル3まである目次を生成すると以下のように <ur> <li> によるリストになってました。（少し整形しています）

    <!-- 略 -->
    <div class="entry-content">
      <ul class="table-of-contents">
        <li><a href="#はじめに">はじめに</a></li>
        <li><a href="#動画">動画</a></li>
        <li><a href="#ロールと変数とチェック">ロールと変数とチェック</a></li>
        <li><a href="#Role-argument-validation">Role argument validation</a>
          <ul>
            <li><a href="#必須チェック">必須チェック</a>
              <ul>
                <li><a href="#エラーになるケース">エラーになるケース</a></li>
                <li><a href="#正常なケース">正常なケース</a></li>
              </ul>
            </li>
            <li><a href="#チェックの無効化">チェックの無効化</a></li>
            <li><a href="#型チェック">型チェック</a></li>
            <li><a href="#選択肢チェック">選択肢チェック</a></li>
          </ul>
        </li>
    <!-- 略 -->

なのでトップの <ul> のtable-of-contents までクラス名で追いつつ、非表示にしたいレベルの <ul> に display: none を指定します。

レベル1までのみ表示

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

レベル1まで表示

レベル2までのみ表示

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

レベル2まで表示

レベル3以降は、さらにセレクタの末尾に li ul を追加していくだけです。