ワードプレスのメニューにページ内リンクを設置する方法｜4ステップと飛ばない時の確認点

お客さんは、ページを上から順には読みません。

最近は、ホームページをスマホで見るのが、すっかり当たり前になりましたね。

小さな画面で長いページを開くと、料金はどこだろう、場所はどこだろうと、親指で何度も画面を送りながら探すことになります。見つからなければ、そのままページを閉じて、別のお店を探しはじめる。ご自分がお客さんの立場なら、心当たりがあると思います。

そこで役に立つのが、ページ内リンクです。メニューの「料金」を押すと、同じページの料金のところまで、すっと移動する。あの仕組みです。

今のWordPress（ワードプレス）の編集画面（ブロックエディター）では、飛ぶ先の目印は、入力欄に名前を1つ入れるだけで付けられます。HTMLを書き込む必要はありません。

この記事を読むと、次のことが分かります。

• ページ内リンクが、お客さんにとって何の役に立つのか
• メニューにページ内リンクを入れる4つの手順
• 飛ぶ先に付ける名前の決まりと、付け方のコツ
• うまく飛ばないときの確認点と、スマホでの見え方

手順は、このブログでも使っているSWELL（スウェル）というテーマを例にしています。WordPressの基本操作から確かめたい方は、先にこちらをどうぞ。

ページ内リンクは、お客さんに探させないための仕組み

ページ内リンクとは、同じページの決まった場所へ飛ぶリンク

ふつうのリンクは、押すと別のページに移ります。ページ内リンクは、押すと同じページの中の決まった場所まで移動します。

WordPressの公式ドキュメント「Page Jumps」（2026年1月9日更新）では、ページ内リンクがこう説明されています。

リンクを押すと、ページの上や下の離れた場所へ、すぐに移動できる。長いページでは特に役に立つ。

英語の説明を、僕が日本語にしたものです。

何が言いたいかというと、ページ内リンクは、ページが長くなるほど役目が大きくなる、ということです。短いページなら、少しスクロールすれば目に入るので、わざわざ飛ばす必要はありません。

国語辞典の「あ・か・さ」の印と同じ役目

国語辞典の側面に、「あ」「か」「さ」と黒い印が並んでいたのを覚えていますか。

「しんごう」を引きたいとき、親指をその印にかけて、ぱっと「さ行」のあたりを開く。1ページ目から1枚ずつめくる人はいません。

ページ内リンクは、ホームページにあの印をつけるようなものです。料金を知りたい人は料金へ、場所を知りたい人はアクセスへ。読みたいところへ、1回押すだけで着けます。

人の脳は、なまけものです。考えることや探すことを、できるだけ省こうとします。探す手間が続くと、お客さんは「ここは分かりにくい」と感じて、読むのをやめてしまいます。

「探しにくい」は、お客さんが口に出して言う不満

東大阪にある女性専門の鍼灸院「はりとお灸ひなた」の西畑さんは、ご自分でホームページを作っていたころ、お客さんから「ブログ面白いけど探しにくい！」と言われていたそうです。

読みたい気持ちはあるのに、たどり着けない。お客さんにとっても、お店にとっても、もったいない状態です。

ぞろ屋でリニューアルしたあと、西畑さんは、必要な人が必要な情報にきちんとたどり着けるようになった、という実感があると話しています。常連さんからも「わかりやすくなった」と言われたそうです。

このとき直したのは、ページ内リンクだけではありません。それでも、「探しにくい」をなくすことが、お客さんにとってどれだけ大きいかがよく分かる話です。

向いているのは、1ページで説明を完結させる長いページ

僕はホームページを作るとき、お客さんが知りたいことを、知りたい順番に並べることを大事にしています。

ただ、知りたいことの順番は、人によって少しずつ違います。料金から見たい人もいれば、まず場所を確かめたい人もいます。

並びを整えたうえで、知りたい場所へ直接飛べる入り口を用意しておく。ページ内リンクは、そのための仕組みです。特に向いているのは、次のようなページです。

• サービスの説明から料金、流れ、よくある質問、申し込みまでを、1ページにまとめたページ
• 料金表やメニュー表が、長く続くページ
• よくある質問が、10個以上並んでいるページ

反対に、2〜3回スクロールすれば読み終わる短いページには、あまり必要ありません。

メニューにページ内リンクを設置する4ステップ

