この記事では、「ページの一番上へもどる」や目次のように「各見出し」へのリンクを作成する方法をご紹介します。
ブログなどのサイトで本文を読みすすめていくと、最後の方に「ページトップへ戻る」ボタンや「ページの一番上へ戻る」などのリンクを見たことはありませんか?
検索などからサイトを読みに来てくれたユーザーは、興味のある内容を読み終わるとすぐに他のページへ移動してしまいます。
離脱率を低く抑えるためにも、関連のある別ページへのリンクの他に、「ページトップへ戻る」や「各見出し」へ飛ばすリンクを用意しておきましょう。
ページトップへ戻るリンクがあれば、もう一度読み返すこともできますし、メニューなどを見て他のページも見てもらえるかもしれません。
もくじ
ページ内リンクの作成方法
ページトップへ戻る方法と各見出しへ戻る方法を、それぞれご紹介します。
トップへ戻る方法
ページトップへ飛ばす方法に、ページURLをリンクに設定してしまうと、毎回必ずリロードしてしまいます。
リロードすると読み込みに時間がかかる場合もありますし、スマホなどの場合は、パケット代もかかってしまいます。
その点、各見出しへのリンクと同様にページ内リンクを使うと、再読み込みもないので時間もかからず、無駄なパケットも消費しません。
サイトを閲覧してくれる読者にも、親切な方法ですよね。
記事の一番上に戻る「ページトップへ戻る」リンクを作る一番簡単な方法は、 そのページのheaderタグの位置を指定してあげることです。
<a href="header">ページトップへ戻る</a>
どの記事にも header は必ずあるので、aタグで指定してあげるだけで headerタグ=ページトップ へ飛ばすことができます。
各見出しへ飛ばす方法
h2などの各見出し位置へジャンプさせるには、各見出しをそれぞれ特定する必要があります。
飛ばしたい見出しタグが特定できるように、idタグを使って名前をつけます。
目次を自動で作るようなプラグインなどを入れていると、うまく動かなくなる可能性があります。
見出しへidを付与するときは、十分注意しましょう。
<h2 id="midashi1">見出し1</h2>
id名は、自分の好きな名前で構いません。ここでは midashi1としていますが、mark1やpaint1 など自分でわかりやすいと思う名前をつけましょう。
id名をつけてジャンプ先を特定することができたら、aタグを使ってリンクを作ります。
<a href="#midashi1">見出し1へジャンプ!</a>
リンク先にidを指定するときは、href=”#ジャンプ先id名”のように、#に続けてid名を記述します。
実際に試してみると↓
見出し1へジャンプ ←ここをクリック
↓
↓
↓
↓
↓
↓
↓
↓
↓
見出し1
このようにid名をつけたタグの位置へジャンプします。
別ページの特定位置に飛ばす方法
別ページの途中にある見出し位置へも、ジャンプさせることができます。
用語集ページなどを作っておいて、別ページの本文中にその用語が出たときにクリックすると、用語集ページのその用語の位置まで飛ばすなどが可能になります。
ジャンプ先のページの表示させたい位置にタグid名を指定する
クリックで飛ばしたいページのタグに、上記と同じようにid名を指定します。
ジャンプ先URL付きのaタグを作る
飛ばしたい先のURLと表示させたいid名をつけたタグを組み合わせて、aタグを使ったリンクを作ります。
<a href="https://weblog10.com#midashi">別ページの見出し1へジャンプ</a>
別ページのid名を指定するときは、href=”ジャンプ先URL#id名“のように、飛びたい先のURLに続けて#をつけたid名を記述します。
これで指定したURLのページへ飛び、そのページ内でid名が付いたタグ位置にジャンプします。
まとめ
リンク先にheaderを指定するだけのページトップへ戻る方法と、タグにid名を指定して特定の見出しへジャンプする方法のご紹介でした。
idは、ひとつのタグ要素に2つなど複数つけることはできません。見出しタグで使用する場合は、Easy table of Contensのような目次を自動で生成してくれるプラグインの動作を確認しておきましょう。
対策としては、記事のプレビューページでプラグインが自動付与したid名を確認する方法があります。付与された同じid名を指定してあげると、問題なく使えます。
もくじを自動生成するプラグインEasy table of Contensの記事はこちら