Cocoon｜サイドバーに目次を追従させる

WordPress 無料テーマ『Cocoon』のサイドバーに、記事の目次を追従させる（スクロールするとついてくる）カスタマイズ方法をご紹介します。

記事のポイント

お気に入りのカスタマイズなので当サイトでも適用中です！

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

Cocoon のサイドバーに目次を追従させるカスタマイズ後のイメージ動画

デモ動画

ざっくり手順

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、引き続き『詳しい手順』をご覧ください。それぞれの手順を画像付きで解説しています。

詳しい手順

『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

【外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【ウィジェット】をクリックしてください。

これだけでも目次がサイドバーに追従するようになります。

ここからは任意で設定していただければと思いますが、【[C] 目次】ウィジェットの内容を詳しく見ていきます。

ウィジェットの見出しはデフォルトでは『記事の目次』となっています。もし見出しの内容を変更したい方は【タイトル】に入力してください。

また「どのレベルの見出しまで目次を表示させるか」といった、目次を表示する深さも設定できます。デフォルトではH2見出しまでとなっていますので【目次表示の深さ】をお好みで変更してください。

ただ、注意書きにもあるように、Cocoon設定「目次」タブの「目次表示の深さ」で表示されていないものは表示できないので気をつけましょう。

設定を変更したら、忘れずに【完了】をクリックし保存してください。