サイドバーに貼り付く「追従目次」をコードだけで実装する方法（AFFINGER/RTOC対応・閉じるボタン付き）

「サイドバーに目次を固定したい。でもウィジェットでうまくいかない…」

そんな悩みを完全に解決する、追従型目次ウィジェットの決定版を紹介します。

このページでできること

追従型目次を完全コピペで導入
現在地ハイライト（自動）
長い目次も自動スクロール
バツボタンで閉じられる＆📑で再表示
jQuery不要、純JSのみ
カスタムHTMLウィジェット1個で完結

🧩なぜこの記事を書いたか
🔧実装方法（たった1ステップ）
- ✅ 手順
🎨主な機能とデザイン
✅チェックポイント
✅うまくいかない時は？
- ChatGPTにお願いするときのコツ
🗣まとめ：初心者でも“貼るだけ”で実現できる

🧩なぜこの記事を書いたか

僕自身、スマホのソムリエさんのサイトを参考にしてサイドバーに目次を設置できたんですが、

スクロール追従ができない…という壁にぶつかりました。

テーマの問題？CSS？JavaScript？
色々試行錯誤した結果、ChatGPTと一緒にゼロからコードを構築し、
AFFINGER6環境で安定して動く形に仕上げました。

その結果がこちら👇

📑 追従目次コード（コピーして使う）

<!-- Sidebar sticky TOC | Bright Navy Blue Theme -->
<div class="rtoc-follow">
  <input type="checkbox" id="toc-toggle" hidden>

  <div class="widget rtoc_mokuji_widget" id="fixed-toc">
    <div class="toc-head">
      <span class="toc-title">タップできる目次</span>
      <label for="toc-toggle" class="toc-close" aria-label="close">✕</label>
    </div>
    <div class="toc-body" id="toc-body">
      [rtoc_mokuji title="" title_display="" heading="h4" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]
    </div>
  </div>

  <label for="toc-toggle" id="toc-reopen" class="toc-fab" aria-label="open">📑</label>
</div>

<style type="text/css">
@media (min-width:1024px){
  /* sticky by default (fallback to fixed via JS) */
  #fixed-toc{
    position: sticky;
    top: 96px;
    background:#eaf1fb;
    border:1px solid #c5d8f3;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    z-index: 9;
    width:100%;
  }
  /* fixed fallback (JS adds .is-fixed) */
  #fixed-toc.is-fixed{
    position: fixed;
    top: 96px;
    left: 0;
    width: 320px;
    z-index: 9999;
  }

  /* head */
  #fixed-toc .toc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; background:#dbe8f9; border-bottom:1px solid #c5d8f3;
    border-top-left-radius:14px; border-top-right-radius:14px;
  }
  #fixed-toc .toc-title{
    font-weight:700; font-size:15px; color:#0f264a; letter-spacing:.02em;
  }
  #fixed-toc .toc-close{
    background:#ffffff; border:1px solid #c5d8f3; color:#0d47a1;
    width:28px; height:28px; border-radius:6px; font-size:15px; line-height:1;
    cursor:pointer; display:grid; place-items:center;
  }

  /* body (smooth scroll inside) */
  #fixed-toc .toc-body{
    padding:10px 20px 12px 12px;
    max-height: 70vh;
    overflow:auto;
    scroll-behavior:smooth;
    border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  }

  /* links */
  #fixed-toc .toc-body a[href^="#"]{
    display:block; padding:8px 10px; margin:2px 0;
    font-size:15px; line-height:1.6; text-decoration:none;
    color:#0f264a; border-radius:8px; border-left:4px solid transparent;
    margin-right:10px;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    transform-origin:left center;
  }
  /* H3 indent (nested ul) */
  #fixed-toc .toc-body ul ul a[href^="#"]{
    padding-left:16px; font-size:14px; color:#0f264a;
  }
  /* hover */
  #fixed-toc .toc-body a[href^="#"]:hover{
    background:#d7e6fb; color:#0f264a;
  }
  /* active */
  #fixed-toc .toc-body a[href^="#"].is-active{
    background:#0d47a1; color:#ffffff !important; font-weight:700;
    border-left-color:#0d47a1; transform:scale(1.10);
  }

  /* reopen FAB (bottom-right) */
  #toc-reopen.toc-fab{
    position:fixed; right:22px; bottom:20px;
    width:48px; height:48px; border-radius:14px;
    background:#0d47a1; color:#ffffff;
    border:0; box-shadow:0 10px 24px rgba(0,0,0,.18);
    cursor:pointer; font-size:22px;
    display:none; place-items:center; z-index:9999;
  }

  /* close/open via checkbox */
  #toc-toggle:checked ~ #fixed-toc{ display:none; }
  #toc-toggle:checked ~ #toc-reopen{ display:grid; }
}

