Elementor メニューActive表示制御テンプレ（複数Active表示防止・スクロール連動）

💡Elementorのメニューで、Active表示が複数ついて困っていませんか？

スクロール位置に応じて、現在地だけを1つ正確にハイライトするテンプレートです。

Elementorのナビメニュー（WordPress Menu）ウィジェットで起きがちな
「Active表示が複数つく」「現在地が分かりにくい」問題を、
CSS＋JSで安定して解決します。

JavaScriptを使ってスクロール位置を判定するため、
実務レベルで正確なActive表示制御が可能です。

❗こんな症状ありませんか？

• メニューのActive表示が複数ついてしまう
• スクロールしても現在地が正しく反映されない
• セクションが近いと複数のメニューが同時にハイライトされる
• Elementorの標準機能では制御できない
• 固定ヘッダー使用時にメニューやアンカーの挙動が不安定になる

👉 これらはElementorでよくあるActive表示制御の問題です

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

• スクロール位置に応じてActive表示を自動切り替え
• Active表示を常に「1つだけ」に制御
• ElementorのActive暴走（複数表示）を防止
• 固定ヘッダー環境でも安定動作
• CSS＋JSのみで実装（プラグイン不要）

🔍よくある対処法との違い

Active表示制御の対策として、
CSSや:targetを使った方法がよく紹介されています。

しかしこれらの方法では、

• スクロールに対応できない
• Activeが正しく切り替わらない
• 複数Activeが発生する

本テンプレートは、
スクロール位置を検知して制御（JS）するため、

• 現在地を正確に判定
• Active表示は常に1つだけ表示
• LPでも違和感のないナビゲーションを実現

👉 見た目ではなく「挙動」を解決するテンプレートです

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

• ElementorでLPを制作している方
• メニューのActive表示に違和感がある方
• スクロール連動のナビゲーションを実装したい方
• UIの完成度を上げたい方
• 挙動制御のため毎回JSを書いている方

🛠導入は３ステップ（貼るだけ）

1. メニューを設定
   WordPressメニューを追加し、アンカーリンクを設定します。
2. CSSを貼り付け
   外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。
3. JSを追加
   指定のコードを貼り付けるだけで動作します。

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

⚙対応環境・前提条件

• WordPress
• Elementor Pro版（必須）
• ナビメニュー（WordPress Menu）ウィジェット使用
• 固定ヘッダー対応

🖥️動作確認環境

• Windows：Chrome / Edge
• iOS：iPhone（Safari）実機確認済み
• Android：Chrome 実機確認済み

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

【導入難易度】★☆☆☆☆（かんたん）

• WordPress / Elementorの基本操作ができる方
• CSS / JSをコピー＆貼り付けできる方