WordPressのアンカーリンク設定とリンクが飛ばない原因と対処法

この記事では、初心者の方でも迷わずできるWordPressのアンカーリンク設定の手順と、「設定したのに飛ばない」ときの原因・対処法をまとめて解説します。

WordPressのアンカーリンク設定の前に知っておきたい基本

アンカーリンクとは？ページ内リンクのイメージ

アンカーリンクは、同じページの中の特定の位置に、ワンクリックでジャンプさせるためのリンクです。

例えば「この記事のポイントはこちら」「お問い合わせはこちら」といったボタンを押したときに、ページの下の方にスッと移動する、あの仕組みですね。

用語のイメージをざっくり整理すると、次のようになります。

用語	意味・イメージ
アンカー（id）	飛び先の位置に付ける「目印の名前」
アンカーリンク	その目印の場所まで一気に移動するためのリンク
ページ内リンク	同じページの中で上下に移動するリンク全般

WordPressでやることは、ざっくり言えば「飛び先に目印（id）を付ける」「リンク元からその目印に向かって飛ぶように設定する」の2つだけです。

WordPressでアンカーリンクを使うと便利な場面

実際にサイトを運営していると、アンカーリンクがあると助かる場面がたくさんあります。

• 長めの記事で、目次からそれぞれの見出しに一気に飛ばしたいとき
• LP（縦長のセールスページ）で、「今すぐ申し込む」ボタンから申込みフォームに飛ばしたいとき
• サービスページで、「料金を見る」「よくある質問を見る」といったボタンから下のセクションに飛ばしたいとき
• 別ページから「このページのこの項目」をピンポイントで見てもらいたいとき

どれも共通しているのは、「読者に無駄なスクロールをさせず、知りたい場所へスムーズに誘導できる」という点です。

読者にとってのストレスが減るので、結果的に滞在時間やコンバージョンにも良い影響が出やすくなります。

WordPressブロックエディターでのアンカーリンク設定手順

ステップ1：リンク先のブロックにHTMLアンカー（ID）を付ける

アンカーリンクは、先に「飛び先」を作っておくのがポイントです。

ブロックエディターの場合、飛ばしたい見出しや段落のブロックに対して、HTMLアンカー（id）を設定していきます。

手順	操作内容
1	飛び先にしたい見出しや段落のブロックをクリックする
2	画面右側の「ブロック」タブを開く
3	「高度な設定」→「HTMLアンカー」の欄を探す
4	半角英数字だけで、任意の名前を入力する（例：contact-form）

このHTMLアンカーの名前が、いわゆるid（目印）になります。

日本語や記号、スペースなどを混ぜるとブラウザによって動作が不安定になることがあるので、半角英数字とハイフン・アンダースコアに絞って付けるのがおすすめです。

ステップ2：リンク元から#付きで飛ばす

飛び先にidを付けたら、次はリンク元の設定です。

テキストでもボタンでも画像でもかまいませんが、基本の考え方は同じです。

• リンクにしたいテキストやボタンを選択する
• ツールバーの「リンク」アイコンをクリックする
• URL入力欄に「#＋先ほど付けたid名」を入力する（例：#contact-form）
• Enterキーで確定する

ここで「#」を付け忘れてしまうと、ただの外部リンクだと勘違いされてしまい、ページ内リンクとして動きません。

また、id名は飛び先のHTMLアンカーに付けたものと完全に一致させる必要があります。

一文字でも違うと飛んでくれないので、個人的には「飛び先のidをコピーして、そのままリンク元にペーストする」方法を強くおすすめします。

ステップ3：別ページからアンカーリンクで飛ばす

同じページだけでなく、「別ページの特定の項目」に直接飛ばしたいこともよくあります。

料金ページの中の「よくある質問」見出しに飛ばしたり、サービスページの「お問い合わせフォーム」へ飛ばしたりするケースですね。

この場合、リンクの書き方は次のようになります。

種類	入力例のイメージ
同一ページ内	#section-price
別ページ（フルURL）	https://example.com/price/#section-price
別ページ（スラッグ＋#）	/price/#section-price

迷ったときは、アドレスバーに表示されているURLの末尾に「#id名」を足すイメージで書くと分かりやすいです。

パーマリンクの変更やスラッグの変更をしたときは、アンカー付きのリンクが古いURLのまま残っていないか、まとめてチェックしておくと安心です。

クラシックエディターやHTMLでのWordPressアンカーリンク設定

HTMLでリンク先（アンカー）を作る基本パターン