ここからが手順です。例として、トップページの「料金」の見出しへ、ページのいちばん上に出ているメニュー（ヘッダーのメニュー）から飛べるようにします。

先に1つだけ確認です。WordPressのテーマには、メニューを「外観」の「メニュー」画面で作るものと、ナビゲーションブロックで作るもの（ブロックテーマ）があります。この記事は、SWELLのように「外観」の「メニュー」画面を使うテーマの手順です。

手順1｜飛ばしたい見出しに「HTML アンカー」を付ける

まず、飛ぶ先に名前を付けます。WordPressでは、この名前を入れる欄を「HTML アンカー」と呼びます。アンカー（ページの中の「ここへ飛んでください」という目印）に付ける名前、という意味です。

1. トップページを編集画面で開き、「料金」の見出しをクリックして選びます
2. 画面右側の設定の欄を見ます。出ていないときは、右上の公開や保存のボタンの近くにある、設定のボタンを押すと開きます
3. 設定の欄の下のほうにある「高度な設定」を開きます
4. 「HTML アンカー」の欄に、半角英字で名前を入れます。ここでは「price」にします
5. 変更を保存します

この欄には、「#」を付けずに名前だけを入れます。ここで「#price」と入れると、WordPressが「#」をハイフンに置きかえて「-price」にしてしまい、メニューから飛ばなくなります。

見出し以外のブロックでも、「高度な設定」の中に「HTML アンカー」の欄があれば、同じように名前を付けられます。迷ったら、見出しに付けておくのがいちばん分かりやすいです。

欄に名前を入れるだけで、HTMLを書かなくても、WordPressが同じ働きをする記述を自動で付けてくれます。

手順2｜アドレスの最後に「#名前」を付けて、飛ぶか確かめる

メニューを触る前に、名前がちゃんと付いたかを確かめておきます。ここを飛ばすと、うまく飛ばなかったときに、見出しとメニューのどちらが原因なのか分からなくなります。

1. 保存したページを、ブラウザで開きます
2. 画面上のアドレス欄で、アドレスの最後に「#price」を付け足します
3. Enterキーを押します

例：https://（あなたのサイトのアドレス）/#price

料金の見出しのところまで画面が移動すれば、成功です。

「#」は、必ず半角で入れてください。全角の「＃」では飛びません。

手順3｜「外観」の「メニュー」で、カスタムリンクを追加する

名前が付いたら、メニューに入れます。メニューには固定ページや投稿をそのまま追加することもできますが、ページ内リンクは「カスタムリンク」を使い、アドレスを自分で入力して追加します。

1. 管理画面の左側にある「外観」から「メニュー」を開きます
2. 画面上に「編集するメニューを選択」が出ている場合は、ヘッダーに出しているメニューを選びます
3. 左側の「メニュー項目を追加」の中にある「カスタムリンク」を開きます
4. 「URL」の欄に、手順2で確かめたアドレス（最後に「#price」が付いたもの）を入れます
5. 「リンク文字列」の欄に、メニューに表示する言葉を入れます。ここでは「料金」です
6. 「メニューに追加」を押します

画面の色や細かな見た目は、WordPressのバージョンや入れているプラグインによって少し違います。左に「メニュー項目を追加」、右に「メニュー構造」が並んでいれば、同じ画面です。

画像では、例としてアドレスの最後に「#link」と入れています。ここを、手順1で付けた名前に置きかえてください。

手順4｜「メニューの位置」を確かめて「メニューを保存」する

「メニューに追加」を押すと、右側の「メニュー構造」のいちばん下に「料金」が加わります。

1. 「料金」の項目をドラッグして、表示したい順番の位置まで動かします
2. 画面下の「メニュー設定」にある「メニューの位置」で、SWELLなら「グローバルナビ」にチェックが入っているかを確かめます
3. 「メニューを保存」を押します

保存したら、サイトを開いて、ヘッダーの「料金」を押してみてください。料金の見出しまで移動すれば完成です。

メニューに表示する言葉は、あとから変えることもできます。項目の右側にある矢印を押して開くと「ナビゲーションラベル」という欄があるので、ここを書きかえて保存します。

飛ぶ先に付ける名前の決まりと、迷わない付け方

WordPressが決めている4つの決まり

HTML アンカーに入れる名前には、WordPressの公式ドキュメントで決まりが書かれています。

