ブログに目次をつけるメリット・デメリット、Qiita風の追随する目次ライブラリ
ブログに目次をつけるメリット・デメリット。目次を表示するJavaScriptのライブラリTocbotの設置方法をご案内します。
目次をつけるメリット・デメリット
ブログ記事に目次をつけるメリット、デメリットについては以下があります。
SEO効果
よく受ける質問の一つです。
目次があることでユーザーは読みたい箇所にジャンプできますし、離脱率を抑えることもできます。目次があることでユーザーの利便性（UX）が向上して、結果的にGoogleの評価が上がることになります。
目次があることでSEO効果がある訳ではないので、ユーザーの利便性や関連性を考慮した目次をつけることが重要になります。
記事によっては、構造化データと目次のアンカーリンクを設定することで、インデックスを促すことや、強調スニペットとして表示される可能性を高めることができます。（あくまでも可能性を高めるだけです）
UXの向上
目次とはユーザーの利便性(UX）の為にあるので、読み手の視点で目次を構成する必要があります。
ユーザーは目次を利用してるの？
という疑問が出てくると思います。
複数のウェブサイトの記事にヒートマップを設置して調べたところ「そこそこ利用されている」という結果でした。
目次のデザインや配置場所などの条件によって異なりますが、すくなからず目次はユーザーに役立っています。
目次によるデメリット
文字が少ない記事に目次は不要です。かえって邪魔になるだけです。
記事を読み飛ばさずに読んで理解してもらいたい記事の場合は、目次があることがデメリットになります。
記事の内容や目的に合わせて、目次を表示・非表示できるようにしておいた方が良いでしょう。
目次を表示させるお薦めの方法
WordPressの場合、目次を表示させるプラグインがありますが当社ではJavaScriptを利用して表示させています。プラグインを利用するまでも無く、表示のコントロールもしやすいからです。
Tocbotで目次を表示させる
もし、JavaScriptのライブラリを利用する場合は「Tocbot」がお薦めです。
定期的にアップデートされており、高機能で設定も簡単です。
目次をサイドバーに設置して追随させると、Qiita風の目次もできます。
Tocbotの設置方法
Tocbotの設置は簡単です。
今回はQiita風に目次をサイドバーに表示させて追随させてみます。
CDNを利用する場合はJavaScriptとcssファイルを読み込みます。デザインをカスタマイズする場合はcssは不要でしょう。
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.js"></script>基本となるjavascriptを追記します。
javascript
tocbot.init({ tocSelector: '.js-toc', //目次を表示させるセレクター contentSelector: '.js-toc-content', //文章が記載されている箇所 headingSelector: 'h1, h2, h3', //目次となる見出しタグ});目次を表示させる箇所にクラス「class="toc js-toc"」を追記します。
文章を記載した箇所に「class="js-toc-content"」を追記します。
HTML
<div class="js-toc-content"> <h1 id="topic1">ダミー見出しテキストH1</h1> <p>ダミーテキストテキストテキスト</p> <h2 id="topic2">ダミー見出しテキストH2</h1> <p>ダミーテキストテキストテキスト</p> <h3 id="topic1">ダミー見出しテキストH3</h3> <p>ダミーテキストテキストテキスト</p> <h4 id="topic4">ダミー見出しテキストH1</h4> <p>ダミーテキストテキストテキスト</p></div><div class="toc js-toc"></div>以上でサイドバーに目次が表示されます。
見出しに合わせて、目次もアクティブになります。
Tocbotのカスタマイズ
目次を追記させる場合は、独自にCSSのstickyプロパティを利用することもできますが、Tocbotではjavascriptのプロパティが用意されています。
javascript
tocbot.init({ tocSelector: '.js-toc', contentSelector: '.js-toc-content', headingSelector: 'h1, h2, h3, h4, h5', positionFixedClass: 'is-position-fixed'});htmlに「is-position-fixed」追記します。
HTML
<div class="toc js-toc is-position-fixed"></div>これで目次がスクロールに追随するようになります。
Tocbotには、いろいろなプロパティが用意されているので目的に合わせてカスタマイズすることができます。
よく使うプロパティとしては下記があります。
ズレを調整するオフセット
ヘッダーを固定している場合などに、目次のアンカーがズレる時があります。
「headingsOffset:」を追加することで調整することができます。
javascript
headingsOffset: 100目次の折りたたみを調整する
目次は自動的に折りたたまれますが、折りたたみの調整をすることができます。
例えば、2段階まで折りたたむ、4段階まで折りたたむなどの指定ができます。
javascript
collapseDepth: 3数値を「6」にすると折りたたまずに表示されます。
デフォルト値は「0」です。
Tocbotに用意されているプロパティは下記になります。
プロパティ
// 目次をレンダリングする場所。tocSelector: '.js-toc',// 目次を作成するために見出しを取得する場所です。contentSelector: '.js-toc-content',// contentSelector 要素の中に取り込む見出しを指定します。headingSelector: 'h1, h2, h3',// ignoreSelector にマッチする見出しはスキップされます。ignoreSelector: '.js-toc-ignore',// コンテンツ内の相対配置または絶対配置のコンテナ内にある見出しの場合hasInnerContainers: false,// リンクに追加するメインのクラスです。linkClass: 'toc-link',// リンクに追加するエクストラクラス。extraLinkClasses: '',// アクティブなリンクに追加するクラスです。// ページの一番上の見出しに対応するリンクです。activeLinkClass: 'is-active-link',// リストに追加するメインクラスlistClass: 'toc-list',// リストに追加するエクストラクラスです。extraListClasses: '',// リストが折りたたまれるべき時に追加されるクラス。isCollapsedClass: 'is-collapsed',// リストが折り畳まれるべき時に追加されるクラスです。// 折りたたまれるべきだが、必ずしも折りたたまれていない場合に追加されるクラスです。collapsibleClass: 'is-collapsible',// リストアイテムに追加するクラスです。listItemClass: 'toc-list-item',// アクティブなリストアイテムに追加するクラスです。activeListItemClass: 'is-active-li',// 見出しのレベルを何段階まで折り畳まないかを指定します。// 例えば、6番だと全てを表示します。// 見出しレベルが6つしかないので、6を指定するとすべて表示され、0を指定するとすべて折りたたまれます。// 非表示になっているセクションは// 非表示にされたセクションは、その中の見出しまでスクロールすると開いたり閉じたりします。collapseDepth: 0,// スムーズなスクロールを有効にします。scrollSmooth: true,// スムーズなスクロールの期間。scrollSmoothDuration: 420,// スムーズなスクロールのオフセット。scrollSmoothOffset: 0,// スクロール終了のコールバック。scrollEndCallback: function (e) {},// 見出しとドキュメントの先頭との間の見出しオフセット (これは微調整のためのものです)。headingsOffset: 1,// イベントが発生するまでのタイムアウトは、次のようにします。// 急激すぎないようにします (パフォーマンス上の理由から)。throttleTimeout: 50,// positionFixedClass を追加する要素。positionFixedSelector: null,// スクロールした後にサイドバーを固定するために追加する位置固定クラス// fixedSidebarOffset を超えて下にスクロールした後にサイドバーを固定するために追加する固定位置クラスです。positionFixedClass: 'is-position-fixed',// fixedSidebarOffset には任意の数値を指定できますが、デフォルトでは// 固定されたSidebarOffsetをサイドバーに設定します。// 要素の offsetTop に設定されます。fixedSidebarOffset: 'auto',// includeHtmlをtrueに設定すると、見出しノードからのHTMLマークアップを含むことができます。// 見出しノードのHTMLマークアップを含めるために、trueに設定することができます。includeHtml: false,// toc.内のすべてのリンクに適用される onclick 関数は、イベントを第一パラメータとして // 呼び出されます。// イベントを最初のパラメータとして呼び出され、これを利用して // 伝播の停止、デフォルトの防止、実行を行うことができます。// 伝播、デフォルトの防止、アクションの実行に使用できます。onClick: function (e) {},// orderedListをfalseに設定すると、順序付きリスト(ol)ではなく、順序なしリスト(ul)を生成できます。// 順番付きリスト(ol)の代わりにorderedList: true,// 固定の記事スクロールコンテナがある場合は、タイトルのオフセットを計算するために設定します。scrollContainer: null,// 外部システムによって既にレンダリングされている場合、ToC DOM のレンダリングを防ぐskipRendering: false,// 見出しラベルを変更するためのオプションのコールバック。// 例えば、長すぎると思われる複数行の見出しをカットして楕円形にするのに使用できます。// 見出しが解析されるたびに呼び出されます。見出しが解析されるたびに呼び出されます。戻り値として、表示するラベルを変更した文字列を受け取ります。// 関数 (文字列) => 文字列headingLabelCallback: false。// DOM で隠れている見出しを無視します。ignoreHiddenElements: false,// 解析された見出しのプロパティを修正するためのオプションのコールバックです。// 見出し要素は node パラメータで渡され，デフォルトパーサで解析された情報は obj パラメータで提供されます。// 関数は，同じまたは修正された obj を返さなければなりません．// 何も返されない場合，その見出しは TOC から除外されます．// function (object, HTMLElement) => object | voidheadingObjectCallback: null,// ベースパスを設定します。`head`の中で`base`タグを使う場合に便利です。basePath: '',// `tocSelector` がスクロールしているときにのみ影響します。// tocのスクロール位置をコンテンツと同期させます。disableTocScrollSync: falseTocbotのプロパティ詳細ページも合わせてご参考ください。
ちなみにTocとはTable of Contents（目次）のことです。目次をうまく活用してUXを向上させてみてください。
