初心者でも簡単にできる！ページ内でジャンプするリンクの作り方をまとめました。
この設定を行えば「ページ内のテキストや画像をクリックすると、ページ内の好きな位置にジャンプ」できるようになり、ユーザーにとっても便利なのでおすすめです。
■ ページ内でジャンプするリンクの作り方
リンクしたい場所にアンカー（目印）を作り、<a href=”#アンカー名“> とソースに記述すると、リンクしたい場所にページ内でジャンプができます。
手順は下記の通りです。
- １、ジャンプしたい場所にアンカー（目印）を作る
- ２、アンカー（目印）へジャンプするリンクを貼る
■手順１、ジャンプしたい場所にアンカー（目印）を作る
おすすめの方法を紹介します。
「h2」タグを小見出しに使っている場合は、h2タグをアンカーにするとユーザーにとっても分かりやすく便利です。
通常「h2」タグは
- <h2>文字</h2>
となっていると思います。
この「h2」タグにid属性を使って、アンカー名をつけます。
- <h2 id=”アンカー名”>文字</h2>
例） <h2 id=“abc”>文字</h2>
※「アンカー名」は半角英数字で好きな名前をつけることができます。
※ただし、同一のページ内では、同じ「アンカー名」は使えません。
■手順２、アンカー（目印）へジャンプするリンクを貼る
アンカー（目印）へジャンプするリンクを貼りたい箇所に、
- <a href=“#アンカー名”>文字</a>
と記述します。
そうすることで先程、
- <h2 id=”アンカー名”>文字</h2>
でアンカー名をつけた場所にリンクします。
例） <a href=“#abc”>文字</a>
■別ページのアンカーへジャンプしたい場合は？
この時、
- <a href=“ページのURL#アンカー名”>文字</a>
のように、
“ページのURL#アンカー名”
と指定すると、別のページのアンカー名をつけた場所にジャンプすることができます。
例えば、
- <a href=“https://xn--9ckkn0019c8wwb.jp/secure-free-email#i”>
のような感じです。
上記の場合は、 指定したURLのページ「https://xn--9ckkn0019c8wwb.jp/secure-free-email」の「#i」というアンカー名の位置までジャンプしてくれます。
- 【例１】→https://xn--9ckkn0019c8wwb.jp/secure-free-email
- 【例２】→https://xn--9ckkn0019c8wwb.jp/secure-free-email#i
上記の【例１】のリンクは、ページにジャンプするだけですが、【例２】の場合は、ページ内の2つ目の小見出し「【１】Gmail（フリーメール）で不正なアクセスが無いかをチェックする方法」という箇所にアンカー（目印）がつけてあり、そちらにジャンプします。
■ブログ（リンクの作り方）に関する記事
内部リンクって何？ブログのアクセスアップに関係あるって聞いたんだけど…？
ブログ記事に内部リンク貼るだけで突然アクセスアップするって噂は本当？
【簡単】WordPressで「はてなブログ」のようなリンクを作る方法
■アドセンス 関連記事
→ 【2017年10月】アドセンス審査に1日で合格したコツは？
コメント