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

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

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

目次非表示

ページ中にHTMLで目次を追加する方法
スタイルシートの追加
目次サンプルの表示
HTMLで目次を手動実装するにあたって

ページ中に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の部分は行ごと削除すればアイコンフォントを使用しない目次になります。