ブログの目次をアンカーリンク付きで自動作成して表示するJS「TOC.js」

最近よく見かけるページの「目次」

最近やたらといろんなブログで「目次」を設置しているのを目にします。ページの要約としてパッとわかりやすいと思うのですが、ユーザービリティ向上のためだけではこのブログに設置しようとは思わないのですが、以下のページでSEO対策として有効な手段っぽいことがわかったので、このブログにも設置してみることにしました。

SEO対策としての目次についての参考ページ

Link

Googleモバイル検索結果で「○○に移動」を表示させる方法の解説 | Seoコンサルタント.com

https://seo-lpo-consultant.com/google-search-result-move/

Link

「Seo対策として目次を設置する」←効果はあるが不十分【理由も解説】｜Macoblog

https://macoblog.com/mokuji-seo-kouka/

「TOC.js」なら簡単に目次を設置できる

「目次」は英語で「Table of contents」と書くので「TOC」。

WordPressなら「Table of Contents Plus」というプラグインがあるみたいですが、MovableTypeやその他のCMSでプラインが見当たらない場合に「toc.js」を使うのがいいのではないかと思います。

TOC.jsはjQueryに依存するJavascriptで、これを設置すればページ内の<h2>や<h3>タグの文字列を読み取り、簡単にアンカーリンク付きの目次を表示してくれます。目次をクリックするとちゃんとその記事の部分にジャンプしてくれます。

また、ブログの記事内のみの指定したセクションの<h>タグを対象にするように、classやidで指定したり、<h2><h3><h4><h5>まで複数の<h>を指定すると、段落を付けてリスト表示してくれたりと、小回りが利きます。

作者の公開ページ

Link

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

「toc.js」または「toc.min.js」をダウンロード

まずは必要な「toc.js」を以下ページ内のReleaseページからダウンロードします。

Link

Github - Jgallen23/Toc: Table Of Contents Plugin

https://github.com/jgallen23/toc

現時点での最新バージョンは1.4.1なのですが、このバージョンのZIPファイルには「toc.js」または「toc.min.js」が入っていませんので注意してください。

では、どこにあるかというと0.3.2のZIPの中にあります。

Link

Releases · Jgallen23/Toc · Github

https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1

ダウンロードしたZIPを解凍したdistフォルダを開くと「toc.js」とコード圧縮版の「toc.min.js」が出てきます。これを任意のディレクトリにアップロードして使います。

目次の自動表示を実現するための手順

toc.jsで目次を自動作成して表示するためには以下の準備が必要です。

jQueryの読み込み
toc.jsの読み込み
toc.jsで出力する目次のセッティング
目次を表示する部分にタグを設置
目次を整形するCSS

jQueryとtoc.jsと目次のセッティング

私の場合、以下のソースを</body>の直前あたりに組み込みました。

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" defer></script>
<script src="/js/toc-0.3.2/dist/toc.min.js" defer></script>
<script defer>
window.addEventListener( 'load', function(){
    jQuery('#toc').toc({
          'container': 'section.entry-content', /* 見出しを取得するエリアを指定 */
          'selectors': 'h2, h3', /* 目次として表示したい見出しの指定 */
          'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
          return prefix+i;
          },
    });
}, false);
</script>

Defer対応でソースをwindow.addEventListener( 'load', function(){...}, false);で囲む

JSを非同期実行させるためにDeferを使っているのですが、Deferを使うとChromeはtoc.jsのサンプルソースで目次を表示できましたが、EdgeとIE11（Internet Explorer 11）では表示できなかったので、Defer対策としてwindow.addEventListener( 'load', function(){...}, false);で設定のソースを囲っています。私の環境ではこれで表示できました。

'container'でブログ記事の部分を指定

このブログの記事を表示する部分は<section class="entry-content"></section>で囲われているので、'container'の部分で 'section.entry-content'を指定しています。設置するブログに合わせてここを変えてください。

'selectors'で<h2>,<h3>を対象にする

ブログ記事内の<h2><h3>タグを文字列を対象に目次に出力したいときは、'selectors'の部分に'h2, h3'を指定します。もっと詳しくh4,h5も加えてみましたが、h2～h5まで指定すると目次が縦長でウザイことになったので、私の場合h2,h3のみに絞りました。

'anchorName'の部分で日本語環境時の不具合を回避

'anchorName'の部分を指定しないと、目次のアンカーリンクが正常に割り当てられません。その不具合を回避するために、上記のような指定をしています。これを指定すると正常にアンカーリンクが割り当てられ機能します。

これ以外に指定できるオプションの参考

英語ですが公式ページの「Options」に説明があります。

Link

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

日本語で解説した参考ページはこちら↓

Link

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

https://nelog.jp/jquery-table-of-contents-plugin#toc7

目次を表示したい部分に設置するタグ

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

このタグを目次を表示したいところに設置すれば、ここに目次が表示されます。

目次用のスタールシート（CSS）

公式ページのサンプルのスタイルシートは目次を画面左に表示しますが、私は記事内に表示したかったので、以下のコードは公式サンプルのコードの不要な部分をコメントアウトしています。また、モバイル表示では目次が邪魔になるので@media screenで幅が639pxの時は非表示にするようにしました。

#toc {
     /*top: 0px;
     left: 0px;
     height: 100%;
     position: fixed;
     background: #333;
     box-shadow: inset -5px 0 5px 0px #000;
     width: 150px;
     padding-top: 20px;
     color: #fff;*/
  }
 
 #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: 30px;
   }
   
#toc .toc-h4 {
   padding-left: 50px;
   }
   
#toc .toc-active {
   /*background: #336699;
   box-shadow: inset -5px 0px 10px -5px #000;*/
   }

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