@media (prefers-reduced-motion:reduce){
  #fixed-toc .toc-body{ scroll-behavior:auto; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var box = document.querySelector('#fixed-toc #toc-body');
  var toc = document.getElementById('fixed-toc');
  if(!box || !toc) return;

  /* --- H2/H3 mapping + active highlight + auto-scroll inside TOC --- */
  var links = Array.prototype.slice.call(box.querySelectorAll('a[href^="#"]'));
  if(!links.length) return;

  function resolveTarget(href){
    var raw = href.slice(1);
    try { raw = decodeURIComponent(raw); } catch(e){}
    var sel = ['#'+CSS.escape(raw),'a[name="'+CSS.escape(raw)+'"]','span[id="'+CSS.escape(raw)+'"]','a[id="'+CSS.escape(raw)+'"]'].join(', ');
    var el = document.querySelector(sel);
    if (el) return el;
    return document.querySelector('[id*="'+raw+'"], a[name*="'+raw+'"]');
  }

  var targets = [];
  links.forEach(function(a){
    var t = resolveTarget(a.getAttribute('href'));
    if (t) targets.push({el:t, link:a});
  });
  if(!targets.length) return;

  function activate(id){
    links.forEach(function(l){ l.classList.remove('is-active'); });
    var active = box.querySelector('a[href="#'+CSS.escape(id)+'"]') || box.querySelector('a[href*="#'+CSS.escape(id)+'"]');
    if(active){
      active.classList.add('is-active');
      active.scrollIntoView({ block:'nearest', inline:'nearest' });
    }
  }

  var io = new IntersectionObserver(function(entries){
    var vis = entries.filter(function(e){ return e.isIntersecting; })
                     .sort(function(a,b){ return a.boundingClientRect.top - b.boundingClientRect.top; });
    if(!vis.length) return;
    var target = vis[0].target;
    var id = target.id || target.getAttribute('name') || '';
    if(id) activate(id);
  }, { root:null, rootMargin:'-50% 0px -50% 0px', threshold:0 });

  targets.forEach(function(t, i){
    if (!t.el.id) t.el.id = 'rtoc-auto-' + i;
    io.observe(t.el);
  });

  /* --- sticky fallback: fixed when passing threshold --- */
  var mq = window.matchMedia('(min-width:1024px)');
  var topGap = 96;
  var startTop, startLeft, startWidth;

  function measure(){
    var r = toc.getBoundingClientRect();
    startTop   = window.pageYOffset + r.top;
    startLeft  = window.pageXOffset + r.left;
    startWidth = r.width;
  }
  function onScroll(){
    if (!mq.matches) { unfix(); return; }
    var y = window.pageYOffset || document.documentElement.scrollTop;
    if (y + topGap >= startTop){ fix(); } else { unfix(); }
  }
  function fix(){
    if (!toc.classList.contains('is-fixed')){
      toc.classList.add('is-fixed');
      toc.style.width = startWidth + 'px';
      toc.style.left  = (startLeft - window.pageXOffset) + 'px';
      toc.style.top   = topGap + 'px';
    } else {
      toc.style.left = (startLeft - window.pageXOffset) + 'px';
    }
  }
  function unfix(){
    if (toc.classList.contains('is-fixed')){
      toc.classList.remove('is-fixed');
      toc.style.left = ''; toc.style.width = ''; toc.style.top = '';
    }
  }
  window.addEventListener('scroll', onScroll, {passive:true});
  window.addEventListener('resize', function(){ unfix(); measure(); onScroll(); });
  measure(); onScroll();
});
</script>

