サイドバーに配置した「目次」ウィジェットをハイライト表示させる方法

記事に記載したコードは、スキンに追加されています。

応用：JIN:R風ハイライト表示にする方法

目次をJIN:R風のハイライト表示にします。

目次プラグイン「Rich Table of Contents」の使い方！サイドバー追尾の方法も解説｜JIN:R MANUAL

\ こんな目次が作れる / WordPress記事の目次を作るなら、 JINチームで開発している「Rich Table of Contents」という目次プラグインを使ってもらうのをおすすめします！ Rich Table of Conten

完成イメージ

実装手順

以下の手順で実装します。

ラベル
JavaScriptを追加

前述のコードをjavascript.jsに追加します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.sidebar-scroll .toc {
  margin: 0;

  /* 目次リスト & 縦罫線 */
  .toc-list {
    padding: 0;
    position: relative;

    &::before {
      background-color: #efefef;
      content: '';
      display: block;
      height: calc(100% - 1.5em);
      left: 5px;
      position: absolute;
      top: 8px;
      width: 2px;
    }

    ul,
    ol {
      padding-left: 0;
    }

    /* 見出しH3以降（子階層リスト）の開閉＆ポイント制御 */
    > li {
      > ul,
      > ol {
        display: none;

        /* 子階層は通常時はポイント非表示 */
        li::before {
          display: none;
        }

        /* 子階層はハイライト（a.current）時のみ赤ポイントを表示 */
        li:has(> a.current)::before {
          background-color: #ff0000;
          display: block;
        }
      }

      &:has(.current) {
        > ul,
        > ol {
          display: block;
        }
      }
    }
  }

  /* 親階層（H2）のリスト項目 & ポイント設定 */
  .toc-list li {
    list-style: none;
    position: relative;

    &::before {
      background-color: #efefef;
      border-radius: 50%;
      content: '';
      display: block;
      height: 12px;
      left: 0;
      position: absolute;
      top: 6px;
      width: 12px;
    }

    &:has(> a.current)::before {
      background-color: #ff0000;
    }
  }

  /* アンカーリンク */
  .toc-list a {
    display: block;
    padding-left: 1.5em;
  }
}