ワードプレスのアンカーリンク設定方法｜作り方から飛ばない原因・解決策まで解説

はじめに

ワードプレスで記事や固定ページを作成していると、「ページ内の特定の見出しへ直接移動させたい」「ボタンをクリックしたらお問い合わせフォームまでスクロールさせたい」と感じる場面があります。そんなときに便利なのが、アンカーリンクです。

アンカーリンクを設定すると、読者はページ内の目的の場所へすぐに移動できます。長い記事の目次、ランディングページの申し込みボタン、料金表への誘導、お問い合わせフォームへのリンクなど、さまざまな場面で活用できます。

一方で、ワードプレスのアンカーリンクは設定自体は簡単でも、「クリックしても飛ばない」「位置がずれる」「スマホだけ動かない」といったトラブルが起こることもあります。原因の多くは、アンカー名の不一致、#の付け忘れ、固定ヘッダーによる表示位置のずれ、テーマやプラグインとの干渉です。

この記事では、ワードプレスでアンカーリンクを設定する基本から、ブロックエディター・クラシックエディターでの作り方、別ページの指定位置へ飛ばす方法、アンカーリンクが飛ばない原因と解決策までわかりやすく解説します。

1. ワードプレスのアンカーリンクとは

1-1. アンカーリンクとはページ内の指定位置へ移動できるリンクのこと

アンカーリンクとは、同じページ内や別ページ内の特定の位置へ移動できるリンクのことです。通常のリンクがページそのものへ移動するのに対し、アンカーリンクはページ内の見出しやセクションなど、指定した場所まで直接移動できます。

たとえば、記事の冒頭にある目次で「アンカーリンクが飛ばない原因」をクリックすると、その見出しまで自動でスクロールする仕組みがアンカーリンクです。

ワードプレスでは、見出しやブロックに「HTMLアンカー」または「id属性」を設定し、リンク元に「#アンカー名」を指定することでアンカーリンクを作成できます。

1-2. 通常のリンク・内部リンク・目次リンクとの違い

通常のリンクは、別のページや外部サイトへ移動するためのリンクです。たとえば、別の記事や公式サイトへ移動するリンクが該当します。

内部リンクは、同じサイト内の別ページへ移動するリンクです。SEO対策でも重要で、関連記事やサービスページへ誘導するときによく使われます。

一方、アンカーリンクはページ内の特定位置へ移動するリンクです。同じページ内だけでなく、別ページの特定見出しへ移動させることもできます。

目次リンクは、アンカーリンクを利用した代表的な使い方です。記事内の見出しにアンカーを設定し、目次から各見出しへ移動できるようにしています。

1-3. アンカーリンクを使うメリット

アンカーリンクを使う大きなメリットは、読者が必要な情報へすぐにたどり着けることです。特に長文記事や情報量の多いページでは、読者が最初から最後まで順番に読むとは限りません。

知りたい項目だけをすぐ確認できるようにしておくと、ページの使いやすさが向上します。結果として、離脱を防ぎ、記事を最後まで読んでもらいやすくなります。

また、ランディングページでは「料金を見る」「申し込む」「お問い合わせする」などのボタンにアンカーリンクを設定することで、ユーザーの行動をスムーズに促せます。

1-4. アンカーリンクが役立つ具体的な使用例

アンカーリンクは、次のような場面で役立ちます。

長いブログ記事の目次から各見出しへ移動させる場合、読者は知りたい情報をすぐに確認できます。

ランディングページのボタンから申し込みフォームへ移動させる場合、ユーザーは迷わず行動できます。

会社サイトのトップページで、メニューから「サービス」「料金」「事例」「お問い合わせ」などの各セクションへ移動させる場合にも便利です。

また、FAQページで質問をクリックすると回答部分へ移動する構成にもアンカーリンクは向いています。

2. ワードプレスでアンカーリンクを作る前に知っておく基本ルール

2-1. リンク先にはHTMLアンカーまたはidを設定する

アンカーリンクを作るには、まず移動先となる場所に目印を設定する必要があります。ワードプレスのブロックエディターでは、この目印を「HTMLアンカー」として設定できます。

たとえば、見出しブロックに section01 というHTMLアンカーを設定すると、その見出しがリンク先になります。

HTMLで直接記述する場合は、次のようにid属性を使います。