🔧実装方法（たった1ステップ）

✅ 手順

①追従目次コードをコピー

上記の追従目次コードをコピー（「コピーする」ボタンをクリック！）

②WordPress管理画面 → 外観 → ウィジェット → サイドバー → カスタムHTMLに設置

🎨主な機能とデザイン

機能	説明
📌 追従（sticky）	スクロールしてもサイドバーに固定表示
📍 現在地ハイライト	表示中の見出しを白文字＋太字＋拡大で強調
🧭 内部スクロール	目次が長くても自動で現在位置までスクロール
❌ バツボタン	ワンクリックで非表示にできる
📑 再表示ボタン	再表示もワンクリックでOK
💻 PCのみ表示	モバイルでは非表示なので邪魔にならない

✅チェックポイント

☑ PC（横幅1024px以上）で表示されているか
☑ スクロールしてもサイドバーに追従しているか
☑ 現在地が白文字・太字・10%拡大でハイライトされるか
☑ 閉じる／再表示ボタンが正常に動作するか
☑ モバイルでは表示されていないか
☑ 固定ページの表示挙動が狙い通りか

✅うまくいかない時は？

作り込みましたが、動作しない可能性は十分あります
そんな時は、Chat GPTに聞きましょう！

ChatGPTにお願いするときのコツ

この追従目次カスタマイズは、依頼内容の具体性と必要条件の共有がポイントです。
以下のコツを意識すると、ChatGPTから的確なコードが返ってきやすくなります。

1. 目的を明確に伝える

例：「AFFINGER＋RTOCで、サイドバーに貼り付く目次を作りたい」
「PCだけで表示」「スマホでは非表示」「現在地ハイライト」など必須条件を先に列挙する

2. 完成イメージや参考リンクを出す

デザイン例のURLやスクリーンショットを渡すと色や形の再現精度が上がる
「このサイトの目次みたいにしたい」と伝えるのが有効

3. 色や雰囲気を具体的に指定

「ブログのキーカラーは#0d47a1」「濃くて明るい紺寄り」など色コードを提示
「角丸」「シャドウ」「枠線の有無」などUI要素も具体化

僕がこの目次を作った時は、最初のベースをスマホのソムリエさんのサイトで骨格を決めた上で、
ブログのテイストに合わせて欲しいと指示を出しました。

4. 実装環境を伝える

テーマ（AFFINGERなど）と目次プラグイン（RTOCなど）を明記
「ウィジェット内だけで完結したい」など制約も重要

指示を出さないと、CSSに入れたりカスタムHTMLに入れたりと別々になり、後々戻すのが大変なので、
一元管理できる方が断然楽です。

5. 操作や挙動の条件を伝える

「バツボタンで閉じる／📑で再表示」「長文時は自動スクロール」など機能を事前に全部挙げる
固定ページでの表示/非表示ポリシーも明記

最後の調整段階で指示を出すので問題ないです。

6. 試してみた結果をフィードバック

「右端が切れる」「色が見づらい」など実際の画面キャプチャと一緒にフィードバックすると修正が早い
うまくいかない部分はスクショ＋説明が最強

ここが一番長く、紆余曲折があります。粘り強くChatGPTと渡り合ってください。

🗣まとめ：初心者でも“貼るだけ”で実現できる

AFFINGERやRTOCの設定に悩まされることなく、
「目次を追従させたい」という初心者の願いを、コード1つで叶えるのがこの方法です。

気になる方は、ぜひ自サイトに導入してみてください！