可読性がぐっと向上！Luxeritasで目次を記事横に追従表示させる方法

2021年1月24日

ブログ記事に目次をつけることは、記事の可読性が向上しますしSEO上も有利と言われています。

目次は記事の最初のほうに表示するのが普通ですが、さらに追従型サイドバーにも設置して常に記事横に目次を表示すれば、ぐっと記事の可読性が上がりますよね。

そこで本記事では、テーマLuseritasにおいて、目次を記事横に追従表示させる方法について解説します。

追従型サイドバーに目次以外のコンテンツを表示させる時に便利なカスタムCSSも紹介しますので、最後まで目を通してくださいね。

目次を追尾表示させる手順概要

手順概要は以下の通りです。

１．目次ウィジェットをスクロール追従サイドバーに設置する
２．目次自体の設定をする
３．カスタムCSSでさらに可読性を向上させる

それでは順番に解説していきましょう。

目次ウィジェットをスクロール追従サイドバーに設置する

ダッシュボードメニューの　外観＞ウィジェット　を開いて、次のように目次ウィジェットをスクロール追従サイドバーにドラッグ＆ドロップで設置します。

これだけで、目次がサイドバーに表示されるようになります。

目次の設定

この作業は、すでに目次を記事に表示させる設定をしている場合は特に必要ありませんが、念のために設定方法を紹介しておきます。

ダッシュボードメニューの　外観＞カスタマイズ＞目次　で設定することができます。

• 目次を表示させる見出しの最低数
• 投稿・固定ページの選択
• 見出しのどの階層まで目次に反映させるか
• 目次を開いて開始するか閉じておくか
• 目次の文字や背景色

・・・など、いろいろ設定できるようになっていますので、好みで設定してください。

ブログ記事をWeb表示させてサイドバー目次を確認

これで、目次がサイドバーに表示され、記事を下にスクロールしても追従してくるようになります。

常に記事横に追従してくるので、記事の可読性がぐっと向上しますよね。

カスタムCSSでさらに可読性を向上させる

しかし、次のように記事の文面が多く、目次も長くなってしまうと、画面下で途中から切れて見えなくなってしまいます。

これではせっかく目次が記事横にあっても途中で使えなくなり、逆にユーザーをいらいらさせてしまいかねません。

そこで、カスタムCSSで、目次が画面に入らない場合は、縦のスクロールバーをつけるようにしましょう。

次のCSSを子テーマのstyle.cssに追記します（ダッシュボードメニューの外観＞テーマエディター）。

#thk_toc_widget-2 {
	overflow-y: auto;
	max-height: 100vh;
}

セレクターの#thk_toc_widget-2ですが、これは当サイトの場合です。最後の数字（当サイトでは2）は、自動的にウィジェットに割り当てられていく数字ですので、実際の自分のサイトをGoogle Chromeの開発者ツールを使って確認して変更してください。

簡単に確認手順を示しておきますと、以下の通りです。

①Google Chromeの開発者ツールを開ける
②開発者ツール左上の要素選択ボタンをクリックする
③目的のウィジェット全体が選択された状態でクリック
④ウィジェットを示すHTML要素が網掛け表示されるので、その中のid名を確認する

以上のようにカスタムCSSを適用する方法については、以下の記事で詳しく解説しています。

無事にカスタムCSSが適用されると、画面からはみ出した場合に縦スクロールがウィジェットに表示されて、目次が縦スクロールできるようになります。

これで記事の可動性がより向上し、ユーザーのいらいらも解消できます。

まとめ

目次を追従型サイドバーに表示させることで、記事をより読みやすくする方法について解説してきました。

目次が長くなって画面からはみ出した場合でも、縦スクロールをつけておけば、可読性を向上することができます。

追従型サイドバーに目次以外のコンテンツを表示させる場合でも応用できる手法ですので、覚えておくとよいでしょう。