HTML
<h2 id="section01">サービス内容</h2>

この id="section01" が、アンカーリンクの移動先になります。

2-2. リンク元には「#アンカー名」を指定する

リンク元には、移動先に設定したアンカー名の前に # を付けて指定します。

たとえば、リンク先に section01 というHTMLアンカーを設定した場合、リンク元には次のように設定します。

HTML
<a href="#section01">サービス内容を見る</a>

ワードプレスのリンク設定画面でも、URL入力欄に #section01 と入力すれば、同じページ内の指定位置へ移動するアンカーリンクになります。

2-3. アンカー名は半角英数字・ハイフン・アンダースコアで設定する

アンカー名は、半角英数字を使うのが基本です。必要に応じて、ハイフンやアンダースコアを使うと管理しやすくなります。

おすすめの例は次のような形式です。

service
price
contact
section01
faq-01
plan_basic

日本語やスペース、全角記号を使うと、テーマやブラウザ、プラグインの影響で正常に動作しない場合があります。ワードプレスのアンカーリンクが飛ばない原因にもなりやすいため、アンカー名はできるだけシンプルに設定しましょう。

2-4. 同じページ内リンクと別ページへのアンカーリンクの書き方の違い

同じページ内のアンカーリンクは、#アンカー名 だけで設定できます。

#contact

一方、別ページの特定位置へ移動させたい場合は、ページURLの末尾に #アンカー名 を付けます。

https://example.com/service/#contact

同じページ内であれば #contact、別ページであれば ページURL#contact と覚えておくとわかりやすいです。

2-5. アンカー名を重複させない

同じページ内で同じアンカー名を複数使うと、ブラウザがどの位置へ移動すればよいか判断しづらくなります。その結果、意図しない場所へ移動したり、アンカーリンクが正しく動かなかったりすることがあります。

たとえば、複数の見出しに id="contact" を設定するのは避けましょう。

1ページ内では、1つのアンカー名につき1か所だけ設定するのが基本です。

3. ワードプレスのブロックエディターでアンカーリンクを設定する方法

3-1. リンク先の見出しやブロックにHTMLアンカーを設定する

ワードプレスのブロックエディターでは、見出しや段落、グループ、カラムなどのブロックにHTMLアンカーを設定できます。

まず、リンク先にしたい見出しやブロックをクリックします。次に、右側の設定パネルを開き、「高度な設定」を表示します。その中にある「HTMLアンカー」の欄に、任意のアンカー名を入力します。

たとえば、お問い合わせフォームの見出しに移動させたい場合は、HTMLアンカーに contact と入力します。

このとき、#contact ではなく contact と入力する点に注意してください。リンク先のHTMLアンカーには # を付けません。

3-2. リンク元のテキストにアンカーリンクを設定する

次に、リンク元となるテキストを選択します。たとえば、「お問い合わせはこちら」というテキストを選び、リンクボタンをクリックします。

URL入力欄に、先ほど設定したアンカー名の前に # を付けて入力します。

#contact

設定を保存すれば、テキストをクリックしたときに contact を設定した見出しやブロックへ移動できるようになります。

3-3. ボタンブロックにアンカーリンクを設定する

ボタンブロックにもアンカーリンクを設定できます。ランディングページやサービスページでは、ボタンから料金表や申し込みフォームへ移動させる使い方がよくあります。

まず、ボタンブロックを追加し、ボタンのテキストを入力します。たとえば「料金を見る」「無料相談する」「お問い合わせへ進む」などです。

次に、ボタンのリンク設定欄にアンカーリンクを入力します。

#price
#contact
#form

これで、ボタンをクリックしたユーザーをページ内の指定セクションへ誘導できます。

3-4. 画像やバナーにアンカーリンクを設定する

画像やバナーにもアンカーリンクを設定できます。キャンペーンバナーをクリックしたら申し込みフォームへ移動させる、といった使い方が可能です。

画像ブロックを選択し、リンク設定で「カスタムURL」を選びます。URL欄に #contact などのアンカーリンクを入力します。

画像を使った誘導は目立ちやすい反面、クリック後にどこへ移動するのかがわかりにくい場合があります。画像内のテキストや前後の説明で、移動先が伝わるようにしておきましょう。

3-5. 設定後に正しく移動するか確認する

アンカーリンクを設定したら、必ずプレビューまたは公開ページで動作確認を行います。

