Elementor アンカーリンクずれ防止CSS（固定ヘッダーでも見出しが隠れない）

💡Elementorのアンカーリンクが「ヘッダーに隠れる」方へ

固定ヘッダー／Stickyヘッダー使用時に起きがちな
「アンカー移動で見出しがヘッダーに隠れる」「位置がずれる」問題を、
CSSだけで安定して解決するテンプレートです。

JavaScript不要。
ページのレイアウトや余白を無理に調整せず、“停止位置”だけを正確にずらします。

※ Elementorのアンカー機能だけでなく、
ページ内リンク（#リンク）すべてに対応しています。

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

• アンカー移動で見出しが隠れない（固定／Sticky／透明ヘッダー対応）
• PC／タブレット／スマホ別に数値を調整（変数1か所のみ）
• テーマヘッダーでもElementorヘッダーでもOK
• Safari（iOS）含む実機で動作確認済み

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

アンカーずれ対策として、見出し上にダミーの余白を入れたり、
各セクションの余白を増やして調整する方法がよくあります。

本テンプレートは、
レイアウトはそのまま、
アンカーの停止位置だけを制御するため、

• デザインを崩しにくい
• 後からの更新・修正でも影響が出にくい
• どのページにも同じ考え方で使い回せる

というメリットがあります。
※ CSSを貼っても変化がない場合は、キャッシュの影響の可能性があります。導入ガイドで対処方法を解説しています。

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

• 固定ヘッダー／Stickyヘッダーでアンカー見出しが隠れて困っている
• LPの見出し間隔が短く、アンカー移動が目立つ
• ページごとに余白を足す“力技”ではなく、根本的に直したい
• JSなしで安全に実装したい

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

1. CSSを貼り付け
   外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。
2. ヘッダーの高さを設定する
   CSS内の :root 変数を、ヘッダーの最大高さに合わせて変更。

導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。
「数値を変えても反映されない」場合のキャッシュ対処も案内しています。

⚙対応環境・前提条件

• WordPress
• Elementor（無料版でもOK）
• 固定ヘッダー／Stickyヘッダー（Elementor / テーマどちらでも可）

🖥️動作確認環境

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

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

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

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

✅まとめ

固定／Stickyヘッダーでも、アンカー移動で見出しが隠れない。
“貼るだけ”で再現性の高いアンカー位置調整を実現します。