JavaScript

jQuery.toc.jsを使った目次表示プラグインの紹介

  /

本文の見出し（h2～h4）を目次にして表示するプラグインjQuery.toc.jsを紹介します。
このプラグインを使えば、ブログやウェブサイトの本文中の見出し（h2～h4）を自動的に目次として表示することができます。これにより、読者がコンテンツを簡単にナビゲートできるようになります。この記事では、具体的な使い方を詳しく説明します。

Contents

CSS記述

まずは目次「#toc」と本文エリア「class=”container”」のCSS設定から始めましょう。
目次は固定位置に表示され、読みやすくスタイリッシュなデザインに仕上げることが重要です。

<style>
body {
    font-size: 16px;
}
h1{
    text-align: center;
    font-size: 20px;
    line-height: 1.6em;
    padding: 20px 0;
}
p{
    padding-bottom: 20px;
}
#toc {
    background: #fefefe;
    width: 240px;
    position: fixed;
    border: 1px solid #ddd;
    color: #333;
    list-style: none;
    margin: 0;
    padding: 15px;
}
#toc a {
    color: #333;
}
#toc .toc-h2 {
    margin-left: 10px
}
#toc .toc-h3 {
    margin-left: 20px
}
#toc-visible {
    color: #000;
    font-weight: bold;
}
#toc.right {
    right: 0
}
.container{
    width: 900px;
    margin: 0 auto;
}
</style>

　
このスタイルシートは、目次をページの右側に固定し、見出しごとにインデントを設定しています。必要に応じて、これらのスタイルをカスタマイズしてください。

HTML記述

次に、HTMLの設定です。目次表示箇所「id=”toc”」と本文エリア「class=”container”」を指定します。
目次表示箇所「id=”toc”」と本文エリア「class=”container”」内に見出し「h2～h4」を用意します。

<h1>jquery.toc.jsを使って本文の見出し（h2～h4）を目次表示</h1>

<ul id="toc"></ul>

<div class="container">
  <h2>見出しh2タイトル1</h2>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <h2>見出しh2タイトル2</h2>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <h3>見出しh3タイトル1</h3>
  <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
  <h2>見出しh2タイトル3</h2>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <h3>見出しh3タイトル2</h3>
  <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
  <h4>見出しh4タイトル1</h4>
  <p>TEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>

JavaScript記述

最後に、jQueryとjQuery.toc.jsを読み込み、目次を生成するためのJavaScriptコードを記述します。
jquery.min.js（v1.7.2）、jquery.toc.jsファイルを読み込みます。
$(“目次エリア”).toc({content: “本文エリア”, headings: “h2,h3,h4”})を記述します。

<script src="jquery.min.js"></script>
<script src="jquery.toc.js"></script>
<script type="text/javascript">
    $("#toc").toc({content: "div.container", headings: "h2,h3,h4"});
</script>

　
このスクリプトでは、目次を生成するターゲットエリアと見出し要素を指定しています。これにより、ページが読み込まれた際に目次が自動的に生成されます。

jquery.toc.jsを使って本文の見出し（h2～h4）を目次表示するデモページ

以下のリンクからデモページにアクセスして、実際の動作を確認してください。

jquery.toc.jsを使って本文の見出し（h2～h4）を目次表示するデモページ

ソース元：Table of Contents jQuery Plugin

このプラグインの詳しい情報やその他のオプションについては、以下のサイトをご覧ください。

Table of Contents jQuery Plugin

まとめ

jQuery.toc.jsは、簡単に目次を生成できる便利なプラグインです。特に、長文のブログ記事や技術ドキュメントにおいて、読者の利便性を大幅に向上させることができます。この記事を参考に、ぜひ自分のサイトにも導入してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.toc.js 目次表示
関連記事