編集画面上では正しく動かない場合があるため、実際の表示画面で確認することが大切です。

確認するポイントは、リンクをクリックして目的の位置へ移動するか、固定ヘッダーで見出しが隠れないか、スマホでも正しく動くかの3点です。

特に固定ヘッダーを使っているサイトでは、移動先の見出しがヘッダーの下に隠れてしまうことがあります。その場合は、後述する scroll-margin-top などで調整します。

4. ワードプレスのクラシックエディター・HTMLでアンカーリンクを作る方法

4-1. HTMLのid属性を使ってリンク先を作る

クラシックエディターやHTML編集では、リンク先にid属性を設定します。

たとえば、「料金プラン」という見出しへ移動させたい場合は、次のように記述します。

HTML
<h2 id="price">料金プラン</h2>

この price がアンカー名になります。

段落やdivタグに設定することもできます。

HTML
<div id="contact">
  <h2>お問い合わせ</h2>
  <p>お問い合わせフォームはこちらです。</p>
</div>

このように、セクション全体をリンク先にしたい場合は、見出しではなくdivタグにidを設定しても問題ありません。

4-2. aタグのhref属性にアンカーリンクを設定する

リンク元には、aタグのhref属性を使います。

HTML
<a href="#price">料金プランを見る</a>

リンク先のidが price の場合、リンク元は #price になります。

お問い合わせフォームへ移動するリンクなら、次のように記述します。

HTML
<a href="#contact">お問い合わせはこちら</a>

リンク先には id="contact"、リンク元には href="#contact" を設定するのが基本です。

4-3. カスタムHTMLブロックでアンカーリンクを設定する

ブロックエディターを使っている場合でも、カスタムHTMLブロックを使えばHTMLでアンカーリンクを設定できます。

たとえば、次のように記述できます。

HTML
<p><a href="#service">サービス内容へ移動する</a></p>

<h2 id="service">サービス内容</h2>
<p>ここにサービス内容の説明を入力します。</p>

細かくHTMLを管理したい場合や、独自のレイアウトを組みたい場合にはカスタムHTMLブロックが便利です。

ただし、通常の見出しやボタンにアンカーリンクを設定するだけであれば、ブロックエディターのHTMLアンカー機能を使う方が簡単です。

4-4. HTML編集時にやりがちな記述ミス

HTMLでアンカーリンクを設定するときによくあるミスは、id名とhref名が一致していないことです。

たとえば、リンク先が次のようになっているとします。

HTML
<h2 id="contact">お問い合わせ</h2>

この場合、リンク元は次のようにする必要があります。

HTML
<a href="#contact">お問い合わせへ</a>

しかし、次のように書くと正しく動きません。

HTML
<a href="#contacts">お問い合わせへ</a>

contact と contacts のように、1文字違うだけでもアンカーリンクは飛ばなくなります。

また、リンク先のidに # を付けてしまうミスもあります。

HTML
<h2 id="#contact">お問い合わせ</h2>

これは誤りです。idには # を付けず、リンク元のhrefだけに # を付けます。

4-5. コピペで使えるアンカーリンクの記述例

同じページ内の見出しへ移動させる基本形は次の通りです。

HTML
<a href="#about">詳しい説明を見る</a>

<h2 id="about">詳しい説明</h2>
<p>ここに詳しい説明を入力します。</p>

お問い合わせフォームへ移動させる場合は、次のように使えます。

HTML
<a href="#contact">お問い合わせはこちら</a>

<section id="contact">
  <h2>お問い合わせ</h2>
  <p>以下のフォームからお問い合わせください。</p>
</section>

料金表へ移動させる場合は、次のように記述できます。

HTML
<a href="#price">料金表を見る</a>

<h2 id="price">料金表</h2>
<table>
  <tr>
    <th>プラン</th>
    <th>料金</th>
  </tr>
  <tr>
    <td>基本プラン</td>
    <td>月額10,000円</td>
  </tr>
</table>

5. 別ページの指定位置へアンカーリンクで飛ばす方法

5-1. 別ページへのアンカーリンクの基本形式

別ページの指定位置へアンカーリンクで飛ばす場合は、ページURLの末尾に #アンカー名 を付けます。

基本形式は次の通りです。

https://example.com/page/#anchor

