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

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

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

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

スポンサーリンク
レクタングル(大)広告

TOCとは

TOC jQuery Table of Contents Plugin

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

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

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

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

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

主な手順

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

  1. TOCの設置
  2. CSSの記述
  3. スクリプトの記述

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

TOCの設置

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

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

TOCスクリプトのダウンロード

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

  • js/toc.min.js

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

Wordpress子テーマにTOCスクリプトを設置

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見出し手前」に目次を設置するなんてこともできるかと思います。

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

    スクリプトの呼び出し

    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

    まとめ

    と、このようにTOCは、軽量ながらカスタマイズ性に富んだ目次機能を手軽に設置することができます。

    今回は、サンプルとして左サイドに表示させているだけですが、スクリプトなどで、画面の左側にマウスカーソルが乗ったら表示させて、カーソルが外れたら非表示にするなんて動作にさせても面白いかもしれません。

    そして、WordpressなどでPHPと組み合わせて利用することで、好きな場所に目次を設置するなんてこともできるかと思います。

    というわけで「自前で目次機能を手軽に設置したい」なんて場合は、TOCはいろいろと使い勝手もよさそうです。

    サイト TOC | jQuery Table of Contents Plugin

    GitHub GitHub – jgallen23/toc: jQuery Table of Contents Plugin

    スポンサーリンク
    レクタングル(大)広告
    レクタングル(大)広告

    スポンサーリンク

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

    1. 名前:へんですよ 投稿日:2016/03/04(金) 16:37:22 ID:2fef8712d

      「本文が見えない」というか
      なんだか
      表示がヘンですよ
      by chrome&ie11

    2. アバター画像 名前:わいひら 投稿日:2016/03/04(金) 17:02:09 ID:33fd3248c

      もちろんそれは承知してます。
      このページのみの動作サンプルだから「まぁいいかな」って感じでそのままにしてました。
      動作サンプルを、作り込んでも、しょうがないので。
      とりあえず、本文にかぶらないようにだけはしておきました。