静的ページへHTMLで目次を挿入する方法

HTMLを使って作成した静的ページに目次を挿入したい場合に使う一般的な手法について解説します。

WordPressでプラグインを使うのに比べて手間はかかりますが文字数的にボリュームがで増えた場合にページの閲覧性を向上させたいときなどに活用できるかと思います。

ページ中にHTMLで目次を追加する方法

目次の追加方法として一般的に用いられるのは次のサンプルのようなコードを目次を入れたい場所へ書き込みます。

<ul class="table-of-contents">
<li><a href="#アンカーa">見出し1</a></li>
<li><a href="#アンカーb">見出し2</a></li>
<li><a href="#アンカーc">見出し3</a></li>
</ul>

この目次はページのコンテンツに次の見出しを含んでいることを想定しています。

<h2 id="アンカーa">見出し1</h2>
<p>テキスト文・・・・</p>
<h2 id="アンカーb">見出し2</h2>
<p>テキスト文・・・・</p>
<h2 id="アンカーc">見出し3</h2>
<p>テキスト文・・・・</p>

このように目次のリストに各見出しへのリンクを設置する形で記述します。

ここではアンカーにa、b、cと入れていますが、実装の際に見出しに設置するアンカーは分かりやすい文字列に変更すると良いでしょう。

スタイルシートの追加

目次が完成したらスタイルシートを使って、表示枠と目次タイトルを追加する簡単な装飾をします。

既存のスタイルシートへ次の記述を追加します。

WordPressで使う場合は作成済みの子テーマに記述することになります。

.table-of-contents {
    border: 2px solid #516ab6;
    border-radius: 2px;
    margin: 1em ;
    padding: 1.5em;
    position: relative;
}
.table-of-contents:before {
    background-color: #fff;
    color: #0000FF;
    font-size: 1.2em;
    content: "\f03a  目次";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    left: 1em;
    padding: 0 0.5em;
    position: absolute;
    top: -1em;
}

サンプルのスタイルシートではFontAwesomeを使っていますが、不要なら\f03aを消して「目次」のテキストのみにしfont-familyの部分は行ごと削除すればアイコンフォントを使用しない目次になります。

目次サンプルの表示

サンプルで作成した目次を当ページ内へ表示してみました。

目次にある見出し1~3のリンクをクリックすると、それぞれの見出しに移動します。

    見出し1

    テキスト文・・・・

    見出し2

    テキスト文・・・・

    見出し3

    テキスト文・・・・

HTMLで目次を手動実装するにあたって

リライトの意味で見出しを追加または削除したときに編集が面倒

CMSが主流になる前は、こうしたオーソドックスな目次の挿入が一般的だったことを考えれば、そう尻込みすることもなく使えるのではないでしょうか。

おすすめ記事

WordPressのトップページに静的HTML WordPressでトップページに静的htmlを使う方法とそれに伴う課題 ホームページに更新日を表示 作成したWebページに更新日を表示させるには

Webページのファイル更新日を構造化データへ自動で反映させる

HTMLで作成したWebページの更新日を構造化データへマークアップする際に、編集したHTMLファイルの更新日をPHPで取得して反映させればページの更新時に日付を編集する手間が省ける。