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

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

記事のポイント
  • サイドバーに目次を追従できる
  • ユーザビリティーアップ
  • 設定方法は詳しい手順付き

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

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

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

デモ動画

Cocoon のサイドバーに目次を追従させるカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【ウィジェット】をクリックする
  3. [C] 目次 ウィジェットを サイドバースクロール追従 エリアに追加する
  4. [C] 目次 ウィジェットの設定を編集する(任意)

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

詳しい手順

WordPress 管理画面にアクセスする

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

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

【外観】⇒【ウィジェット】をクリックする

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

[C] 目次 ウィジェットを サイドバースクロール追従 エリアに追加する

  1. 利用できるウィジェットの中にある【[C] 目次】をクリックする
  2. サイドバースクロール追従】をクリックする
  3. ウィジェットを追加】をクリックする

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

[C] 目次 ウィジェットの設定を編集する(任意)

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

[C] 目次ウィジェットの説明

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

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

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

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

コメント

タイトルとURLをコピーしました