WordPressでアンカーリンクを作成する手順 

リンクをクリックしたら、ページの途中という、思い通りの場所にたどり着いたことはありませんか？それがアンカーリンクの動作です。スクロールすることなく、重要な部分に直接ジャンプします。

WordPressで長いブログ記事やチュートリアルを作り始めたとき、私はすぐにアンカーリンクの必要性を感じた。読者は読み飛ばしたり、跳ね返したり、セクションを完全に見逃していた。アンカーリンク付きのシンプルな目次を追加することで、それが変わりました。ナビゲーションが簡単になり、Googleの検索結果に「ジャンプ先」リンクが表示されるようになった記事もある。

このガイドでは、WordPressでアンカーリンクを作成する方法を紹介します。アンカーリンクがどのように機能するのか、どこに追加すればいいのか、SEOとユーザー体験にどのように役立つのかを学びます。

目次

アンカーリンク方法の比較

ここでは、WordPressでアンカーリンクを追加するさまざまな方法を、エディタやセットアップに応じて簡単にご紹介します。

WordPressのアンカーリンクとは？

アンカーリンクは内部リンクの一種で、ユーザーが同じページの特定のセクションにジャンプできるようにするものです。ハッシュ（#）の後にIDを付けて、HTMLのその場所をターゲットにします。

上の例でわかるように、アンカーリンクをクリックすると、そのページのそのトピックに即座に移動する。

先に述べたように、アンカーリンクはWordPressのSEOを向上させることもできます。Googleは、検索結果にアンカーリンクを「ジャンプ先」リンクとして表示することが多く、読者は検索結果ページから特定のセクションに直接ジャンプすることができます。

また、Googleは1つのページから複数のリンクを「ジャンプ・トゥ」リンクとして表示することがあります。これらのリンクは、検索結果でのクリック率を高め、ウェブサイトのトラフィックを増やすことが証明されています。

では、WordPressでページの特定の部分にジャンプするリンクを作成するにはどうすればいいのでしょうか？調べてみよう！

WordPressのブロックエディターでアンカーリンクを追加するには？

WordPressのブロックエディターでアンカーリンクを作成するのはとても簡単です。アンカーリンクを機能させるために必要なことは2つだけです：

1. アンカーテキストの直前に#記号を付けてリンクを作成する。
2. ユーザーをジャンプさせたいテキストにID属性を追加する。

以下の説明に従って、自分で行う方法を学んでください。

ステップ1：アンカーリンクを作成する

最初のステップは、アンカーリンクを追加したいテキストをハイライトすることです。次に、WordPressのブロックエディターでリンクの挿入アイコンをクリックします。

アイコンをクリックするとリンクの挿入ポップアップが表示され、通常はページリンクを追加するか、リンクするページを検索します。

しかし、アンカーリンクの場合は、#記号とユーザーにジャンプしてもらいたいセクションのキーワードを入力しなければならない。

使用するキーワードはこうあるべきだ：

• リンク先のセクションに関連していること。
• 長すぎず、複雑すぎないこと
• アンカーテキストをより読みやすくするために大文字を使う。
• 単語を区切り、読みやすくするためにハイフンを入れる。

アンカーリンクのキーワードを入力したら、Enterをクリックしてリンクを作成します。作成したリンクはWordPressのエディタ内で見ることができますが、クリックしても何もできません。

それは、リンクをクリックしたときにブラウザが探す、アンカーリンクに関連するIDがないからだ。

この問題を解決するには、リンクしたいコンテンツ・エリアにID属性を追加します。

ステップ2：リンクされたテキストにID属性を追加する

WordPressのコンテンツエディターで、ユーザーがアンカーリンクをクリックしたときにジャンプさせたいコンテンツまでスクロールダウンします。必要なセクションは、多くの場合、見出しか新しい段落の始まりです。

次に、リンクしたいセクションを含むブロックをクリックし、ページの右側にあるブロック設定に移動します。

ブロック設定で、詳細タブを展開し、HTMLアンカーボックスにアンカーテキスト・リンクに使用したのと同じキーワードを入力します。唯一の違いは、先頭に#記号が必要ないことです。

記事を保存してプレビューすると、アンカーリンクの動きを見ることができます。クリックするだけで、リンク先のコンテンツにジャンプできます。

リンクしたいコンテンツが見出しではなく、通常の段落やテキストの一部である場合、プロセスは少し異なります。

そのような場合は、ブロックをクリックしてブロック設定を表示し、三点メニューをクリックしてさらにオプションを表示します。

そこから、HTMLとして編集オプションを選択すると、そのコンテンツのブロック全体のHTMLを編集することができます。

Now you need to find the HTML tag for the information you want to point to. For example, look for <p> if it’s a paragraph, or <table> if it is a table, and so on.

タグを見つけたら、以下の例のように、id属性にアンカーキーワードを追加する：

<p id="bali-hiking-adventures">

キーワードを追加した後、ブロックに無効または予期しないコンテンツが含まれていることを説明する通知が表示されることがあります。

そこで、「HTMLに変換」ボタンをクリックして変更を保存します。

クラシックWordPressエディタでアンカーリンクを作成できますか？

まだクラシックなWordPressエディタを使っている場合、アンカーリンクを追加する方法は少し異なります。以下の手順に従って、クラシックなWordPressビジュアルコンテンツエディタでアンカーリンクを作成する方法を学んでください。

ステップ1：アンカーリンクを作成する

まず、リンクしたいテキストをハイライトし、コンテンツエディターの上部にあるリンク挿入ボタンをクリックします。

次に、アンカーキーワードを#の接頭辞を付けて追加し、その後にリンクしたいテキストを続けます。

