サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」

ページに目次があると内容がある程度わかって分かりやすいこともあります。

WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。

先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。

TOCとは

TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。

ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています）

このTOCプラグインの特徴は以下です。

カスタマイズの自由度が高い
目次をクリックするとスムーズにスクロール移動する
現在見ているセクションをハイライト表示
スクリプトが軽量

スムーズなスクロール移動や、現在地のハイライトは、使っていて楽しいです。

主な手順

TOCを利用する主な手順としては、以下のようになります。

TOCの設置
CSSの記述
スクリプトの記述

基本的に、ほとんどコピペで実装することができます。

TOCの設置

まずはTOCサイトからスクリプトをダウンロードします。

「Download」項目の「Production」リンクを右クリックして「toc.min.js」というファイル名で任意の場所に保存してください。

ダウンロードされた「toc.min.js」ファイルをプロジェクトフォルダ内に以下のように設置します。

js/toc.min.js

プロジェクトフォルダが、Wordpress子テーマだった場合は、以下のような位置に設置します。

CSSの記述

次に目次表示要素のスタイルをCSSファイルに記入します。

/******************************
* TOCのスタイル
******************************/
body{margin-left:130px;}

#toc {
  top: 0px;
  left: 0px;
  height: 100%;
  position: fixed;
  background: #333;
  box-shadow: inset -5px 0 5px 0px #000;
  width: 130px;
  padding-top: 20px;
  color: #fff;
  font-size: 12px;
}

#toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#toc li {
  padding: 5px 10px;
}

#toc a {
  color: #fff;
  text-decoration: none;
  display: block;
}

#toc .toc-h2 {
  padding-left: 10px;
}

#toc .toc-h3 {
  padding-left: 20px;
}

#toc .toc-active {
  background: #336699;
  box-shadow: inset -5px 0px 10px -5px #000;
}

@media screen and (max-width:639px){
  #toc{
    display: none;
  }

  body{margin-left:0;}
}

WordPressテーマのカスタマイズの場合は、テーマフォルダ内のstyle.cssにでも記入すればOKかと思います。

今回、画面の左サイドに表示するスタイルにしたので、モバイルだと邪魔になるので、モバイルでは非表示になるようにスタイルを設定しています。

スクリプトの記述

次に、フッターの</body>手前あたりに、以下のように記述します。

通常サイト

通常サイトで利用するには以下のように記入します。

<div id="toc"></div>
<script src="js/toc.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
  $('#toc').toc({
    'selectors': '.article h2,.article h3', //目次として表示する要素のCSSセレクターを指定
    'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
        return prefix+i;
    },
  });
})(jQuery);
</script>

WordPressテーマ

WordPressの子テーマで利用するには、以下のように記入します。

<div id="toc"></div>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/toc.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
  $('#toc').toc({
    'selectors': '.article h2,.article h3', //目次として表示する要素のCSSセレクターを指定
    'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
        return prefix+i;
    },
  });
})(jQuery);
</script>

親テーマで利用するには、get_stylesheet_directory_uri()をget_template_directory_uri()に変更してください。

本来、スクリプトを呼び出すときは、wp_enqueue_script()関数を利用すべきところでしょうが、説明がややこしくなるので割愛。

コードの説明

それぞれのコードについて説明します。

目次表示部分

まず、以下の#toc要素に目次が自動生成されます。

<div id="toc"></div>

特にサイドに設置する必要もなく、好きな場所に設置することができます。

WordPressの場合は、以下の方法などを応用すれば、「本文最初のH2見出し手前」に目次を設置するなんてこともできるかと思います。

【アドセンス収益向上】簡単！プラグインやショートコード不要でWordPress記事中に広告を挿入する方法

ブログの記事中、特にリード文あとの広告は、アドセンスの収益面からみて有効な手段だと思います。その理由は、ページに訪れてみたも...

nelog.jp

2016-08-30 08:16

スクリプトの呼び出し

TOCスクリプトは、以下のように、1つファイルを呼び出せばOKです。

通常サイトの場合

<script src="js/toc.min.js" type="text/javascript"></script>

WordPressテーマの場合

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/toc.min.js" type="text/javascript"></script>

実行コード

実行コードは、以下のようになっています。

<script type="text/javascript">
(function($){
  $('#toc').toc({
    'selectors': '.article h2,.article h3', //目次として表示する要素のCSSセレクターを指定
    'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
        return prefix+i;
    },
  });
})(jQuery);
</script>

‘selectors’に、目次にしたいCSSセレクターを指定しています。今回の場合は、.article h2と,.article h3をカンマ区切りで指定しています。

‘anchorName’は、日本語環境の場合、指定しないと正常動作しないようです。というのも、TOCのデフォルトでは、見出しを、そのままアンカーネームにするからです。けれど、日本語は無視されてしまうため、環境によっては同名のアンカネームとなってしまうため、アンカネームを関数を使ってカスタムしています。

TOCのオプション

その他の、toc関数のオプションとして、以下のようなものもあります。

$('#toc').toc({
  'selectors': 'h1,h2,h3', //目次として表示する要素のCSSセレクターを指定
  'container': 'body', //コンテナ要素
  'smoothScrolling': true, //スムーズなスクロールを有効にするか
  'prefix': 'toc', //アンカータグとクラス名のプレフィックス
  'onHighlight': function(el) {}, //新しいセクションがハイライトされたときの動作を指定 
  'highlightOnScroll': true, //ハイライトを有効にするか
  'highlightOffset': 100, //次の見出しのトリガーとなるオフセット位置
  'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
    return prefix+i;
  },
  'headerText': function(i, heading, $heading) { //ヘッダーアイテムテキストのカスタマイズ
    return $heading.text();
  },
  'itemClass': function(i, heading, $heading, prefix) { //アイテムクラスのカスタマイズ
    return $heading[0].tagName.toLowerCase();
  }
});

これだけカスタムできれば、ある程度思い通りの目次機能が作れるかと思います。

オプションについて詳しくは、以下を参照してください。

参考 TOC | jQuery Table of Contents Plugin