WordPress

WordPressで目次をサイドバーに設置してスクロール追従させる方法【TOC+】

2020年12月5日

WordPressで目次を設置するプラグイン「Table of Contents Plus(TOC+)を使っている人は多いですが,

デフォルトですとこの目次は,下の画像のように,最初の見出しの下に表示されます。

悩む人
この目次って,サイドバーに固定で設置することはできますか?
実はこの目次は,投稿や固定ページの他にサイドバーに固定で設置することが可能です。
ヒロシ

目次をサイドバーのスクロール追従スペースに設置すると,

  • サイドバーに目次があることで,書かれている内容が分かりやすい
  • 長い文章は戻りたい部分まで戻れる
  • 記事が読みやすくなる

などのメリットが生まれます。

今回は,WordPressの記事ページで目次をサイドバーに設置してスクロール追従させる方法を紹介します。

関連

また,今回の記事は目次プラグイン「Table of Contents Plus」(TOC+)を導入していることが前提になりますので,もしまだTOC+を使っていないという人は,

WordPressプラグイン「Table of Contents Plus」の設定と使い方

で詳しく解説していますので,参考にしてください。

関連記事
WordPressプラグイン「Table of Contents Plus」の設定と使い方

続きを見る

また,テーマ「Cocoon」ですと,デフォルトで目次機能が備わっています。

ウィジェットでTOC+をサイドバーのスクロールエリアに設置する

WordPressプラグインの記事での見出し2用の画像

まずは,管理画面から

  1. 「外観」から
  2. 「ウィジェット」をクリックします。

「TOC+」をクリックします。

(または,ドラッグ&ドロップで追従するサイドバーへ移動させる)

設置するエリアを選択します。

  1. 追従するサイドバー(ここではスクロール広告用)を選択します。
  2. 「ウィジェットを追加」をクリックします。

使っているテーマによって,サイドバーの名前が違います。

例:

Cocoon サイドバースクロール追従
WING(AFFINGER5) スクロール広告用

当ブログでは現在のテーマがWING(AFFINGER5)ですので,スクロール広告用になっています。

参考

「WING(AFFINGER5)」は,SEOに強く収益が発生しやすいと評価されていて,稼ぐことに特化した人気のあるWordPress有料テーマです。

WING(AFFINGER5)について詳しく知りたいという人は,

WordPressテーマ「WING(AFFINGER5)」の購入とインストールの手順

で詳しく解説していますので,参考にしてください。

参考記事
WING(AFFINGER5)【メリットとデメリットは?】購入とインストールの手順

続きを見る

サイドバーのスクロール広告用で,

  1. タイトルを編集します。(ここでは,「目次」)
  2. 「保存」をクリックします。

「完了」をクリックします。

これでOKです。

目次がサイドバーでスクロール追従されているか確認

WordPressプラグインの記事での見出し2用の画像

反映されているか確認してみましょう。

記事のページでサイドバーに目次が設置されています。

画面を下までスクロールしていくと,

記事の一番下のフッターあたりまで,目次が固定に表示されています。

ちゃんと反映されています。

まとめ

WordPressプラグインの記事での見出し2用の画像

サイトのページで常に目次をクリックできる状態にしていると,記事が見やすくなってサイトを見ている人にとっても利便性が上がります。
ヒロシ

参考

また,WordPressでおすすめのプラグインが知りたい人は,

WordPressおすすめのプラグインまとめ【最適なものを厳選】

で詳しく解説していますので,参考にしてください。

参考記事
WordPressおすすめのプラグインまとめ【最適なものを厳選】

続きを見る

今回は以上になります。

それではまた!

  • この記事を書いた人
  • 最新記事

ヒロシ

ヒロシです。
現在は会社員としてエンジニアの業務を行っています。
担当業務は主に、WordPressサイト開発、改修です。
ブログやプログラミング学習で役に立つ情報を発信しています。

-WordPress

Copyright © ヒロシブログ 2020