たとえば、サービスページ内のお問い合わせセクションに contact というHTMLアンカーを設定している場合、リンクは次のようになります。

https://example.com/service/#contact

同じページ内では #contact だけでよいですが、別ページへ移動する場合はページURLも含める必要があります。

5-2. 投稿・固定ページの特定見出しへ飛ばす方法

投稿や固定ページの特定見出しへ飛ばすには、まず移動先ページの見出しにHTMLアンカーを設定します。

たとえば、固定ページ「サービス」の中にある「料金プラン」という見出しに price と設定します。

次に、別の記事やメニュー、ボタンのリンク先に次のようなURLを入力します。

https://example.com/service/#price

これで、リンクをクリックするとサービスページが開き、さらに料金プランの位置まで移動します。

5-3. グローバルメニューからページ内の指定位置へ飛ばす方法

グローバルメニューからページ内の指定位置へ移動させたい場合は、ワードプレスのメニュー設定でカスタムリンクを使います。

管理画面から「外観」→「メニュー」を開きます。ブロックテーマの場合は「外観」→「エディター」からナビゲーションを編集します。

カスタムリンクのURLに、移動先のURLとアンカー名を入力します。

https://example.com/#service
https://example.com/#price
https://example.com/#contact

トップページ内のセクションへ移動させたい場合は、トップページのURLに #アンカー名 を付けます。

メニュー名には「サービス」「料金」「お問い合わせ」など、移動先がわかる文言を設定しましょう。

5-4. トップページのセクションへアンカーリンクを設定する方法

トップページの各セクションにアンカーリンクを設定すると、1ページ完結型のサイトやランディングページで便利です。

たとえば、トップページに次のようなセクションがあるとします。

サービス紹介
料金プラン
導入事例
お問い合わせ

それぞれの見出しやグループブロックに、次のようなHTMLアンカーを設定します。

service
price
case
contact

メニューやボタンには、次のようにリンクを設定します。

#service
#price
#case
#contact

ただし、別ページからトップページ内の指定位置へ移動させる場合は、トップページのURLを含めます。

https://example.com/#contact

5-5. URLの末尾に「#アンカー名」を付けるときの注意点

URLの末尾に #アンカー名 を付けるときは、スラッシュの有無やアンカー名のスペルに注意しましょう。

基本的には、ページURLの後に #アンカー名 を付けます。

https://example.com/service/#contact

パーマリンク設定やサイト構造によっては、次のような形式でも動作します。

https://example.com/service#contact

ただし、ワードプレスでは末尾にスラッシュが付くURL構造が多いため、実際のページURLをコピーしてから、その末尾に #アンカー名 を付けるのが安全です。

また、アンカー名の前後に余計なスペースが入ると正しく動作しない場合があります。

6. ワードプレスでアンカーリンクが飛ばない原因と解決策

6-1. HTMLアンカー名とリンク先の文字列が一致していない

ワードプレスでアンカーリンクが飛ばない原因として最も多いのが、HTMLアンカー名とリンク元の文字列が一致していないケースです。

リンク先に contact と設定しているのに、リンク元が #contacts になっていると移動できません。

解決策は、リンク先とリンク元の文字列を完全に一致させることです。大文字と小文字の違い、ハイフンとアンダースコアの違い、単数形と複数形の違いにも注意しましょう。

6-2. リンク元に「#」を付け忘れている

リンク元には必ず # を付けます。

リンク先のHTMLアンカーが contact の場合、リンク元は次のようにします。

#contact

contact だけでは、アンカーリンクとして認識されない場合があります。

反対に、リンク先のHTMLアンカーには # を付けません。リンク先は contact、リンク元は #contact と覚えておきましょう。

6-3. アンカー名に日本語・スペース・記号を使っている

アンカー名に日本語、スペース、全角記号、特殊記号を使うと、環境によってうまく動かない場合があります。

たとえば、次のようなアンカー名は避けた方が安全です。

お問い合わせ
料金 プラン
price!
section/01

おすすめは、半角英数字とハイフン、アンダースコアを使う形式です。

contact
price-plan
section_01

トラブルを避けるためにも、アンカー名はシンプルに設定しましょう。

6-4. 同じアンカー名を複数箇所で使っている

同じページ内に同じアンカー名が複数あると、クリック時に意図しない場所へ移動することがあります。

