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

Mon, 25 Feb 2019 21:35:32 +0900

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

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

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

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

https://macoblog.com/mokuji-seo-kouka/ 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で、これを設置すればページ内のやタグの文字列を読み取り、簡単にアンカーリンク付きの目次を表示してくれます。目次をクリックするとちゃんとその記事の部分にジャンプしてくれます。

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

作者の公開ページ

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

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

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

https://github.com/jgallen23/toc https://github.com/jgallen23/toc

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

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

https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1 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と目次のセッティング

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

<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/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’でブログ記事の部分を指定このブログの記事を表示する部分は****で囲われているので、**‘container’の部分で ‘section.entry-content’**を指定しています。設置するブログに合わせてここを変えてください。

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

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

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

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

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

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

https://nelog.jp/jquery-table-of-contents-plugin#toc7 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;
   	}
   }