WordPressテーマ「Cocoon」で目次をサイドバーに設置してスクロール追従させる方法

WordPressテーマ「Cocoon」で目次をサイドバーに設置してスクロール追従させる方法

今回は、WordPressの記事ページで、サイドバーに「目次」を設置して、「目次」がページをスクロールしても追従してくるように設定する方法を紹介します。

「目次」の機能は、ページの内容が分かりやすくなったり、見たい箇所までスキップできたりと、便利な機能ですが、簡単な設定をするだけで、記事を下までスクロールしてもスクロール追従をして、常に見える範囲内に「目次」があって、クリックできる状態にする事が出来ます。

今回は、WordPressテーマ「Cocoon」を有効化にしている事が前提条件になります。

「Cocoon」ですとデフォルトで「目次」機能がありますのでプラグイン不要で設定が出来ます。

「Cocoon」のインストールについてはこちらの記事を参考にしてください。→　WordPressテーマCocoonをインストールして有効化するまでの手順

また，デフォルトで「目次」機能が付いていないテーマを使っている人は，プラグインでの目次の設置ができます。

プラグインを使った目次の設定方法についてはこちらの記事を参考にしてください。

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

それでは、やってみましょう。

「Cocoon設定」で「目次」の設定をする

まずは、管理画面で「Cocoon設定」を選択します。

「目次」をクリックします。

すると下の画面になるので、必要箇所にチェックを入れます。

特に、「目次を表示する」にはチェックを入れましょう。

• 目次を表示する　→　チェック
• 表示ページ　→　全てチェック
• 目次タイトル　→　目次　
• 目次切り替え　→　チェック　

  • 開：（開く）
  • 閉：（閉じる）
  • 最初から目次内容を表示する　→　チェック
• 表示条件　→　2つ以上の見出しがあるとき
• 目次表示の深さ　→　H6見出しまで（デフォルト）　
• 目次ナンバーの表示　→　数字（デフォルト）
• 目次の中央表示　→　チェック
• 目次の表示順　→　チェック無し
• 見出し内タグ　→　チェック無し

設定が完了したら「変更をまとめて保存」をクリックします。

サイドバーに「目次」を設置してスクロール追従の設定を完了させる

次に、管理画面から①「外観」→②「ウィジェット」と選択します。

「目次」をクリックします。

①「サイドバースクロール追従」を選択→②「ウィジェットを追加」をクリックします。

①「タイトル」を編集→②「目次表示の深さ」を選択→③「保存」をクリックします。

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

これで「サイドバースクロール追従」に「目次」が追加されました。

確認のため、記事ページを開いて、「目次」がある箇所から画面下にスクロールしていくと、「目次」が画面下まで追従しているのが分かります。

まとめ

画面を下の方にスクロールしても常に目次をクリックできる状態にしていると，サイトを見ている人にとっての利便性が上がります。

今回は以上になります。

それではまた！