たとえば、ページ内に id="contact" が2か所ある場合、ブラウザは最初に見つけた要素へ移動することが多く、期待した位置に飛ばない原因になります。

解決策は、アンカー名を1ページ内で重複させないことです。

複数の似たセクションがある場合は、次のように区別しましょう。

contact-top
contact-bottom
faq-contact

6-5. 固定ヘッダーに隠れて位置がずれる

アンカーリンク自体は動いているのに、移動先の見出しが固定ヘッダーに隠れてしまうことがあります。

これは、画面上部に固定表示されるヘッダーがあるサイトでよく起こります。ブラウザはアンカー位置を画面の一番上に合わせて表示するため、固定ヘッダーの高さ分だけ見出しが隠れてしまいます。

この場合は、CSSで表示位置を調整します。代表的な方法は scroll-margin-top を使うことです。

CSS
h2, h3 {
  scroll-margin-top: 100px;
}

固定ヘッダーの高さに合わせて、数値を調整しましょう。

6-6. キャッシュが残っていて変更が反映されていない

アンカーリンクを修正したのに反映されない場合、キャッシュが原因になっていることがあります。

ワードプレスでは、キャッシュプラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNキャッシュなどが影響する場合があります。

解決策として、まずワードプレスのキャッシュプラグインを削除またはクリアします。次に、ブラウザのキャッシュを削除するか、シークレットウィンドウで確認します。

サーバーやCDNを利用している場合は、そちらのキャッシュもクリアしましょう。

6-7. テーマやプラグインのJavaScriptが干渉している

テーマやプラグインによっては、スムーススクロールやメニュー制御のJavaScriptがアンカーリンクの動作に影響することがあります。

特に、ページ内スクロールを制御するプラグイン、目次プラグイン、ポップアッププラグイン、表示アニメーション系のプラグインが原因になることがあります。

確認するには、一時的にプラグインを停止し、アンカーリンクが正常に動くか確認します。プラグインを停止して動作する場合は、そのプラグインの設定を見直す必要があります。

テーマ側のスムーススクロール機能が原因の場合は、テーマ設定で無効化できるか確認しましょう。

6-8. 目次プラグインの自動生成IDと重複している

目次プラグインを使っている場合、見出しに自動でidが付与されることがあります。手動で設定したHTMLアンカーと、プラグインが生成したidが重複すると、アンカーリンクが意図通りに動かない場合があります。

対策として、目次プラグインの設定を確認し、自動生成IDのルールを把握しましょう。

手動でアンカーリンクを設定する場合は、プラグインが生成しそうな名前を避けるのも有効です。

たとえば、見出し名そのものではなく、manual-contact や lp-contact のように独自の接頭語を付けると重複を防ぎやすくなります。

6-9. 別ページリンクのURLが間違っている

別ページの指定位置へ飛ばない場合は、URLそのものが間違っている可能性があります。

よくあるミスは、ページURLの入力間違い、パーマリンク変更後の古いURL、末尾のスラッシュの扱い、アンカー名のスペルミスです。

実際に移動先ページを開き、ブラウザのアドレスバーからURLをコピーして、その末尾に #アンカー名 を付けるとミスを減らせます。

また、非公開ページや下書きページのアンカーリンクは、ログインしていないユーザーには正しく表示されない場合があります。公開状態も確認しましょう。

6-10. スマホだけアンカーリンクが飛ばない場合の確認点

パソコンでは動くのにスマホだけアンカーリンクが飛ばない場合、モバイルメニューや固定ヘッダー、JavaScriptの影響が考えられます。

スマホでは、ハンバーガーメニューを閉じる処理とアンカーリンクのスクロール処理が干渉することがあります。その結果、クリックしても移動しなかったり、移動位置がずれたりします。

また、パソコンとスマホでヘッダーの高さが異なる場合、スマホだけ見出しが隠れることもあります。

確認するポイントは、スマホ実機でクリックできるか、メニューが閉じた後に移動するか、固定ヘッダーに隠れていないか、モバイル表示用のCSSが影響していないかです。

7. アンカーリンクの位置ずれを直す方法

7-1. 固定ヘッダーで見出しが隠れる原因

アンカーリンクの位置ずれで多いのが、固定ヘッダーによって見出しが隠れるケースです。