HTMLでは、飛び先となる位置に対してid属性を付けることでアンカーを作ります。

よく使うのは次の2パターンです。

• 見出しタグそのものにidを付ける
  例：<h2 id=”qa”>よくある質問</h2>
• 見出しの少し上に、空のaタグを置いてidを付ける
  例：<a id=”qa”></a><h2>よくある質問</h2>

後者のパターンは、固定ヘッダーがあるサイトで見出しがヘッダーの裏に隠れてしまう場合に便利です。

id名は、WordPressのHTMLアンカーと合わせ、半角英数字とハイフン・アンダースコア程度に統一しておくと混乱しにくくなります。

HTMLでリンク元を作る基本パターン

リンク元のHTMLも、とてもシンプルです。

• 同じページ内のリンク
  例：<a href=”#qa”>よくある質問を見る</a>
• 別ページの特定の位置へのリンク
  例：<a href=”https://example.com/faq/#qa”>よくある質問を見る</a>

クラシックエディターを使っている場合は、「テキスト」タブでこれらのタグを書き、ビジュアルタブとの行き来は最小限にしておくと余計なタグが入りにくいです。

WordPressアンカーリンク設定しても飛ばないときの原因とチェックリスト

よくあるミス1：ID名・リンク先の書き方の問題

一番多いのが、id名の付け方やリンクの書き方のちょっとしたミスです。

症状ごとに、ありがちな原因をまとめると次のようになります。

症状	主な原因	確認ポイント
クリックしてもまったく動かない	hrefに「#」が付いていない	hrefが「#id名」の形になっているか
全然違う位置で止まる	id名のスペルが一部違う	飛び先とリンク元のid名をコピペで一致させる
特定のリンクだけ飛ばない	id名にスペースや全角文字が混ざっている	id名に全角やスペースがないか
別ページへのリンクだけ挙動がおかしい	URLの末尾やwwwの有無が違う	本文のURLと実際のページURLを見比べる

私もよくやってしまうのが、「飛び先のidはcontact-formなのに、リンク元ではcontact-fromと書いてしまう」といったスペルミスです。

こういったミスを減らすには、飛び先のHTMLアンカーに入力したidをコピーして、そのままリンク元に貼り付けるのが一番手堅いです。

よくあるミス2：テーマ・プラグイン・固定ヘッダーの影響

「リンク自体は反応しているけれど、飛び先の位置が微妙にずれている」というケースもあります。

この場合は、テーマの仕様やプラグイン、固定ヘッダーなどが関係していることが多いです。

症状	考えられる原因	対処の方向性
見出しがヘッダーの裏に隠れてしまう	固定ヘッダーの高さ分だけ位置がずれている	見出しより少し上のブロックにアンカーを付ける
スクロールが途中で止まり数行ずれる	テーマのスムーススクロール設定	テーマ設定やJSを一時的にオフにして確認
目次のリンクだけ挙動がおかしい	目次プラグインとテーマのJS競合	プラグインを一度無効化して動作をチェック

固定ヘッダーがあるサイトでは、アンカーリンクで飛んだあとに見出しがヘッダーに隠れてしまい、「飛んでいないように見える」ことがよくあります。

その場合は、見出しの1つ上の段落や余白ブロックにHTMLアンカーを付けるか、CSSでscroll-margin-topを調整するなどの工夫でかなり改善できます。

よくあるミス3：キャッシュやスマホ表示のせいで飛ばないように見える

意外と見落としがちなのが、キャッシュやスマホ表示ならではの挙動です。

「修正したはずなのに変わっていない」と感じるときは、古いHTMLがキャッシュとして残っている可能性があります。

チェック項目	やることのイメージ
ブラウザキャッシュ	シークレットウィンドウや別ブラウザで開き直す
キャッシュプラグイン	一時的に停止して動作を確認する
スマホとPCの表示差	両方の画面でアンカー位置を実際に確認する
別端末からの確認	他の端末・回線からも同じ不具合が出るか見る

スマホ表示では、テーマによって途中に広告ブロックやおすすめ記事が自動挿入されることもあり、その分だけアンカー位置がずれて見えることもあります。

この場合は、「スマホではアンカーの位置を少し上にする」「重要な情報は見出しの直下にまとめる」といったレイアウト調整も一緒に検討してみてください。

WordPressアンカーリンク設定をもっと活かす運用のコツ

ID名の付け方ルールを決めておく

アンカーリンクをあちこちに作っていると、「このidは何のために付けたんだっけ？」と自分で分からなくなることがあります。

