すべてのカテゴリ

今回は、WordPressでアンカーリンクを設定したのに 👉 「目的の場所を通り過ぎてしまう」問題を解決した話です。 --- ### ■ 起きた現象 ページ内リンクをクリックすると… * 見せたい見出しを通り過ぎる * 1つ下のブロックまでスクロールされる * 目的の内容が一瞬で消える 👉 「ちょっとズレる」どころではなく **完全に流れてしまう状態**でした。 --- ### ■ アンカーリンクとは？ 簡単に言うと👇 👉 ページ内の特定の場所にジャンプするリンク 例えば ```text #movie ``` のように設定すると、その場所までスクロールされます。 --- ### ■ よくある原因（今回もこれ） 原因は👇 👉 **スクロール位置が“ピッタリすぎる”こと** ブラウザは 👉 「指定した要素の一番上」を画面の上に合わせます その結果👇 * 見出しの高さ * 余白 * ブロック構造 などの影響で 👉 **見出しがすぐ画面外に消える → 下のブロックが見える** --- ### ■ 今回のポイント よくある「ヘッダーに隠れる」問題とは違い 👉 **そもそもスクロール位置が深すぎる状態** でした。 --- ### ■ 解決方法 CSSでスクロール位置を手前に調整します。 ```css #movie {   scroll-margin-top: 300px; } ``` --- ### ■ どう変わる？ ```text 少し手前で止まる ↓ 見出しがしっかり表示される ↓ 通り過ぎない ``` --- ### ■ 数値の考え方 数値は固定ではなく、 * ヘッダーの高さ *