JavaScript

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

 

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

Contents
  1. jquery.toc.jsを使って本文の見出しを目次表示するCSS記述
  2. jquery.toc.jsを使って本文の見出しを目次表示するHTML記述
  3. jquery.toc.jsを使って本文の見出しを目次表示するJavaScriptの記述
  4. jquery.toc.jsを使って本文の見出し（h2～h4）を目次表示するデモページ
  5. ソース元：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>

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

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

ソース元：Table of Contents jQuery Plugin

Table of Contents jQuery Plugin

　

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

jquery.toc.js 目次表示
RELATED POST