本記事では「ページ内リンク（アンカーリンク）」の作り方を解説します。
百聞は一見にしかず。まずはこちらのリンクをクリックしてください。
このように、ページ内の任意の場所にジャンプすることができるのがページ内リンク（アンカーリンク）です。
ページ内リンク（アンカーリンク）を作ることで、
- 読者（ユーザー）が目的の情報にたどり着きやすくなる
- ユーザビリティの向上（ユーザー満足度の向上）により、SEOにも効果がある
のようなメリットがあります。
今回は、初心者でも簡単にページ内リンク（アンカーリンク）を作れるよう、作り方を解説していきます。
そよご使う上での注意点もあるので、一緒に確認していきましょう。
※本記事は、クラシックエディター（Classic Editor）を利用している方向けです。
ページ内リンク（アンカーリンク）の作り方
ページ内リンク（アンカーリンク）は、次の２つの手順で作成していきます。
- ジャンプしたい先に「id」（アイディー）を付ける。
- ジャンプ元のリンクに「id」を紐付ける。
そよごそれぞれやり方を見ていきましょう。
①ジャンプしたい先に「id」を付ける
記事の投稿画面の「テキストタブ」から、ジャンプしたい先の文章に赤字のように「id」を付け加えます。
今回は例として、この記事の「まとめ」の見出しにジャンプさせます。
【書き換え前】
<h2 >まとめ：ページ内リンク（アンカーリンク）を上手く使おう</h2>
【書き換え後】
<h2 id=”jump”>まとめ：ページ内リンク（アンカーリンク）を上手く使おう</h2>
ここでは「jump」というidを付けましたが、英数字であれば何でも構いません。
そよご「見出し３」にジャンプしたい場合は<h3>に、どこかの本文にジャンプしたい場合は<p>に同じようにidを付け加えれば大丈夫です。
h2、h3の「h」はheading（見出し）、「p」はparagraph（本文）の略です
②ジャンプ元のリンクに「id」を紐付ける
次に、ジャンプ元のリンクに先ほどのidを紐付けていきます。
記事の投稿画面の「テキストタブ」から、リンクを付けたい文章を以下のように書き換えます。
【書き換え前】
<p>「まとめ」までスキップ</p>
【書き換え後】
<a href=”#jump”>「まとめ」までスキップ</a>
「a」というのはアンカー（anchor,船の錨）の意味で、リンク付けをするときに使うものです。
「href」は、「hypertext reference」（ハイパーテキストの参照）の意味で、リンク先を指定するために使うものです。
「herf」には、先ほど指定したidである「jump」を入力します。
このとき、href=”#jump”というように、「#」が入ることに注意してください。
そよごこれでページ内リンク（アンカーリンク）は完成です。実際にリンクされているかどうか確かめてみてください。
本文の途中にリンクを張りたい場合は？
「まとめはこちらです。」
のように、本文の途中にリンクを張りたい場合は、以下のように書き換えてください。
【書き換え前】
<p>まとめはこちらです。</p>
【書き換え後】
<p>まとめは<a href=”#jump”>こちら</a>です。</p>
<p>の間に<a>を挟むこともできると覚えておきましょう。
ページ内リンク（アンカーリンク）を使う際の注意点
idを重複させない
今回は例としてjumpというidを付けましたが、idは自分で管理できればどのような文字列でも大丈夫です。
ただし、同じページ内でidが重複するとうまくリンクが機能しません。
複数のリンクを張る場合は、idを別のものにしましょう。
読者（ユーザー）を混乱させない
基本的にリンクがあると、読者（ユーザー）としては、別のページやサイトに飛ばされると認識します。
ページ内リンクを使う場合、それがきちんとページ内リンクであることが分かるようにしましょう。
（例：トップに戻る、結論までスキップ、など）
まとめ：ページ内リンク（アンカーリンク）を上手く使おう
うまく飛びましたか？このリンクをクリックで元の位置に戻ります。
本記事では、ページ内リンク（アンカーリンク）の作り方と注意点について解説しました。
ページ内リンクを上手く使って、ユーザーがいち早く目的のコンテンツに辿り着けるようにしてあげましょう！
今回は以上です。