そんなときのために、あらかじめid名の付け方ルールを決めておくと、とても管理しやすくなります。

セクション内容	id名の例	ルールの例
よくある質問	faq-top, faq-bottom	英単語＋場所（top/bottomなど）
料金表	price-plan, price-faq	英単語＋用途
お問い合わせ	contact-form, contact-faq	英単語＋役割（form, faqなど）

サイト全体で同じようなルールにしておくと、別ページからアンカーリンクを張るときにも、id名を予測しやすくなります。

また、id名の重複も避けやすくなるので、思わぬ不具合の予防にもつながります。

目次やボタンと組み合わせて使う

アンカーリンクは、それだけを単体で使うよりも、目次やボタンとセットで使った方が効果を実感しやすいです。

• 記事の冒頭に「この記事で分かること」の目次を置き、各項目からアンカーリンクで飛ばす
• LPの途中に「詳しい料金を見る」「導入事例を見る」などのボタンを置き、下のセクションへ飛ばす
• 「まずはQ&Aを確認してから申し込む」といった流れを想定し、動線をアンカーでつないでおく

私の経験では、「全部を順番に読んでもらう」前提でページを作るより、「読者が知りたいパートにすぐ飛べるようにしておく」方が、結果的にじっくり読んでもらえることが多いと感じています。

SEO・ユーザビリティの観点からのちょっとしたポイント

アンカーリンク自体が直接SEOの順位を押し上げるわけではありませんが、うまく使うと間接的にはプラスになりやすいです。

• 知りたい情報にすぐたどり着けるので、読者のストレスが減る
• 必要な情報だけをピンポイントで見られるので、離脱が減りやすい
• 他のページへの内部リンクと組み合わせて、サイト全体の回遊をスムーズにできる

つまり、アンカーリンクは「検索エンジンのために入れる」というより、「読者のためのショートカット」として考えるのが良いと思います。

読者が迷わずページ内を移動できるようになれば、その結果として検索評価にもつながりやすくなります。

よくある質問

Q1. アンカーリンクを設定したのに、スマホだけ飛ばないのはなぜですか？

A. スマホ表示のときだけアンカーリンクがうまく飛ばない場合、レイアウトや広告、テーマのレスポンシブ設定が影響していることが多いです。

• スマホ表示のときだけ途中に広告ブロックが挿入されていて、見出しの位置がずれている
• スマホ専用ヘッダーの高さがPCと違い、その分だけ飛び先が隠れてしまっている
• スマホ専用の目次やナビゲーションが、アンカーリンクと競合している

こういった場合は、実際にスマホで表示しながら、どこにスクロールしているのかをよく観察してみてください。

必要であれば、アンカーを見出しの少し上に置いたり、スマホ表示時の余白を増やしたりして調整すると改善しやすいです。

Q2. 別ページへのアンカーリンク設定がどうしても飛ばないときは？

A. 別ページの特定の位置に飛ばしたいのに、どうしても飛ばないときは、次の3点を順番に確認してみてください。

• 飛び先のページで、見出しやaタグに正しいidが付いているか
• リンク元のhrefに、正しいURL＋#id名が書かれているか
• httpとhttps、wwwの有無、末尾のスラッシュなどが、実際のURLと一致しているか

ブラウザのアドレスバーに表示されているURLを丸ごとコピーし、その末尾に「#id名」を付け足すイメージでリンクを書くと、ミスが減らせます。

Q3. アンカーリンクをたくさん使っても、SEO的に問題ないですか？

A. 一般的な使い方をしている限り、アンカーリンクを多めに設定してもSEO上のペナルティになるようなことはまずありません。

むしろ、長い記事で目次から各見出しに飛べるようにしておくのは、ユーザビリティの面ではプラスに働きます。

ただし、ページの上部にリンクだけがずらっと並んでいて、中身の文章がほとんどないような構成は、読者にとっても分かりづらいので避けた方が良いです。

「読みやすくするための補助機能」として、自然な範囲でアンカーリンクを活用していくのがおすすめです。

まとめ：今日からできるWordPressアンカーリンク設定の一歩

この記事の内容を振り返っておきます

今日できる最初の一歩としては、自分のサイトの「よくある質問」や「お問い合わせ」セクションに分かりやすいidを付けて、そこへ飛ばすアンカーリンクを1つ作ってみてください。

一度この型に慣れてしまえば、どのページでも迷わずアンカーリンクを使いこなせるようになり、「リンクが飛ばない…」と頭を抱える時間をぐっと減らせるはずです。