Cocoonでサイドバー目次を「現在地ハイライト＋自動追従」にする方法【長文記事対策】

実装するとどうなる？

読んでいるセクションが目次でリアルタイムにハイライトされ、目次が長くても自動でスクロール追従します。

長文記事の読者が感じるストレスの多くは、「今どこを読んでいるのか」「あとどれくらい残っているのか」という現在地の見えなさにあります。
現在地が可視化されると、読者は安心して読み進めやすくなり、離脱率の低下にもつながります。

実装はコードのコピペが中心です。難しい作業はありませんが、テーマファイルを編集するため、必ず事前にバックアップを取ってから進めてください。

手順の全体像（ざっくり）

作業は4ステップ。コードはすべてコピペで完結します。

それでは各ステップを詳しく解説します。

① サイドバーに目次を追加する

WordPress管理画面の「外観 → ウィジェット」から、目次ウィジェットをサイドバーに追加します。

「サイドバースクロール追従」エリアに目次ウィジェットを追加してください。

② 追加CSSを設定する

WordPress管理画面の「外観 → カスタマイズ → 追加CSS」に以下のコードを貼り付けます。

目次が長い場合もスクロールできるようにするCSSです。アクティブ項目は青い左ボーダーとハイライト背景で強調されます。

#sidebar-scroll .widget.widget_toc .toc-content{
  max-height: 55vh;
  overflow: auto;
}
#sidebar-scroll .widget.widget_toc a{
  display: block;
  padding: 6px 0 6px 12px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
#sidebar-scroll .widget.widget_toc a.is-active{
  background: rgba(59,130,246,0.12);
  border-left: 3px solid #3b82f6;
  font-weight: 600;
}

③ Cocoon本体のfooter.phpを子テーマへコピーする

子テーマ側にfooter.phpがない場合は、Cocoon本体からコピーして追加します。

テーマ本体を直接編集するとアップデート時に上書きされます。必ず子テーマに追加してください。

⚙️ エックスサーバーでの作業手順

1. エックスサーバーにログインしてサーバーパネルを開く
2. ファイルマネージャから該当ドメインを開く
3. /public_html/wp-content/themes/cocoon-master/footer.php をコピー
4. /public_html/wp-content/themes/cocoon-child-master/footer.php として貼り付け

④ footer.phpにJSを追加する

WordPress管理画面の「外観 → テーマファイルエディター → Theme Footer（footer.php）」を開き、</div><!-- #container -->の直前に以下のJSコードを追加します。

追加するJSコード

<script>
document.addEventListener("DOMContentLoaded", () => {
  const toc = document.querySelector("#sidebar-scroll .widget.widget_toc");
  if (!toc) return;

  const tocScroll = toc.querySelector(".toc-content") || toc;
  const links = Array.from(toc.querySelectorAll('a[href^="#"]'))
    .filter(a => a.getAttribute("href").length > 1);

  const items = links.map(a => {
    const id = decodeURIComponent(a.getAttribute("href").slice(1));
    const el = document.getElementById(id);
    return el ? { id, el, a } : null;
  }).filter(Boolean);

  if (!items.length) return;

  const OFFSET = 160;
  let currentId = null;

  function clearActive(){
    links.forEach(a => a.classList.remove("is-active"));
  }

  function keepActiveVisible(activeLink){
    if (tocScroll.scrollHeight <= tocScroll.clientHeight) return;
    const cRect = tocScroll.getBoundingClientRect();
    const aRect = activeLink.getBoundingClientRect();
    const padding = 14;
    if (aRect.top < cRect.top + padding ||
        aRect.bottom > cRect.bottom - padding) {
      activeLink.scrollIntoView({
        block: "center",
        inline: "nearest",
        behavior: "smooth"
      });
    }
  }

  function setActive(id){
    if (id === currentId) return;
    currentId = id;
    clearActive();
    const hit = items.find(x => x.id === id);
    if (!hit) return;
    hit.a.classList.add("is-active");
    keepActiveVisible(hit.a);
  }

  function update(){
    let candidate = items[0];
    for (const it of items) {
      const top = it.el.getBoundingClientRect().top;
      if (top <= OFFSET) candidate = it;
      else break;
    }
    setActive(candidate.id);
  }

  let ticking = false;
  function onScroll(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      update();
      ticking = false;
    });
  }

  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", onScroll, { passive: true });
  window.addEventListener("load", onScroll);
  update();
});
</script>

固定ヘッダーがある場合の調整

固定ヘッダーがある環境では、本文の表示タイミングとハイライトのタイミングがずれることがあります。その場合は以下の数値を調整してください。一般的な固定ヘッダーなら240前後が目安です。

const OFFSET = 160;

なぜこの実装が重要なのか？

長文記事で離脱が増える最大の原因は「現在地が見えないこと」です。それを解消するのがこの実装です。

5,000〜1万文字の記事は情報量で価値を出せますが、読者にとっては読むこと自体が負荷です。
「今どこにいるかわからない」「終わりが見えない」というストレスが重なると、離脱率は確実に上がります。

現在地が可視化されると以下の変化が起きます。

長文コンテンツを書くブログほど、この改善の効果は大きくなります。