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

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

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

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

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

目次

ページ内リンクとは

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

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

実際に目次やメニューを作る

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

名前(アンカー)を付ける

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

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

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

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

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

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

ページ内のアンカーへリンクする

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

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

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

目次のHTML

<h2>目次</h2>

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

アンカーを付けた部分のHTML

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

内容

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

内容

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

内容

HTMLエディタで入力を簡略化

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

WordPressのHTMLエディタに自作のクイックタグを追加する方法

このエントリーをはてなブックマークに追加

HTMLタグのページ内リンクで目次やメニューを作成」への1件のフィードバック

  1. サイト運営者です

    とても参考になりました。
    idのやり方で理想どうりにページ内移動が設定できました。
    ありがとうございます。

    返信

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。