ブログやサイトを閲覧していると、目次が用意してあり、ユーザーが気になるタイトルへダイレクトにジャンプできるサイトは多いですね。簡単に記事の目次を設置するには、こちらのプラグインが便利です。
長文の記事は目次があった方が読みやすいものです。目次があれば、読者ははじめに何が書かれているのかを把握できるので、読みやすさが劇的にアップするわけです。記事が読みやすくなれば、間接的に平均滞在時間のアップやファン化、検索エンジンからの評価のアップにも繋がる要因となりますね。 本稿ではWordP...
ユーザーの興味・関心がある箇所にワンクリックで移動できるように工夫する手段は、目次を設置するプラグインだけではありません。
先述・後述の項目など、ページ内の別の箇所を参照して欲しいときに本文中のテキスト自体にアンカーリンクを設定してユーザーの求める情報へジャンプさせてあげる工夫も可能です。ということで今回は、WordPressのサイトで簡単にアンカーリンク（ページ内リンク）を実装する方法をご紹介いたします。
アンカーリンク（ページ内リンク）とは
アンカーリンクとは、ページをジャンプして表示するためのHTMLで使用される代表的なタグですが、今回は、アンカーリンクを用いたページ内リンクについて説明しています。下記のように指定した場所をクリックするとページ内の別の箇所に瞬時に移動してくれる機能です。以下を試しにクリックしてみてください。
スムーズに指定の箇所へ移動することがわかるかと思います。この機能を応用すれば、目次以外でもページ内のコンテンツの補足など、参照して欲しい箇所に自動でジャンプさせることができますね。
WordPressでのページ内リンクの設定方法
以下の項目を設定するだけで可能です。
- 到達点のタグにid名を設定
- 出発点のテキストにaタグで上記のid名を指定
具体例として、先述のページ内リンクには以下のように設定しています。id名（anchor）は任意に設定が可能です。自身のわかりやすいように設定しましょう。
※id名（#anchor）は、同じページ内で被らないようにする必要があります。
<div id=”anchor”>アンカーリンクの到達点<div>
<a href=”#anchor”>アンカーリンクの出発点</a>
ページ内リンク設定の際の注意点
ページ内リンクがうまく機能しないという方は以下の項目を確認してみてください。
- 出発点（aタグのid名の前）に#が付いているか。
- 到達点のid名に不要な#を付けていないか。
- 到達点のid名をダブルクオーテーション（””）で囲んでいるか。
上記の項目に注意して実装すれば上手く機能するはずです。
ページ内リンクを設定してスムースにスクロールさせる方法
当記事冒頭の例では、スムースにスクロールしていますが、スクロールが適用されないテーマをご使用の場合は、以下の例のようにリンク先の画面に一瞬で切り替わるように表示されます。
これでは、ユーザーが操作したときにどこにジャンプしたのかがわかりにくく、ユーザビリティが高いとは言えませんね。どこに移動したのかわかりやすくスムースにスクロールさせる為には、弊社LABOの記事にも記載がある通り、以下の記述をheader.php内に追記する必要があります。
以下の記述を丸ごとコピーしてお手持ちのテーマファイルのheader.php内にペーストするだけですので、一度試してみましょう。※テーマファイルの編集はご自身の責任において、バックアップなどを取った上で慎重に行っていただくようお願いいたします。
<script>
jQuery(function(){
jQuery('a[href^="#"]').click(function() {
var speed = 800;
var href= jQuery(this).attr("href");
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>こちらをまるごとheader.php内に貼り付けると以下のような動きになるはずです。スクロールのスピードはvar speed = 800;の数値の部分を編集することで任意に変更できますので、コンテンツの量や移動距離に応じて適切なスピードを設定しましょう。
別ページの途中にリンクさせる方法
アンカーリンクはページ内リンクだけではなく、もちろん他のページにもリンクさせることが可能です。他のページの途中にユーザーが求める情報（or 管理者がアピールしたい情報）がある場合などに活用するとユーザーにとって便利ですね。
方法は単純で、WordPressでのアンカーリンクの設定方法の説明にのっとって、別のページのURLをaタグ内の#の前に記載します。以下のような感じですね。
<a href=”他ページのURL#anchor”>アンカーリンクの出発点</a>
これで他のページにも問題なく遷移することが可能です。
まとめ
当記事で紹介した方法ならプラグイン不要で初心者の方でも簡単にページ内リンク（アンカーリンク）を実装できるはずです。ユーザーが気になるコンテンツというのは記事全体の中でもごく一部に限られていたりもします。そのようなユーザーのニーズにスマートに応えるには、求められる情報へ瞬時にアクセスできるような工夫が有効でしょう。スムースな動きのページ内リンクを活用することでユーザービリティも高まりますので、ぜひトライしてみてください。
また、今回のようにidを使ってリンクを飛ばす方法ではなく、テキストフラグメントで好きなところにジャンプ＆ハイライト（強調スニペット）する方法もあります。そのやり方はこちらを参考にしてください。
idを使わず、特定のテキストにジャンプさせるURLにするには、URL末尾にテキストフラグメントを加えるだけです。特定テキストにジャンプし、強調スニペットしてハイライト表示させることができます。 試しに以下のURLをクリックしてみてください。 https://tcd-theme.com/t...
