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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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ファイルに記入します。

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

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

スクリプトの記述

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

通常サイト

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

WordPressテーマ

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

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

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

コードの説明

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

目次表示部分

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

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

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

【アドセンス収益向上】簡単!プラグインやショートコード不要でWordpress記事中に広告を挿入する方法
ブログの記事中、特にリード文あとの広告は、アドセンスの収益面からみて有効な手段だと思います。 その理由は、ページに訪れてみたもののリー...

スクリプトの呼び出し

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

通常サイトの場合

WordPressテーマの場合

実行コード

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

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

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

TOCのオプション

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

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

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

参考 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

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