ステップ2：リンクされたテキストにID属性を追加する

次のステップは、アンカーリンクをクリックしたときにユーザーにジャンプしてもらいたいコンテンツのセクションをブラウザに示すことだ。

そのためには、クラシックなWordPressエディターでテキストモードに切り替え、表示したいセクションまでスクロールする。

Next, find the HTML tag you want your anchor link to target. For example, <h2>, <h3>, <p>, etc.

次に、アンカー・リンクのキーワードを#プレフィックスなしでID属性に追加します。これがその例です：

<h2 id="bali-hiking-adventures">

これで変更を保存し、コンテンツをプレビューしてアンカーリンクが機能していることを確認できます。

HTMLに手動でアンカーリンクを追加する方法

通常、WordPressのクラシックエディターでテキストモードを使ってコンテンツを書いている場合、HTMLでアンカーリンクを手動で作成する方法を紹介します。

First, create an anchor link with the # prefix using the <a href=” “> tag, similar to the example below:

<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>

Then scroll to the section of content you want to display when users click on your link. Usually, the section is an H2 or H3 tag, but it can also be another HTML element, like a simple paragraph <p> tag.

HTMLタグを見つけたら、次のようにID属性とアンカーテキストを#プレフィックスなしで追加する：

<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>

これで変更を保存し、コンテンツをプレビューしてアンカーリンクをテストすることができます。

WordPressプラグインでアンカーリンクを自動的に追加する方法

長文の記事を定期的に公開する場合、WordPressプラグインを使ってコンテンツ内のさまざまな見出しにアンカーリンクを自動的に追加し、目次を作成することで、時間を節約することができます。これにより、ユーザーは必要な情報を見つけやすくなり、各アンカーリンクを手動で作成する必要がなくなります。

これを行うには、Easy Table of Contentsプラグインをダウンロードし、WordPressウェブサイトにインストールして有効化します。プラグインをインストールするのに少し手助けが必要な場合は、WordPressプラグインのインストール方法をご覧ください。

このプラグインは、コンテンツ内の見出しを使用して、どのセクションにリンクするかを推測します。

プラグインをインストールして有効化したら、設定 " 目次に移動して設定を行います。

次に、アンカーリンクを追加したい投稿タイプのプラグインを有効にし、目次を表示したくない部分のチェックを外します。

自動挿入オプションをオンにすることもできます。これにより、プラグインは古いコンテンツも含め、選択されたすべてのコンテンツタイプの目次を自動的に作成します。

特定の記事の目次だけを自動的に作成したい場合は、このオプションのチェックを外したままにしてください。

次に、ページをスクロールして、目次を表示する場所とそのタイミングを選択します。

例えば、最初の見出しの前後に目次を表示したり、記事中に見出しが一定数ある場合に目次を表示したりすることができます。

さらにページを進むと、サイトのブランディングに合わせてテーマを選択したり、より詳細な設定を確認したりすることができます。

変更を保存]ボタンをクリックして、設定を保存することを忘れないでください。

自動挿入オプションを有効にすると、適切な見出し数の記事をプレビューして、目次の動作を確認することができます。

しかし、目次を手動で作成したい場合は、各記事を個別に編集する必要があります。

そのためには、コンテンツの編集画面に向かい、エディターの下にある目次タブまでスクロールダウンしてください。

そこから、「目次を挿入」チェックボックスをクリックし、アンカーリンクとして含める見出しを選択する。

これで変更を保存し、記事をプレビューすることができます。Easy Table of Contentsプラグインは自動的にアンカーリンクのリストを目次として表示します。

ランディングページにアンカーリンクを追加する

これまで、WordPressサイトにアンカーリンクを追加する方法をいくつか紹介してきたが、ランディングページを作成する場合はどうだろうか？

幸いなことに、最高のWordPressテーマとランディングページビルダーであるSeedProdでは、アンカーリンクを簡単に作成することができます。

そのドラッグ＆ドロップのビジュアルエディタでは、便利なアンカーリンクブロックを使って、ランディングページのある部分と別の部分をリンクさせることができます。SeedProdを使ってカスタムWordPressテーマを作成している場合、これからご紹介する方法と同じ方法で、テーマ内のどこにでもアンカーリンクを作成することができます。

アンカーリンク・ブロックをページのジャンプしたい部分にドラッグし、名前を入力するだけです。

その後、リンク元となるランディングページのテキストを選択し、アンカーリンク名の先頭にハッシュタグを追加して保存をクリックする。

これで、ページをプレビューしてリンクをテストすると、自動的に正しいセクションにジャンプします。

WordPressでランディングページを作成するためのステップバイステップガイドをご覧ください。

そうだ！

WordPressでアンカーリンクを作成する方法はお分かりいただけただろうか。この小さなリンクは小さなものに見えるかもしれませんが、大きな違いを生むことがあります。ユーザーエクスペリエンスの向上、ナビゲーションの高速化、さらにはGoogleの「ジャンプ先」リンクの追加まで。

サイトのユーザビリティとSEOを向上させる方法がもっと必要ですか？実用的なガイドをご覧ください：

• あなたのサイトを刷新する最高のWordPressプラグイン
• WordPressに必要な投票プラグイン
• WordPressウェブサイトのための最高のコードなしツール
• ベスト・ワードプレス・メンテナンスモード・プラグイン
• リードを増やす最高のWordPressバナープラグイン

お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。

ステイシー・コリン ライター

ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

略歴を見る

ワードプレス SEO コンテンツマーケティング デジタルマーケティング SaaS コピーライティング ウェブデザイン