リンクをクリックして、ページの途中に正確に着地した経験はありませんか？それがアンカーリンクの仕組みです。スクロールせずに、重要な部分に直接ジャンプできます。
WordPressで長いブログ記事やチュートリアルを作成し始めたとき、アンカーリンクの必要性をすぐに実感しました。読者は内容を飛ばし読みしたり、すぐに離脱したり、セクションを完全にスキップしたりしていました。アンカーリンク付きの簡単な目次を追加したことで、状況は変わりました。ナビゲーションが容易になり、一部の記事ではGoogle検索結果に「ジャンプ先」リンクが表示されるようになりました。
このガイドでは、WordPressでアンカーリンクを作成する方法を詳しく説明します。アンカーリンクの仕組み、追加場所、SEOやユーザーエクスペリエンスにどのように役立つかを学びます。
目次
アンカーリンクの方法比較
ここでは、エディターや設定に応じて、WordPressでアンカーリンクを追加するさまざまな方法を簡単に紹介します。
| 方法 | 最適 | コードが必要？ | プラグインが必要？ |
|---|---|---|---|
| ブロックエディター | 最新のWordPressサイト | いいえ | いいえ |
| クラシックエディター | 古いWordPressインストール | 基本的なHTML | いいえ |
| 手動HTML | カスタムレイアウト、ランディングページ | はい | いいえ |
| プラグイン（例：Easy TOC） | 自動目次 | いいえ | はい |
| SeedProdビルダー | ランディングページとテーマ | いいえ | いいえ |
WordPressにおけるアンカーリンクとは？
アンカーリンクとは、ユーザーが同じページ内の特定のセクションにジャンプできる内部リンクの一種です。ハッシュ（#）の後にIDを付けて、HTML内のその場所をターゲットにします。
上記の例で見られるように、アンカーリンクをクリックすると、そのトピックに即座にページ上でジャンプします。
アンカーリンクはいつ使うべきか？
ユーザーがウェブサイトに滞在するか離脱するかを決定するには、わずか数秒しかかかりません。その数秒を使って、ユーザーを惹きつけ、コンテンツに関与させるのがあなたの仕事です。
読者のエンゲージメントを維持する最も簡単な方法は、必要な情報にすばやくアクセスできるようにすることです。アンカーリンクを作成することで、ユーザーは他のコンテンツをスキップして、興味のあるセクションに直接ジャンプできます。これは、ユーザーエクスペリエンスを向上させ、より多くの読者を獲得するための優れた方法です。
前述の通り、アンカーリンクはWordPressのSEOを改善することもできます。Googleは検索結果にアンカーリンクを「ジャンプ先」リンクとして表示することが多く、読者は結果ページから特定のセクションに直接ジャンプできます。
Googleは、検索結果で1つのページから複数のリンクを「ジャンプ先」リンクとして表示することもあります。これらのリンクは検索結果でのクリック率を高めることが証明されており、ウェブサイトへのトラフィック増加につながります。
では、WordPressで特定のページ部分にジャンプするリンクを作成するにはどうすればよいのでしょうか？見ていきましょう！
WordPressブロックエディターでアンカーリンクを追加する方法
WordPressブロックエディターでアンカーリンクを作成するのは非常に簡単です。アンカーリンクを機能させるには、次の2つのことだけを行う必要があります。
- アンカーテキストの直前に#記号を使用してリンクを作成する
- ユーザーがジャンプしたいテキストにID属性を追加する
以下に、ご自身でこれを行う方法を学ぶための手順を示します。
ステップ1：アンカーリンクを作成する
最初のステップは、アンカーリンクを追加したいテキストをハイライトすることです。次に、WordPressブロックエディターの挿入リンクアイコンをクリックします。
アイコンをクリックすると、通常はページリンクを追加したり、リンクするページを検索したりする挿入リンクポップアップが表示されます。
ただし、アンカーリンクの場合は、#記号と、ユーザーにジャンプさせたいセクションのキーワードを入力する必要があります。
使用するキーワードは次のとおりである必要があります。
- リンクするセクションに関連している
- 長すぎたり複雑すぎたりしない
- 大文字小文字を使用してアンカーテキストを読みやすくする
- 単語を区切るためにハイフンを含めて読みやすくする
アンカーリンクのキーワードを入力したら、Enterキーを押してリンクを作成します。その後、WordPressエディター内で作成したリンクを確認できますが、クリックしても何も起こりません。
これは、リンクをクリックしたときにブラウザが探すIDがアンカーリンクに接続されていないためです。
これは、リンクしたいコンテンツ領域にID属性を追加することで修正できます。これは次のセクションで説明します。
ステップ2：リンクされたテキストにID属性を追加する
WordPressコンテンツエディターで、ユーザーがアンカーリンクをクリックしたときにジャンプさせたいコンテンツまでスクロールします。必要なセクションは、多くの場合、見出しまたは新しい段落の開始部分です。
次に、リンクしたいセクションを含むブロックをクリックし、ページ右側の「ブロック設定」に移動します。
ブロック設定で、「詳細」タブを展開し、アンカーテキストリンクに使用したのと同じキーワードをHTMLアンカーボックスに入力します。唯一の違いは、先頭に#記号は不要であることです。
記事を保存してプレビューすると、アンカーリンクが機能していることがわかります。それをクリックするだけで、以前にリンクしたコンテンツにジャンプできます。
リンクしたいコンテンツ領域が見出しではなく、通常の段落またはテキストの一部である場合は、プロセスが少し異なります。
その場合は、ブロックをクリックしてブロック設定を表示し、3点メニューをクリックしてその他のオプションを表示します。
そこから「HTMLとして編集」オプションを選択します。これにより、コンテンツ全体のすべてのHTMLを編集できます。
次に、リンクしたい情報に対応するHTMLタグを見つける必要があります。たとえば、段落の場合は「<p>」、テーブルの場合は「<table>」などを探します。
タグを見つけたら、以下の例のように、アンカーキーワードをid属性として追加します。
<p id="bali-hiking-adventures">
キーワードを追加した後、ブロックに無効または予期しないコンテンツが含まれているという通知が表示される場合があります。
したがって、「HTMLに変換」ボタンをクリックして変更を保存します。
WordPressのクラシックエディターでアンカーリンクを作成できますか？
WordPressのクラシックエディターをまだ使用している場合、アンカーリンクの追加方法は少し異なります。以下の手順に従って、WordPressのクラシックビジュアルコンテンツエディターでアンカーリンクを作成する方法を学びましょう。
ステップ1：アンカーリンクを作成する
まず、リンクしたいテキストをハイライトし、コンテンツエディターの上部にある「リンクを挿入」ボタンをクリックします。
次に、アンカーキーワードの前に「#」を付け、その後にリンクしたいテキストを追加します。
ステップ2：リンクされたテキストにID属性を追加する
次のステップは、アンカーリンクをクリックしたときにユーザーにジャンプさせたいコンテンツのセクションをブラウザに指示することです。
これを行うには、WordPressのクラシックエディターでテキストモードに切り替え、表示したいセクションまでスクロールします。
次に、アンカーリンクのターゲットにしたいHTMLタグを見つけます。たとえば、「<h2>」、「<h3>」、「<p>」などです。
次に、アンカーリンクのキーワードを「#」プレフィックスなしでid属性に追加します。以下はその例です。
<h2 id="bali-hiking-adventures">
これで変更を保存し、コンテンツをプレビューしてアンカーリンクが機能していることを確認できます。
HTMLでアンカーリンクを手動で追加する方法
WordPressのクラシックエディターでコンテンツを作成するために通常テキストモードを使用している場合は、HTMLでアンカーリンクを手動で作成する方法を以下に示します。
まず、以下の例のように、「<a href=" ">」タグを使用して「#」プレフィックスでアンカーリンクを作成します。
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
次に、リンクをクリックしたときにユーザーに表示したいコンテンツのセクションまでスクロールします。通常、そのセクションはH2またはH3タグですが、単純な段落「<p>」タグのような別のHTML要素でもかまいません。
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メンテナンスモードプラグイン
- リードを増やすための最高のWordPressバナープラグイン
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
フッター（テンプレート）にリンクがあり、「contact」と名付けられています。それをクリックすると、aboutページが読み込まれ、contactセクションまでスクロールダウンします。これはどのように行いますか？
マックスさん、こんにちは。これを行うには、aboutページにリンクし、URLリンクにアンカーを追加します /about/#contact。お役に立てば幸いです！
こんにちは！アンカーリンクを追加し、id属性を正しく作成しました（二重、三重に確認しました）が、リンクが機能しません。どこにも移動しません。何が間違っている可能性があるかについての記事は見つかりませんか？何が原因でしょうか？すべて設定通りだと誓います。プラグインやテーマの何かでブロックされている可能性がありますか？よろしくお願いします！
Tuijaさん、こんにちは
WordPressのバージョンは最新ですか？すべてのプラグインとテーマも最新であることを確認してください。それでもうまくいかない場合は、プラグインを無効にして、1つずつ有効にして、競合がないか確認してみてください。
こんにちは
メニューでアンカーが機能するように解決策を探しています。最初のページは問題なく、適切な場所にスクロールします。しかし、例えば「お問い合わせ」ページからアンカーID付きのリンクをクリックすると、機能しません。MYDOMAIN.com/contact-me/#anchorIDと表示され、MYDOMAIN.com/#anchorIDとは表示されないことがわかりました。
メニューをMYDOMAIN.com/#anchorIDのような完全なURLに置き換えました。機能しましたが、そのURLのボタンは常にアクティブなボタンに設定したアクティブカラーで表示されます。さらに、モバイルメニューではメニュー自体が非表示になりません。
完全なURLは機能しますが、アクティブボタンとモバイルでメニューが非表示にならないようにするにはどうすればよいですか？
誰か解決策を持っていますか？よろしくお願いします
Andrewさん、この問題については、サポートチーム https://www.seedprod.com/contact/ にご連絡いただけますでしょうか？より技術的な質問には、彼らの方がはるかに適切に対応できます。