記事を書いていると「こっちに誘導したいな」なんて思いませんか？
そんな時使えるのが、ページ内ジャンプです。
今回は、ページ内ジャンプの使い方を紹介していきます！
ページ内ジャンプの使い方
HTMLコードの紹介
ページ内ジャンプを使うには以下のコードを使用します。
スタート地点
<a href="#アンカー名">文字</a>
ゴール地点
<p id="アンカー名">文字</p>
ページ内ジャンプの使い方
まずは、アンカーを設定します。
アンカーでは、『アンカー名』の部分にアルファベットを入力します。
アンカーのアルファベットはスタート・ゴールで同じ文字にしてください。
アンカーを設定することで、スタート・ゴールをリンクさせることができます。
そして、『文字』の部分に入れたい文を入れます。
例
スタート地点
<a href="#アンカー名">文字</a>
↓
<a href="#A">ここに文をいれます。</a>
ゴール地点
<p id="アンカー名">文字</p>
↓
<p id="A">これでゴールです！</p>
実際に飛んでみる！
画像で飛んでみる
では、次は画像で飛ぶ方法を紹介します。
まず、画像を用意します。
今回はこちらの画像を使います！
画像で飛ぶには文字の部分を以下のものに変えます。
<img src="画像のURL">
では、画像のURLの探し方ですが、自分が普段使っている簡単な方法を紹介します。
使いたい画像を一度貼り付け、プレビューで画像を右クリックし、「画像のアドレスをコピーを選択」するだけです！！
では、実際にやっていきます。
例
スタート地点
<a href="#アンカー名">文字</a>
↓
<a href="#A"><img src="画像のURL"></a>
↓
<a href="#A"><img src="ttps://cdn-ak.f.st-hatena.com/images/fotolife/a/ayuzu/20210420/2021042018.jpg></a>
画像を押すとまたページ下部に行くと思います！
自分がよく使っている一番簡単な方法！
自分がよく使う方法はスタートの文だけ入力して、ゴールには何も入力しない方法です。
スタート地点
<a href="#アンカー名">文字</a>
ゴール地点
<p id="アンカー名"></p>
ゴールの『文字』を消しただけです(笑)
【文字で飛んでみる】と同じように飛びます。
<a href="#A">ジャンプ</a>
ジャンプ
<p id="アンカー名"></p>を飛ばしたいところの前に貼り付けることで、ゴール先の文字を入力せずに飛ばすことができるので、おすすめです！
まとめ
今回はページ内ジャンプの方法を紹介しました。
画像を使うときはひと手間必要ですが、簡単に使うことができると思います！
今回参考にさせていただいたサイト！
www.snow0303.com
こちらのサイトでは、ページ内ジャンプの文字の色の変更であったり、アンダーラインの消し方などさらに詳しく解説されています！
ページ内ジャンプを使えれば、読んでくれている方の知りたい情報を見出し以外で誘導できます！
最後までお読みいただきありがとうございました。
みなさんの参考になれば幸いです。
