目次追加JS

概要

ページ中の見出しタグ（h2～h4）から目次（ul）を生成するJavaScriptファイルです。小説作品などを公開する際に楽するために作りました。
手打ちで編集するHTML向けですが、PPPなど一部CMSでも動作確認済みです。

ファイル読み込みとタグ追加のみで使えます。導入はJavascriptファイルだけなので、たいていの環境で動作します。
お好きなCSSテンプレートなどと一緒にご利用ください。

更新履歴

• 7/16H4を追加するように
  関連CSSを追加
• 2025/1/31軽量化、できていたらいいな～
• 2025/1/16修正と変更・ファイルの削除・CSS表示調整など
• 10/20動作の変更・ファイル追加
• 2024/10/12公開

内容物

• JSファイル（contents-table.js）
• HTMLファイル（このページ）

使い方

1. JavaScriptファイルを任意のHTMLファイル内で読み込む
   • 以下をbodyタグ内に挿入します。
     <script src="（.jsファイルのURL）"></script>
     
2. 目次を追加する箇所にid="contents-table"を設定する
   • divやnavなどのブロック要素に、<div id="contents-table"></div>というように記載します。
     それ以外の位置は非推奨です（機能はしますが、表示が崩れるかも）。

仕様

• id="contents-table"内にulリストを生成します。
• 目次化する対象はページ内のh2・h3・h4です。
  目次には各見出しへのページ内リンクを追加します。その際、h2・h3・h4にidがある場合はそのidを使用し、idがない場合は「contents-table-連番」のidを追加します。
• 目次にはそれぞれクラスを追加します（デザイン調整用）。
  元がh2：contents-table-h2
  元がh3：contents-table-h3
  元がh4：contents-table-h4

デザイン調整

最低限のリスト構造

見出しの強度に応じて字下げをするCSSです。
任意の装飾に差し替えてください。

H4を削除

不要な見出しを非表示にする場合、該当するクラス部分にdisplay: none;を追加します。
以下はH4を非表示にする場合です。

カウンター付き

本ファイルはulを追加するものなので、olのような連番がありません。
CSS側でカウンターを付けると以下のようになります。