スクロールイベントはもう古い。Intersection Observerで実装する軽量・追尾目次ハイライトのすゝめ

広告も貼りたい。関連記事も見てほしい。何より、長い記事を書いてるんだから、読者には迷わず読んでほしい。

そう思って「追尾目次プラグイン」を導入した結果……待っていたのは、真っ白になったサイドバーでした。

記事の読み込み速度はガタ落ちし、スマホで開けばカクつくスクロール。プラグインの設定画面で四苦八苦して、結局解決できずに時間を浪費する。「これ、何のためにやってるんだっけ？」と自問自答した夜、私は決めました。もう、プラグインに頼るのはやめようと。

実は、プロのメディアが使っている「あのヌルヌル動く追尾目次」は、プラグインなしでも驚くほど軽量に実装できるんです。しかも、サイトが重くなる原因の「あの古臭い技術」を使わずに。

今日は、あなたのサイトを軽く、美しく変えるための「脱プラグイン」の具体的な手順をお見せします。

なぜ、あなたの「追尾目次」はサイトを重くするのか？

多くの追尾目次プラグインは、裏側で「スクロールイベント」という仕組みを使っています。これはユーザーが画面を動かすたびに、JavaScriptが「今どの位置にいるか？」を計算し続けるものです。

毎秒数十回も計算処理を走らせれば、ブラウザは当然悲鳴を上げます。特に広告やSNS埋め込みが多い現代のサイトでは、プラグインによる処理の競合や読み込み遅延が重なり、サイドバーが真っ白になる「表示崩れ」を引き起こすことも珍しくありません。

解決策：Intersection Observer API という「新しい選択肢」

プラグインの重さから脱却するための答えが、ブラウザ標準搭載のAPI『Intersection Observer』です。

これは「要素が画面に入ったら教えて」とブラウザにお願いする仕組みです。従来の「常に監視し続ける」方式とは異なり、必要なタイミング（見出しが画面に入ったとき）だけ処理が走るため、サイト速度への影響は限りなくゼロ。まさに、プロのメディアが採用している「ヌルヌル動く」挙動の正体です。

【準備】実装前に確認すべき「SWELLの目次仕様」

SWELLは非常に優秀で、標準で目次生成機能を持っています。無理にプラグインで機能を上書きするのではなく、SWELLが生成した目次の構造をそのまま活用するのが、最も不具合が少なく、軽量なアプローチです。

まずは、これまで使っていた追尾目次プラグインを無効化（または削除）し、競合が起きないクリーンな環境を用意してください。

【実践】SWELLで「爆速・追尾目次」を実装する全工程

準備が整ったら、以下のコードをサイトに組み込みます。

ステップ1：コードを「直前」に配置する

WordPress管理画面の [外観] > [カスタマイズ] > [高度な設定] を開き、[タグ直前に出力するコード] に以下を貼り付けてください。

JavaScript
<script>
window.addEventListener('DOMContentLoaded', function() {
    const observerOptions = {
        root: null,
        rootMargin: '-20% 0px -70% 0px', // ここで反応タイミングを調整
        threshold: 0
    };
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const id = entry.target.getAttribute('id');
                if (!id) return;
                const tocLinks = document.querySelectorAll('.p-toc__link');
                
                tocLinks.forEach(link => {
                    const isActive = link.getAttribute('href') === `#${id}`;
                    link.classList.toggle('is-active', isActive);
                });
            }
        });
    }, observerOptions);
    // h2, h3, h4まで監視対象にする
    document.querySelectorAll('h2, h3, h4').forEach(heading => observer.observe(heading));
});
</script>

このコードは</body>の直前に挿入するとパフォーマンスを落とさないで済みます。

ステップ2：監視範囲（rootMargin）の微調整

コード内の rootMargin: '-20% 0px -70% 0px' は、画面上の「どの位置で見出しを検知するか」を決める重要な設定です。もしお使いのテーマのヘッダー高さや広告枠によって見出しが隠れてしまう場合は、この数値を調整することで最適なタイミングに合わせられます。

仕上げ：CSSで「プロ級」のハイライトを演出する

コードを貼っただけでは見た目は変わりません。最後に、ハイライト表示をCSSで整えましょう。

[外観] > [カスタマイズ] > [追加CSS] に以下を追加してください。

CSS
/* サイドバー目次のハイライト用 */
.p-toc__link.is-active {
    background-color: #fce4d6 !important; /* お好きな色に */
    color: #d35400 !important;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 5px;
    display: block;
}

パフォーマンス測定：導入前後の変化を検証

実装が完了したら、ブラウザのキャッシュをクリアして確認してみましょう。 以前のプラグインよりもスクロールが軽くなり、読んでいる見出しがピンポイントで光るはずです。

「PageSpeed Insights」でスコアを測ってみるのもおすすめです。プラグインを1つ消すだけで、パフォーマンスの数値が目に見えて改善するはずです。

よくある質問（FAQ）

まとめ：引き算がサイトを強くする

「機能＝プラグイン」という思考を捨てると、Webサイト運営はもっとシンプルになります。

今回実装した「軽量・追尾目次」は、あなたのサイトを軽くするだけでなく、ユーザーにとって「今、記事のどこを読んでいるか」が明確になる最強のナビゲーションになります。

広告を減らすのではなく、広告が配置されたサイトを「軽く」読みこなせる設計にすることこそが、読者に愛されるメディアへの近道です。ぜひ、今日からあなたのブログで試してみてください！