WordPressでページ内リンクを作る方法｜見出しへ飛ぶ目次とボタンの設定
見出し側のHTMLアンカーとリンク側の#を、同じ例で照合。別ページからのリンク、飛ばない原因、見出しが隠れる場合まで4枚の図解で確認します。
この記事でわかること
ページ内リンクは、移動先の見出しに名前を付け、その名前を「#」付きでリンク先へ入れると作れます。 たとえば、見出し側が trial-flow なら、同じページのリンク先は #trial-flow です。
長い案内ページで「持ち物だけ確認したい」「アクセスへすぐ進みたい」という場合に使います。この記事では、WordPressのブロックエディターで、体験の流れ・持ち物・アクセスへ移動する小さな目次を作ります。
1．移動先を三つに絞って決める
最初に、ページの中に実際にある見出しを確認します。目次を先に作り、存在しない見出しへリンクしないようにします。
| 読者に見せる見出し | 見出し側のアンカー | 同じページのリンク先 |
|---|---|---|
| 体験の流れ | trial-flow | #trial-flow |
| 持ち物 | what-to-bring | #what-to-bring |
| アクセス | access | #access |
この英字は練習例です。短く意味を見分けやすい半角英字とハイフンを使う運用にすると、入力間違いを確認しやすくなります。日本語の見出しはそのままで構いません。
同じページ内でアンカー名を重複させず、大文字小文字もそろえます。WordPressのHTMLアンカー欄には、空白を使わず英字から始まる名前を設定します。
2．移動先の見出しに名前を付ける
- 固定ページを編集し、「体験の流れ」の見出しブロックを選びます。
- 右側の設定を開き、「固定ページ」ではなく「ブロック」の設定を確認します。
- 「高度な設定」にある「HTMLアンカー」を開きます。
trial-flowと入力します。この欄には#を付けません。- ほかの見出しにも表の名前を設定します。
見出しが選べない場合は、リスト表示から対象の見出しブロックを探します。大きな文字にしただけの段落と、見出しブロックは異なります。設定欄が見つからないときは、どのブロックを選択しているかを先に見ます。
HTMLアンカーを入力しても、本文に英字が追加表示されるわけではありません。読者が読む見出しと、リンク用の識別名を分けて設定しています。
3．目次やボタンから見出しへリンクする
ページ上部へ戻り、段落またはリストブロックで「体験の流れ」「持ち物」「アクセス」と書きます。
「体験の流れ」の文字を選び、リンク設定を開いて #trial-flow を入力し、適用します。残りも同じように設定してください。ボタンに使う場合は、ボタンブロックを選択して同じリンク先を指定します。
| 入力する場所 | 正しい例 | 間違いの例 |
|---|---|---|
| 見出し側のHTMLアンカー | trial-flow | #trial-flow |
| 同じページのリンク先 | #trial-flow | trial-flow だけ |
| ほかのページからのリンク | 公開ページのURL＋#trial-flow | 移動元のURL＋#trial-flow |
リンク文字は「こちら」より「持ち物を確認する」のように移動先が伝わる表現にします。ボタンを押したら申込画面が開くと読める文言にして、実際にはページ下部へ移動するだけ、という食い違いも避けます。
4．別のページからリンクする場合
同じページなら #access で足りますが、トップページから体験案内のアクセス欄へ進ませたい場合は、体験案内の公開URLを先に付けます。
同じページ内：
#access
別ページから：
https://example.com/trial/#accessexample.com は説明用です。実際には自分の公開URLをコピーし、末尾へ #access を追加します。編集画面やプレビューのURLは使いません。ページURLがすでに別の #... で終わっている場合は、二つ続けず目的のアンカーへ置き換えます。
URLの前半は「どのページか」、# より後ろは「ページ内のどこか」を表します。別ページへは移動するのに先頭に止まるなら、後半のアンカーが一致しているかを確認します。
5．公開URLから三つの動きを確かめる
ページを保存・更新し、公開ページを開きます。目次を一つずつ押し、見出しが読める位置へ移動するか見てください。そのうえで、アンカー付きURLを新しいタブへ貼り付け、直接開いても目的の場所に到達するかを確認します。
| 試すこと | 完成の目安 |
|---|---|
| ページ上部の目次を押す | 対応する見出しへ移動する |
| 別ページのボタンを押す | 目的のページと見出しが開く |
| スマホで同じ操作をする | 見出しが読め、本文を続けて読める |
| ブラウザーの戻るを使う | 移動後も迷わず前の閲覧へ戻れるか確認できる |
「URL末尾が変わった」だけで完了にしません。目的の見出しが画面内に見えることを確認します。固定ヘッダーが見出しを覆ってしまうと、移動していても読者にはわかりにくくなります。
飛ばない・違う場所へ飛ぶ場合の確認表
| 症状 | 確認する点 | 直し方 |
|---|---|---|
| 何も起きない | リンク設定を確定したか | 入力後に適用し、ページも更新 |
| ページの先頭で止まる | アンカー名が存在するか | 見出し側とリンク側の文字を照合 |
| 別の見出しへ行く | 同名アンカーの重複 | 一つの見出しに一つの名前を付け直す |
| 同じページに残る | リンク先が#だけではないか | 別ページの公開URLを付ける |
| 見出しが上部に隠れる | 固定ヘッダーとの重なり | テーマの余白やスクロール位置を制作担当へ相談 |
| 見出し名を変えたら困った | アンカーまで変えたか | 既存リンクと対応表を見直す |
ヘッダーとの重なりを直すためだけに、意味のない空行を大量に入れると、PCとスマホで余白が崩れる場合があります。設定やCSSの調整が必要か、テーマの担当者へ伝えてください。
後から見出しを変更するとき
見出しの表示文字だけを変える場合、リンク用のアンカーは残す運用にすると、すでに配ったURLを維持しやすくなります。アンカーそのものを変えるなら、目次、ボタン、別ページからのリンクも同時に点検します。
管理メモには「ページURL／見出し／アンカー名／リンクを置いた場所」の4点を残してください。リンクの配置全体は内部リンクの付け方も参考になります。
図は独自の模式図です。表の名前・点検順は編集部の作業例で、公式の必須構成ではありません。公式資料確認日：2026年10月14日。