固定ヘッダーは、ページをスクロールしても画面上部に表示され続けます。アンカーリンクをクリックすると、ブラウザはリンク先の要素を画面上部に合わせて表示しますが、その上に固定ヘッダーが重なるため、見出しが隠れてしまいます。

この状態では、ユーザーから見ると「少し上に飛びすぎている」「見出しが見えない」と感じられます。

7-2. CSSのscroll-margin-topで表示位置を調整する

アンカーリンクの位置ずれを直すには、CSSの scroll-margin-top が便利です。

たとえば、固定ヘッダーの高さが80px程度であれば、次のように設定します。

CSS
h2, h3, h4 {
  scroll-margin-top: 100px;
}

ヘッダーの高さより少し大きめに設定すると、見出しの上に余白ができて読みやすくなります。

特定のアンカーだけに適用したい場合は、idを指定することもできます。

CSS
#contact {
  scroll-margin-top: 120px;
}

ワードプレスでは、「外観」→「カスタマイズ」→「追加CSS」から設定できるテーマが多いです。ブロックテーマの場合は、サイトエディターやテーマの追加CSS機能を確認しましょう。

7-3. テーマ設定や追加CSSで余白を調整する

テーマによっては、固定ヘッダーの高さやスクロール位置を設定できる場合があります。

まずはテーマのカスタマイズ画面やテーマオプションで、ヘッダー固定、スムーススクロール、アンカーリンク位置調整に関する項目がないか確認しましょう。

設定項目がない場合は、追加CSSで調整します。

CSS
[id] {
  scroll-margin-top: 100px;
}

このように指定すると、idが付いた要素全体に余白調整が適用されます。

ただし、すべてのid要素に適用されるため、サイト全体への影響を確認しながら使いましょう。

7-4. スムーススクロール使用時の注意点

スムーススクロールとは、アンカーリンクをクリックしたときに目的の位置へなめらかにスクロールする動きのことです。

見た目は自然ですが、テーマやプラグインのJavaScriptで制御されている場合、位置ずれや動作不良の原因になることがあります。

特に、固定ヘッダーの高さを考慮していないスムーススクロール処理では、移動先がヘッダーに隠れることがあります。

スムーススクロールを使う場合は、パソコンとスマホの両方で動作確認を行いましょう。問題がある場合は、テーマやプラグインのスムーススクロール機能を停止するか、CSSで位置調整を行います。

7-5. パソコンとスマホで表示位置を確認する

アンカーリンクの表示位置は、パソコンとスマホで異なる場合があります。

理由は、ヘッダーの高さ、メニューの表示形式、画面幅、余白設定が端末によって変わるためです。

パソコンでは問題なくても、スマホでは見出しが隠れたり、ボタンを押しても移動がわかりにくかったりすることがあります。

公開前には、パソコン、スマホ、タブレットで確認しましょう。特に、グローバルメニューやランディングページのボタンにアンカーリンクを使っている場合は、実際のユーザー導線に沿ってテストすることが大切です。

8. 目次・メニュー・ボタンにアンカーリンクを活用する方法

8-1. 記事内目次としてアンカーリンクを使う

アンカーリンクの代表的な使い方が、記事内目次です。

記事の冒頭に目次を設置し、各見出しへアンカーリンクを設定すると、読者は読みたい項目へすぐに移動できます。

たとえば、次のような目次を作れます。

HTML
<ul>
  <li><a href="#about">アンカーリンクとは</a></li>
  <li><a href="#setting">設定方法</a></li>
  <li><a href="#trouble">飛ばない原因</a></li>
</ul>

それぞれの見出しには、対応するidを設定します。

HTML
<h2 id="about">アンカーリンクとは</h2>
<h2 id="setting">設定方法</h2>
<h2 id="trouble">飛ばない原因</h2>

長い記事ほど、目次のアンカーリンクは読者にとって便利です。

8-2. ランディングページのボタンにアンカーリンクを設定する

ランディングページでは、ボタンにアンカーリンクを設定することで、申し込みフォームや料金表へスムーズに誘導できます。

たとえば、ページ上部のファーストビューに「無料相談する」というボタンを設置し、ページ下部のお問い合わせフォームへ移動させる場合は、フォーム部分に contact というアンカーを設定します。

ボタンのリンク先には次のように入力します。

#contact

これにより、ユーザーはページを探し回ることなく、すぐに行動できます。

