Elementor 目次の現在地を自動ハイライト（スクロール連動CSS+JS）

💡目次のデザインは、そのまま。「今ここ」だけを自動で追加。

Elementorで目次を自作したものの、「今どこを読んでいるか」がユーザーに伝わらない ── そんな経験はありませんか？

本テンプレートは、すでに作った目次のデザインを変えずに、スクロール位置に合わせて現在地を自動でハイライトする機能だけを後付けできるテンプレートです。

目次リンクに#IDでアンカーを設定し、親コンテナにmhd-scrollspyクラスを付けるだけ。現在地の検知やActive表示の切り替えに必要なCSS・JSは、実装済みのコードとして提供します。

プラグイン不要・Elementor無料版で動作するため軽量です。

✅このテンプレートでできること

• 自作した目次のデザインをそのまま、現在地ハイライトだけを追加
• Active時の文字色・背景色・角丸・下線・囲みをCSS変数で自由にデザイン
• 下線タイプ・囲みタイプはそれぞれ色・太さも個別調整可能
• ファーストビューなど、最初の対象セクションに到達する前は目次をハイライトしない設計
• 【任意】スクロール中の現在地に合わせてURLの#IDを自動更新（ハッシュ同期）
• Elementor無料版で動作（Pro不要）
• 参考CSSとして、目次のSticky表示化・スマホでの横スクロール目次化も同梱

🔍ゼロから実装する場合との違い

現在地ハイライトをゼロから実装しようとすると、スクロール量を判定するJavaScriptを自前で書く必要があり、判定位置の調整やちらつき対策など、細かい作り込みが発生します。

本テンプレートでは、

• 現在地の検知・Active表示の切り替えをCSS+JSで解決済み
• Elementorのコンテナ構造にそのまま対応
• 色・角丸・下線・囲みをCSS変数で調整するだけ

👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです

🎨Elementor Proの目次との違い

Elementor Proには「Table of Contents」ウィジェットがあり、見出しから目次を自動生成できます。これは非常に便利な機能ですが、Active表示のデザインは文字色＋下線が中心です。

本テンプレートは、目次の自動生成は行わず、すでにデザインした目次に現在地表示だけを追加するという別のアプローチです。

• 見出しから自動で目次を作りたい方 → Elementor Pro「Table of Contents」ウィジェット
• 自分で作った目次デザインを活かしたい方 → 本テンプレート

🙋‍♀️こんな方におすすめ

• Elementorで目次を自作していて、現在地表示を追加したい方
• Elementor Pro「Table of Contents」のデザインの自由度に物足りなさを感じている方
• 現在地検知のJSを毎回自前で実装している方
• 長いLP・記事ページで、ユーザーが自分の位置を見失わないようにしたい方
• アンカーリンクは作れるが、現在地ハイライトまでは実装できていない方

🛠導入は4ステップ＋任意調整（貼るだけ）

1. CSS・JSを貼り付けて有効化
   CSSをサイトに追加し、JSはWPCode等の無料プラグインを使ってフッターに読み込みます。
2. 目次コンテナにクラスを設定
   目次全体の親コンテナに「mhd-scrollspy」を付与します。
3. 目次リンクと対象セクションを設定
   目次リンクを「#ID」形式で設定し、対応するセクションのCSS IDに同じIDを設定します。
4. プレビューで動作確認
   ページをスクロールし、現在地に合わせて目次のActive表示が切り替わることを確認します。

【任意】
Activeの色・背景色・角丸・下線・囲み、判定位置（オフセット）、URLハッシュ同期などを調整できます。

導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

• WordPress
• Elementor（無料版で動作可能）
• 目次リンク・対象セクションのIDが設定できること（通常のアンカーリンク構造）
• JSを読み込むためのプラグイン（WPCode等の無料プラグインでOK）

🖥️動作確認環境

• Windows：Chrome / Edge
• iOS：iPhone（Safari）実機確認済み
• Android：Chrome 実機確認済み
• V3／V4（Elementor V4 Atomic Widgets含む）とも動作確認済み

📖導入難易度・必要スキル

【導入難易度】★★☆☆☆（やや簡単）

• WordPress / Elementorの基本操作ができる方
• CSS・JSをコピー＆貼り付けできる方
• WPCode等で、JSをフッターに読み込める方（解説付き）

🔗固定ヘッダーでアンカー位置がずれる方へ

固定ヘッダーやSticky目次を使用しているサイトでは、通常のアンカーリンクでも、固定要素の高さによってクリック後の見出しが隠れることがあります。

本テンプレートは「現在地の検知・ハイライト」を担当するため、クリック時の着地点補正は行いません。デモサイトでは、別売の「アンカーリンクずれ防止CSS」を併用して着地点を調整しています。

固定ヘッダー／Stickyヘッダーで見出しが隠れる・位置がずれるとお悩みの場合は、あわせてのご検討をおすすめします。
→ アンカーリンクずれ防止CSSはこちら

✅まとめ

目次のデザインはそのまま、現在地ハイライトだけを後付けできる。
Elementor Pro標準の目次生成とは別のアプローチとして、すでに自作した目次デザインを活かしたい方に向けたテンプレートです。

無料版で動作し、Active表示は文字色・背景色・角丸・下線・囲みまで自由に調整可能。参考CSSとして、Sticky表示化・スマホ横スクロール目次化のコードも同梱しています。