jquery.toc.jsを使って本文の見出しを目次表示するプラグイン｜DAD UNION

jquery.toc.jsを使って本文の見出し（h2～h4）を目次にして表示するプラグインをご紹介します。
ブログサイトで使えそうなjsプラグインです。

Contents

jquery.toc.jsを使って本文の見出しを目次表示するCSS記述
jquery.toc.jsを使って本文の見出しを目次表示するHTML記述
jquery.toc.jsを使って本文の見出しを目次表示するJavaScriptの記述
jquery.toc.jsを使って本文の見出し（h2～h4）を目次表示するデモページ
ソース元：Table of Contents jQuery Plugin

jquery.toc.jsを使って本文の見出しを目次表示する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>

jquery.toc.jsを使って本文の見出しを目次表示するHTML記述

※目次表示箇所「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>

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>