8-3. お問い合わせフォームへ移動するリンクを作る

お問い合わせフォームへのアンカーリンクは、企業サイトやサービスサイトでよく使われます。

フォームの見出しやフォーム全体を囲むブロックに、contact や form などのHTMLアンカーを設定します。

リンク元には、次のような文言を使うとわかりやすくなります。

お問い合わせフォームへ進む
無料相談はこちら
資料請求する
申し込みフォームへ移動する

単に「こちら」とするよりも、クリック後に何が起こるのかがわかる文言にする方が親切です。

8-4. メニューから料金表・サービス紹介へ移動させる

トップページやランディングページでは、メニューから各セクションへ移動できるようにすると便利です。

たとえば、トップページに「サービス紹介」「料金表」「導入事例」「お問い合わせ」のセクションがある場合、それぞれにアンカーを設定します。

service
price
case
contact

メニューには、次のようなリンクを設定します。

#service
#price
#case
#contact

別ページからトップページ内の指定位置へ移動させる場合は、次のようにURLを含めます。

https://example.com/#price

ユーザーが知りたい情報へすぐアクセスできるため、サイト全体の使いやすさが向上します。

8-5. プラグインで自動目次を作る方法

ワードプレスでは、目次プラグインを使うことで、見出しをもとに自動で目次リンクを作成できます。

手動でHTMLアンカーを設定しなくても、プラグインが見出しにidを付与し、目次から各見出しへ移動できるようにしてくれます。

記事数が多いサイトや、毎回手動で目次を作るのが大変な場合には便利です。

ただし、目次プラグインを使う場合は、自動生成されるidと手動で設定したアンカー名が重複しないように注意しましょう。また、テーマとの相性によっては位置ずれが起こることもあるため、導入後は必ず動作確認を行います。

9. アンカーリンクを使うときのSEO・ユーザビリティ上の注意点

9-1. アンカーリンクは読者が情報を探しやすくするために使う

アンカーリンクは、読者の利便性を高めるために使うものです。

検索順位を上げるために無理に設置するのではなく、読者が必要な情報へすぐ移動できるようにすることが重要です。

特に、長文記事、比較記事、手順解説、FAQ、サービス紹介ページでは、アンカーリンクがあることでページの使いやすさが大きく向上します。

読者が迷わず目的の情報へたどり着ける構成にすることが、結果的にSEOにもよい影響を与えやすくなります。

9-2. リンクテキストは移動先の内容がわかる文言にする

アンカーリンクのリンクテキストは、移動先の内容がわかる文言にしましょう。

たとえば、次のような表現はわかりやすいです。

アンカーリンクの設定方法を見る
飛ばない原因と解決策へ移動する
料金プランを確認する
お問い合わせフォームへ進む

反対に、「こちら」「詳しくはこちら」だけでは、移動先がわかりにくい場合があります。

読者がクリックする前に、どこへ移動するのか判断できる文言にすることが大切です。

9-3. 重要な見出しへ適切に誘導する

アンカーリンクは、重要な見出しやユーザーの行動につながるセクションへ適切に設置しましょう。

たとえば、ブログ記事であれば、読者が特に知りたい「設定方法」「原因」「解決策」「よくある質問」などへのリンクが有効です。

サービスページであれば、「特徴」「料金」「事例」「お問い合わせ」などが重要な移動先になります。

すべての見出しにリンクを設置する必要はありません。読者が移動したいと思う場所を考えて、必要な箇所に絞って設置しましょう。

9-4. アンカーリンクの設置しすぎに注意する

アンカーリンクは便利ですが、設置しすぎるとページが見づらくなることがあります。

本文中のあちこちにリンクがあると、読者がどこをクリックすればよいのか迷ってしまいます。また、リンクの見た目が多すぎると、重要なリンクが埋もれてしまうこともあります。

目次、重要なボタン、問い合わせ導線など、目的が明確な場所に設置するのがおすすめです。

リンクを増やすことよりも、読者の行動をスムーズにすることを意識しましょう。

9-5. クリック後の移動先がわかりやすい構成にする

アンカーリンクをクリックした後、移動先の内容がすぐに理解できる構成にすることも大切です。

見出しがわかりにくかったり、クリック後にどこへ移動したのかわからなかったりすると、読者は混乱します。