同じ名前を2回使うと、思った場所に飛ばなくなります。同じクラスに同じ名前の子が2人いたら、先生が名前を呼んでも、どちらが返事をするか分からないのと同じです。

迷わない名前の付け方

僕がおすすめしているのは、半角の小文字の英語で、中身がひと目で分かる短い名前にすることです。

「a1」「a2」のような番号だけの名前は、あとで見返したときに、どこに付けた名前なのか分からなくなります。英語が思いつかないときは、「ryokin」のようなローマ字でもかまいません。

日本語の名前は避けてください。先頭はアルファベットにするという決まりがあるうえに、日本語はアドレスに入れてコピーすると、読めない記号の列に変わってしまいます。

それから、一度付けた名前は、できるだけ変えないことです。見出しの名前を変えたら、メニューに入れたアドレスも一緒に直さないと飛ばなくなります。

「#price」だけで入れるか、アドレスごと入れるか

メニューの「URL」の欄には、「#price」だけを入れることもできます。ただ、ヘッダーのメニューは、どのページにも出ています。

「#price」だけだと、トップページ以外のページで押したときに、そのページの中で「price」を探してしまいます。トップページの料金には移動しません。

ヘッダーのメニューのように、いろいろなページに出るメニューには、ページのアドレスごと「#price」を付けて入れる。こうしておけば、どのページから押しても、トップページの料金まで移動します。

メニュー以外からも、同じ名前で飛ばせる

一度付けた名前は、メニュー以外からも使えます。

本文の文字やボタンから飛ばす

1. 本文で、リンクにしたい文字やボタンを選びます
2. ツールバーのリンクのボタンを押します
3. 「#price」のように、「#」から始めて名前を入れます

ページの途中に「料金を見る」のような文字やボタンを置いておくと、読んでいる途中で料金が気になった人を、そのまま案内できます。

別のページの、決まった場所へ飛ばす

別のページの決まった場所へ飛ばすときは、そのページのアドレスの最後に「#名前」を付けます。

例：https://（あなたのサイトのアドレス）/service/#price

ブログの記事から、サービスのページの料金のところへ直接案内したいときに使えます。

ブログ記事のはじめに出てくる目次も、仕組みは同じです。見出しにそれぞれ名前が付いていて、目次の項目を押すと、その見出しまで移動します。

うまく飛ばないときの5つの確認点

設定したのに飛ばないとき、よくある原因は次の5つです。上から順に確かめてみてください。

1. 「#」や名前が、全角になっていないか

日本語入力のまま打つと、「#」が全角の「＃」になりがちです。見た目はよく似ていますが、全角では飛びません。名前の英字も、全角になっていないかを見てください。

2. 見出しとメニューで、名前が1文字でもずれていないか

大文字と小文字は別の名前として扱われるので、見出しが「Price」でメニューが「price」だと飛びません。

見出しの側の名前が、「-price」のように頭にハイフンが付いた形になっていないかも見てください。HTML アンカーの欄に「#」まで入れると、こうなります。

いちばん確実なのは、手順2のやり方です。アドレスの最後に「#名前」を付けて飛ぶなら、見出しの側は正しい。メニューの側の書き間違いだと分かります。

3. 同じ名前を、ページの中で2回使っていないか

別の見出しに同じ名前を付けていると、思った場所に飛びません。ページの下のほうに、以前付けた同じ名前が残っていることもあります。

4. 保存し忘れていないか、古い表示のままになっていないか

見出しの変更を保存し忘れている。「メニューを保存」を押し忘れている。どちらも、よくあることです。

表示を速くするプラグインを入れていると、キャッシュ（ページの写しを一時的にためておき、速く表示する仕組み）のせいで、古いページが表示されたままのことがあります。プラグインの機能でキャッシュを消してから、もう一度確かめてください。

5. 飛んだ先が、上に固定されたヘッダーの裏に隠れていないか

ヘッダーを画面の上に固定して表示しているサイトでは、飛んだ先の見出しが、ヘッダーの裏に隠れてしまうことがあります。移動はしているのに、見出しが見えない、という状態です。

使っているテーマや設定によって、起きる場合と起きない場合があります。まずは実際に押して確かめてください。隠れてしまうときは、見出しの1つ上のブロックに名前を付けると、見出しが見える位置で止まりやすくなります。

スマホでの見え方を確かめる

