目次追加JS

概要

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

ファイル読み込みとタグ追加のみで使えます。導入はJavascriptファイルだけなので、たいていの環境で動作します。
お好きな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です。
  目次には各見出しへのページ内リンクを追加します。その際、h2・h3にidがある場合はそのidを使用し、idがない場合は「contents-table-数字」のidを追加します。
• 目次にはそれぞれクラスを追加します（デザイン調整用）。
  元がh2：contents-table-h2
  元がh3：contents-table-h3