ページ内の特定の場所へジャンプするリンクの作り方【WordPress・その他サイト対応】

ページの特定部分へのリンク（アンカーリンク）とは？

現在、リンクはさまざまな目的で共有・作成されており、私たちの日常生活に欠かせないものとなっています。しかし、長い文書やページへのリンクを共有した場合、受け手が伝えたい情報の箇所を探し出すのは簡単ではありません。そこで役立つのが、ページ内の特定の場所へ直接ジャンプさせる「特定リンク」（アンカーリンク）です。

この記事では、サイトの種類に応じて、ページの特定の部分にリンクを張る方法を解説します。トラブルを避けるため、各手順をよく確認しながら進めてください。

ページの特定部分にリンクする方法

多くのユーザーからの要望にお応えし、主要なプラットフォームごとにページ内ジャンプリンクを作成する手順をまとめました。以下のとおりです。

WordPressの場合

1. プラスアイコンをクリックして、新しい「ブロック」を追加します。
2. ブロックタイプとして「見出し」を選択し、見出しテキストを入力します。
3. サイドバーの「高度な設定」ドロップダウンを開き、「HTML アンカー」の入力欄を見つけます。
4. リンクがクリックされたときにジャンプ先となる識別子（アンカー名）を入力します。
   注意：スペースは使用せず、単語の間は「-」（ハイフン）でつなぎます。
5. 次に、ジャンプの起点となるテキストを入力するか、画像やボタンを配置します。
6. そのテキスト・画像・ボタンを選択（ハイライト）し、ブロックツールバーの「リンク」ボタンをクリックします。
7. 「#（手順4で作成したHTMLアンカー名）」を入力してEnterキーを押すと、ページの特定部分へのリンクが完成します。
8. これで、ユーザーがリンクをクリックすると、手順2で設定した見出しへ自動的に移動するようになります。

WordPress以外のサイトの場合

サイトを自分で管理しておらず、かつサイト側がページ内ジャンプを用意していない場合でも、リンク先をページの特定箇所へ向ける方法がひとつ残されています。HTMLのid属性を利用する手法で、手順は以下のとおりです。

1. 例として、フォーラム上の特定の回答にリンクを向けたいケースを想定します。
2. ページを下にスクロールし、目的の回答部分を選択（ハイライト）します。
3. ハイライトした部分を右クリックし、「検証（Inspect）」を選択します。
4. 検証ツールには、選択した部分に対応するHTML要素が表示されます。
5. 小さな「<div…」要素が枝分かれしている、親となる「<div>」要素を見つけます。
6. その「<div>」の中に、「id="answer-（番号）"」という記述が表示されているはずです。
7. 「id=」の後の引用符内の文字列をすべて選択し、右クリックして「コピー」を実行します。
8. コピーした文字列を控えておき、サイトURLの末尾に「#」を付けて追記します。
9. たとえば、元のURLが以下だった場合：

https://stackoverflow.com/questions/1465381/catching-the-dreaded-blue-screen-of-death

次のように書き換えます。

https://stackoverflow.com/questions/1465381/catching-the-dreaded-blue-screen-of-death#answer-1465388

10. このURLを使用すれば、ページの特定の部分へ直接リンクできるようになります。

まとめ

アンカーリンクは、HTMLのid属性を利用してページ内の任意の位置へ誘導できる便利な機能です。WordPressでは「HTML アンカー」欄を使って簡単に設定でき、外部サイトでも開発者ツールでidを調べればURLに「#」を付加するだけで同じ効果が得られます。長い記事やFAQページ、フォーラムの回答などを共有する際に活用すれば、読み手のストレスを大幅に減らすことができます。