パソコンで飛べたら、必ずスマホでも確かめます。ページ内リンクがいちばん役に立つのは、画面が小さいスマホだからです。

SWELLでは、ヘッダーのメニューがスマホの開閉メニューの中に入る

SWELLの公式マニュアル「スマホメニューの設定方法」（2021年8月13日更新）によると、スマホの開閉メニュー（ボタンを押すと開くメニュー）には、標準ではグローバルナビと同じメニューが表示されます。

「スマホ開閉メニュー内」という位置に別のメニューを設定すると、そちらが優先して表示されます。スマホでは項目を絞りたい場合は、スマホ用のメニューを別に作って、ページ内リンクだけを並べる方法もあります。

スマホで確かめる3つのこと

• 開閉メニューの中の項目を押したあと、メニューが閉じて、目的の場所が見えているか
• メニューの言葉が長すぎて、2行に折り返していないか
• 押したい項目を、親指で押し間違えずに押せるか

メニューの言葉は、「料金」「流れ」「アクセス」のように、短いほど押しやすくなります。

SWELLでは、ページ内リンクを押すと、画面がなめらかに流れるように目的の場所まで動きます（スムーススクロール）。この動きは、「SWELL設定」の「機能停止」タブで止めることもできます。

メニューに並べる項目は、欲張らない

ページ内リンクが便利だからといって、見出しを全部メニューに並べると、今度はメニューの中でお客さんが迷います。

選ぶ基準は、お客さんがそのページでいちばん探しているものです。料金、流れ、よくある質問、アクセス、問い合わせ先。お店や会社によって違いますが、電話やメールでよく聞かれることが、そのままメニューの候補になります。

お客さんがページのどこまで読んでいるかは、読まれた範囲を色で見せてくれるヒートマップで確かめられます。多くの人が読むのをやめている場所の手前に、ページ内リンクの入り口を置くのも1つの方法です。

まとめ｜ページ内リンクは、お客さんが迷わず着くための入り口

• ページ内リンクは、同じページの決まった場所へ飛ぶリンク。長いページ、特にスマホで役に立つ
• 手順は4つ。見出しに「HTML アンカー」を付ける、アドレスに「#名前」を付けて確かめる、カスタムリンクで追加する、「メニューを保存」する
• うまく飛ばないときは、全角の「＃」、名前のずれ、名前の重なり、保存とキャッシュ、固定されたヘッダーの5つを見る

お客さんが迷わずに目的の場所へ着けるかどうかは、小さな差に見えて、結果に出ます。僕がお手伝いした整体院では、デザインはほぼそのままで、ページの組み立てと、お客さんが予約までたどる道すじを見直しました。問い合わせほぼゼロから、改善後2か月で月10件になっています。

今日やることは1つです。スマホで自分のトップページを開いて、料金と問い合わせ先を見つけるまでに、何回スクロールしたかを数えてみてください。

親指が何度も動くようなら、そこがページ内リンクを置く場所です。

ページ内リンクを足す作業そのものは、すぐに終わります。ただ、どこへ飛ばすかを決めるには、お客さんが何を探してページを開くのかを、先に考えておく必要があります。そこが、いちばん手間のかかるところです。

メニューを考える前に、ホームページ全体がお客さんの迷わない並びになっているかを確かめたいときは、「勝てるホームページ診断AI」を使ってみてください。アドレスを貼るだけで、勝てるホームページの考え方に沿っているかをAIが診断します。公式LINEに登録して「診断」と送ると、無料でお渡ししています。

出典

• WordPress.org 公式ドキュメント「Page Jumps」（2026年1月9日更新）https://wordpress.org/documentation/article/page-jumps/
• WordPress.org 公式ドキュメント「Heading block」（2026年6月4日更新）https://wordpress.org/documentation/article/heading-block/
• WordPress.org 公式ドキュメント「Appearance Menus Screen」（2026年7月28日更新）https://wordpress.org/documentation/article/appearance-menus-screen/
• SWELL公式マニュアル「スマホメニューの設定方法」（2021年8月13日更新）https://swell-theme.com/basic-setting/5857/
• SWELL公式マニュアル「グローバルナビ（ヘッダーメニュー）の設定方法」（2021年8月3日更新）https://swell-theme.com/basic-setting/339/
• SWELL公式「SWELL – ver. 2.6.9 アップデート情報」（2022年10月9日公開）https://swell-theme.com/update/9995/