ブログに見出しを設置できるjQueryプラグイン「TOC | jQuery Table of Contents」

2019年1月7日

著者：サイトウマサカズ

ブログ等を作成する時に、目次を作りたくなる時がよくあります。
目次があれば記事の全体を掴む事が出来ますし、そこからリンクをクリックする事で目的の位置までスクロール出来ます。

このブログでも実装していて、PCの場合はサイドバーに追尾してくる形で表示。スマホの場合は右下にアイコンがあってそれをタップする事で目次が表示されるようにしています。

今回はそれらの実装に使用したjQueryプラグインの「TOC | jQuery Table of Contents Plugin」を紹介します。ちなみに、TOCはTable of Contents（見出し）の略です。

TOCのダウンロード

projects.jga.me

TOC | jQuery Table of Contents Plugin

http://projects.jga.me/toc/

TOCのサイトから「Production」をクリックして「toc.min.js」をダウンロードします。

あとはHTMLの</body>閉じタグ前に読み込みの記述を書きます。また、このプラグインはjQueryが必要なのでjQueryの読み込みと、後ほどTOCの設定を書く必要もあるので、予めmain.jsというファイルを作成して読み込んでおきましょう。

index.html<script src="./js/jquery.min.js"></script> //jQueryの読み込み
<script src="./js/toc.min.js"></script> //先程ダウンロードしたTOCプラグインの読み込み
<script src="./js/main.js"></script> //TOCの設定を記述するファイルの読み込み

読み込む順番は「jQuery → TOC → 設定用ファイル」なので間違えないようにしましょう。

目次の設定

ここからは目次を表示させるための設定です。
まずはHTMLに目次を表示する要素を用意します。今回は「toc」というidを割り振っておきます。

index.html<div id="toc"></div>

後はjsファイルの方で、設定を行います（不要な部分は省略可能）。
下記の設定は公式サイトの「Options」のコメントアウトしてある部分を日本語にして少し分かりやすくしたものになります。

main.js$('#toc').toc({
  'selectors': 'h1,h2,h3', //見出しに表示する要素（classやidでの指定も可能）
  'container': 'body', //コンテナとなる要素
  'smoothScrolling': true, //スムーススクロールを有効にするか（true / false）
  'prefix': 'toc', //アンカータグやclass名につけるプレフィックス
  'onHighlight': function(el) {}, //セクションがハイライトされた時の処理を書く
  'highlightOnScroll': true, //ハイライトを有効にするか（true / false）
  'highlightOffset': 100, //次の見出しのトリガーとなる位置
  'anchorName': function(i, heading, prefix) { //アンカーネームの名前の設定（iは見出しの順番）
    return prefix+i;
  },
  'headerText': function(i, heading, $heading) { //ヘッダーアイテムテキストの設定
    return $heading.text();
  },
  'itemClass': function(i, heading, $heading, prefix) { // アイテムクラスの設定
    return $heading[0].tagName.toLowerCase();
  }
});

自分のブログでは、下記の設定にしています。
セレクタはブログ本文内の見出しに限定していないと、余計な見出しタグまで取ってきてしまいます。最低限これだけ設定しておけば十分に見出しは作れます。

main.js$(function(){
  $('#toc').toc({
    'selectors': '.entory_content h2,.entory_content h3,.entory_content h4,.entory_content h5,.entory_content h6', //目次として表示する要素のCSSセレクターを指定
    'highlightOffset': 0,
    'highlightOnScroll': true,
    'anchorName': function(i, heading, prefix) {
      return prefix+i;
    }
  });
});

最後にCSSを整えれば完成となります（例となるCSSはこちら）。