HTMLタグのページ内リンクで目次やメニューを作成

マニュアルやノウハウなどの記事はボリュームが大きいだけに縦長になってしまいがちです。そういった記事の頭に目次があればユーザーは記事全体の概要を把握しやすく、特定の内容のみ読みたい場合にも該当箇所にスムーズに遷移できます。HTMLで簡単に実装できたのでまとめてみました。

なお、WordPressを使用している場合プラグインを利用して目次を作ることもできますが、プログラム同士のバッティングやhttpリクエストの増加の懸念があるため、私はプラグインは極力使わず、自分で時間を欠けずにできることは自分で行うようにしています。

今回の目次もプラグインは使用しません。

ページ内リンクとは

リンクといえば別のサイトに移動したり、同じサイト内でも別のページに移動するのが一般的ですが、ページ内リンクとはその名の通り、クリックすると同じページ内の別の場所に移動します。

考え方としてはページ内の要素や画像などに名前をつけて、その場所へのリンクを作成します。

まずはページ内リンクで誘導したい場所に名前（アンカー）を付けます。私は記事中の見出し(h2タグ)ごとに飛べるとわかりやすいと思ったので、記事中のh2タグにそれぞれ名前を付けました。

下記はこのページで実際に使っているアンカーです。

<h2 id="02">実際に目次やメニューを作る</h2>

上記のh2タグに「02」という名前を付けたと思ってもらえればOKです。この方法では要素に名前を付けているだけなので、h2タグに限らず<要素 id="名前"> という形で記述することで他の要素でも適用できます。

また、上記の方法の他に下記のように記述することで要素でないテキストなどにもアンカーを付けることができます。

<a name="名前">テキストなど</a>

※アンカー名は半角英数字で任意の名前を付けます。ただし、同じページ内で同じアンカー名を2ヶ所に使うことはできません。

先ほど名前をつけたアンカーへのリンクを作成します。リンクタグを利用して下記のように記述すればOKです。

<a href="#02">実際に目次やメニューを作る</a>

断片的だとわかりづらいと思いますので、下記に実際にこのページで使用している目次とアンカーを書いておきます。

<h2>目次</h2>

<ul>
<li><a href="#01">ページ内リンクとは</a></li>
<li><a href="#02">実際に目次やメニューを作る</a></li>
<li><a href="#03">HTMLエディタで入力を簡略化</a></li>
</ul>

<h2 id="01">ページ内リンクとは</h2>

内容

<h2 id="02">実際に目次やメニューを作る</h2>

内容

<h2 id="03">HTMLエディタで入力を簡略化</h2>

内容

上記の内容を毎回手入力するのは面倒なので、WordPressのHTMLエディタでワンクリックで入力できるようにしました。方法については下記の記事をご参照下さい。