最近よく見かけるページの「目次」
最近やたらといろんなブログで「目次」を設置しているのを目にします。ページの要約としてパッとわかりやすいと思うのですが、ユーザービリティ向上のためだけではこのブログに設置しようとは思わないのですが、以下のページでSEO対策として有効な手段っぽいことがわかったので、このブログにも設置してみることにしました。
SEO対策としての目次についての参考ページ
「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>を指定すると、段落を付けてリスト表示してくれたりと、小回りが利きます。
作者の公開ページ
「toc.js」または「toc.min.js」をダウンロード
まずは必要な「toc.js」を以下ページ内のReleaseページからダウンロードします。
現時点での最新バージョンは1.4.1なのですが、このバージョンのZIPファイルには「toc.js」または「toc.min.js」が入っていませんので注意してください。
では、どこにあるかというと0.3.2のZIPの中にあります。
ダウンロードした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/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'でブログ記事の部分を指定
このブログの記事を表示する部分は<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」に説明があります。
日本語で解説した参考ページはこちら↓
目次を表示したい部分に設置するタグ
<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;
}
}
手順に関する参考ページ
その他の参考ページ
将来的に約に立ちそうなのでメモ。
WordPressでプラグインを使わずPHPで目次を作る参考ページ
jQueryに依存せず目次を作るJSの参考ページ
目次を自動生成してくれるMovableTypeのプラグイン
jQueryに依存しているプラグインで、toc.jsと同じ感じ。
hタグに自動でIDを割り当ててくれるMovableTypeのプラグイン
IDを割り振るだけで目次を生成してくれるわけではない。