WordPressのページ内リンクで見出しが隠れるときの直し方

ページ内リンクを押すと移動するのに、見出しが上のメニューに隠れて読めない。これはリンク先の間違いではなく、固定メニューと移動位置が重なっている場合があります。

ここではクラシックエディターで移動先の見出しだけに scroll-margin-top を付ける方法を説明します。サイト全体のメニューを変更せず、一つの見出しから試せます。リンクの作成から始める方はページ内リンクの作り方をご覧ください。

1．リンク切れか、見出しの重なりかを見分ける

1. 通常の記事ページを開き、問題のリンクを押します。
2. 画面が移動したら、少し上へスクロールします。
3. 目的の見出しがメニューの裏から現れるなら、移動位置の余白を調整します。

まったく移動しない場合は、まずリンクの # の後ろと移動先のIDが一致しているか確認します。余白を増やしても、存在しないIDには移動できません。

2．見出しの開始タグに余白の指定を足す

1. 投稿 → 投稿一覧から対象の記事を開きます。
2. コードタブに切り替え、リンク先のIDが付いた見出しを探します。
3. 次の例のように style=”scroll-margin-top:180px” を加えます。IDと見出しの文字は変更しません。

変更前：

<h2 id="jump-demo">確認する見出し</h2>

変更後：

<h2 id="jump-demo" style="scroll-margin-top:180px">確認する見出し</h2>

180pxはこの教材の例です。固定メニューの高さに合わせて数値を調整します。隠れるなら増やし、空きすぎるなら減らします。scroll-margin-top はスクロールで移動するときの余白で、通常の文章の間に空行を挿入する操作ではありません。

すでにstyle属性がある場合は、styleを二つ作らず、その中へセミコロンで区切って追加します。分からない指定を削除しないでください。

3．保存し、PCとスマホで同じリンクを押す

1. 公開済みの記事は更新、下書きは下書き保存を押します。
2. 記事ページを開き直し、ページ上部など別の位置から同じリンクを押します。
3. 見出しの文字と最初の文章が読めるか確認します。
4. スマホ幅でも試します。メニューが2段になる場合は、PCより高さが増えることがあります。

ログイン中の管理バーがある画面と、読者が見る画面では上部の高さが異なります。仕上げではログインしていない閲覧環境でも同じリンクを試してください。

効かないときに確認すること

• 指定する場所：リンク側のaタグではなく、実際にIDが付いている移動先に設定します。
• 自動目次：テーマが見出しの内側に別のIDを作る場合があります。自分で作ったリンクと自動目次では移動先が異なることがあります。
• 保存後の反映：更新後の通常URLを開き直します。古いプレビューだけで判断しません。
• 独自のスクロール処理：テーマやプラグインのJavaScriptが位置を決める場合、この指定だけでは調整できないことがあります。数値を増やし続けず、使用テーマのスクロール設定を確認します。

元へ戻すときは、追加したscroll-margin-topの指定だけを外して更新します。IDやリンクを削除する必要はありません。

このページの調整済み見出しへ移動することで動きを試せます。

調整後の確認ポイント

• 見出しが固定メニューに隠れない
• 余白が大きすぎず、本文がすぐ読める
• PC・スマホの両方で確認した
• 通常URLで保存結果を確認した

基本操作はページ内リンク、内容の整理は見出しの付け方、仕上げは公開前チェックリストで確認できます。

これからWordPressのサイトを用意する方へ

この記事の操作はWordPressの編集機能です。すでにサイトがある方は契約し直す必要はありません。新しく始める方はサーバーとドメインの選び方で更新費用・バックアップ・サポートを確認しましょう。サーバーにドメインが含まれる場合もあるため、二重契約を避けます。