移動先には、明確な見出しを置き、必要に応じて十分な余白を確保しましょう。

また、固定ヘッダーで見出しが隠れないように調整することも、ユーザビリティの面で重要です。

10. ワードプレスのアンカーリンクに関するよくある質問

10-1. アンカーリンクはSEOに効果がありますか？

アンカーリンクを設置しただけで検索順位が直接上がるわけではありません。

ただし、読者が必要な情報へ移動しやすくなり、ページの使いやすさが向上することはSEOの観点でも重要です。長い記事に目次やアンカーリンクを設置すると、読者が知りたい情報を探しやすくなります。

結果として、滞在時間や回遊性、満足度の向上につながる可能性があります。

10-2. アンカー名に日本語を使っても大丈夫ですか？

日本語のアンカー名でも動作する場合はありますが、基本的にはおすすめしません。

ブラウザやテーマ、プラグイン、URLエンコードの影響で、正常に動かない場合があるためです。

トラブルを避けるなら、アンカー名は半角英数字、ハイフン、アンダースコアで設定しましょう。

contact
price-plan
faq_01

このような形式にしておくと管理しやすく、エラーも起こりにくくなります。

10-3. アンカーリンクを別タブで開く必要はありますか？

同じページ内のアンカーリンクは、通常は別タブで開く必要はありません。

アンカーリンクはページ内を移動するためのものなので、同じタブ内で移動する方が自然です。

別ページの指定位置へ移動する場合も、基本的には同じタブで問題ありません。ただし、外部サイトへ移動するリンクや、ユーザーに現在のページを残しておいてほしい場合は、別タブを検討してもよいでしょう。

10-4. アンカーリンクと目次リンクは同じですか？

目次リンクは、アンカーリンクを使ったリンクの一種です。

アンカーリンクは、ページ内や別ページの指定位置へ移動する仕組み全般を指します。一方、目次リンクは、記事の見出しへ移動するために目次内に設置されたアンカーリンクです。

つまり、目次リンクはアンカーリンクの代表的な活用例と考えるとわかりやすいです。

10-5. プラグインなしでもアンカーリンクは作れますか？

はい、プラグインなしでもアンカーリンクは作れます。

ワードプレスのブロックエディターにはHTMLアンカーを設定する機能があります。見出しやブロックにHTMLアンカーを設定し、リンク元に #アンカー名 を指定すれば、簡単にページ内リンクを作成できます。

クラシックエディターやHTML編集でも、id属性とaタグを使えばアンカーリンクを作成できます。

10-6. アンカーリンクが一部のブラウザだけで飛ばないのはなぜですか？

一部のブラウザだけでアンカーリンクが飛ばない場合、HTMLの記述ミス、JavaScriptの干渉、キャッシュ、ブラウザ固有の挙動などが原因として考えられます。

まずは、アンカー名が半角英数字で設定されているか、リンク元とリンク先が一致しているかを確認しましょう。

次に、キャッシュを削除し、別の端末やシークレットウィンドウで確認します。

それでも改善しない場合は、テーマやプラグインのJavaScriptが原因の可能性があります。スムーススクロールや目次プラグインを一時的に停止し、動作を確認してみましょう。

まとめ

ワードプレスのアンカーリンクは、ページ内の指定位置へ読者をスムーズに移動させるための便利な機能です。長いブログ記事の目次、ランディングページのボタン、お問い合わせフォームへの誘導、トップページの各セクションへのメニューリンクなど、さまざまな場面で活用できます。

基本的な作り方は、リンク先にHTMLアンカーまたはidを設定し、リンク元に #アンカー名 を指定するだけです。ブロックエディターでは「高度な設定」にあるHTMLアンカーを使えば、初心者でも簡単に設定できます。

アンカーリンクが飛ばない場合は、アンカー名の不一致、#の付け忘れ、日本語やスペースの使用、アンカー名の重複、キャッシュ、テーマやプラグインの干渉などを確認しましょう。

また、固定ヘッダーで移動先の見出しが隠れる場合は、CSSの scroll-margin-top を使って表示位置を調整すると改善できます。

アンカーリンクは、読者が必要な情報を探しやすくするための機能です。設置しすぎに注意しながら、目次、メニュー、ボタン、フォーム誘導などに適切に活用し、使いやすいワードプレスサイトを作りましょう。