webページの一番上に目次があって、リンクをクリックするとその内容の箇所に移動するのを見たことないでしょうか？
WordPressには他ページに移動するリンクを作る機能はありますが、同一ページ上の指定箇所に移動するリンクを貼る機能は備わっていません。
今回はWordPressの機能に頼らず、同じwebページ上の好きな箇所にリンクで移動する方法を紹介します。
WordPress ページの好きな箇所に移動するリンクを貼る方法
まずはこちらをご覧ください。
当サイトで実際に使っているものが確認できます。
そしてこちらがそのコードです。
※WordPressでHTMLを直接記述する際は、編集画面右上の「テキスト」タブより記述してください。
<div id="table_of_contents" style="background-color: #f7f7f7; width: 300px; border: solid 1px #c6c6c6; border-radius: 4px;"> <p style="text-align: center;">目次</p> <ol> <li><a href="#table_of_contents1">目次１のタイトル</a></li> <li><a href="#table_of_contents2">目次２のタイトル</a></li> </ol> </div> <h2 id="table_of_contents1">目次１のタイトル</h2> ～ <h2 id="table_of_contents2">目次２のタイトル</h2> ～
divタグは目次の枠を作るために記述しています。CSSで適当に線やサイズ等を指定しておきました。
それは置いておいて、色の付いている部分に注目してください。
今回のポイントとなる部分です。
リスト（liタグ）で表示しているリンク（aタグ）の「目次１のタイトル」と「目次２のタイトル」をクリックすることで、それぞれが対応している見出し2（h2タグ）の「目次１のタイトル」と「目次２のタイトル」の箇所に飛ぶようになってます。
リンクで飛ばしたい箇所のHTMLタグにID名を付けて、リンクにはそのID名を指定。
これだけで同一ページ内の好きな箇所に飛ばすことが出来ます。
当然ID名は自由に決めてOKです。
簡単なのでぜひこのコードと照らし合わせながら自分のサイトに実装してみてください。
最後に
記事が長くなる場合は目次があった方が、よくまとめてあるように見えます。
それに限らず、ユーザーを同一ページ内でスムーズに誘導する機能は案外使いどころがあると思います。
ユーザーがより利用しやすいサイトを作るための１機能として覚えておきたいですね。
