【Cocoon】長すぎて見切れてしまうサイドバーの目次をスクロールできるようにする方法

こんにちは、ゆんつです。

WordPressのテーマ「Cocoon」には目次の作成機能があり、プラグインを導入しなくても目次を作成することが出来ます。

目次ウィジェットも用意されており、サイドバースクロール追従に目次ウィジェットをセットすることで、本文のスクロールにあわせて目次も追従してきます。

目次はシンプルな記事であれば項目が少ないですが、長い記事になると項目が増えて長くなってきます。

そうなると生じるのが

サイドバースクロール追従に設置した目次が見切れてしまう

という問題です。

こうなってしまうと、記事を読んでいる最中は目次の途中までしか表示されず、ページの終わりまで行かないと目次の最後の項目が表示されないということになってしまいます。

これでは、目次が意味をなしません。

こういう場合の解決方法として、

目次自体をスクロール可能なものにして、見切れてしまう目次を表示できるようにする

という解決方法があります。

今日は

Cocoonでサイドバーに設置した追従する目次をスクロールできるようにする方法

について書きたいと思います。

作業の前にバックアップを

目次をスクロールできるようにするには、Cocoonの子テーマのCSSに目次をスクロールできるようにするためのコードを追加する必要があります。

CSSはサイトのデザインを設定するものなので、失敗するとサイトのデザインがおかしくなる可能性があります。

ですので、作業を行う前にプラグインなどでバックアップを取り、失敗しても元に戻せるようにしておきましょう。

WordPress管理画面の左メニューから「外観」⇒「テーマファイルエディター」をクリック。

すると、「テーマを編集」という画面が開くので、画面右側の「編集するテーマを選択」が「Cocoon Child」、「テーマファイル」が「スタイルシート（style.css）」になっていることを確認します。

確認が終わったら、コードの記述欄に以下のコードをコピーして貼り付け、画面下部にある「ファイルを更新」ボタンをクリックします。


.widget-sidebar-scroll .toc-content {
  max-height: 350px; /* 目次の高さの上限を設定 */
  overflow-y: auto; /* 目次の長さが設定した目次の高さを超える場合はスクロールできるようにする */
}

ゆんつ

目次の高さを変えたい場合は、max-heightの数値を調整してください

このコードにより、サイドバー追従の目次の長さが設定した目次の高さの上限を超えるときはスクロールバーが表示され、ページを最後まで見なくても目次の最後の項目を確認することが出来るようになります。

ちなみに、目次の長さが設定した目次の高さに満たない場合には、目次の高さは目次の長さに合うように縮むようになっています。

overflow-yの値は「auto」だけでなく「scroll」というのもあり、両者には

という違いがあります。

ですので、もし目次が長かろうが短かろうが常にスクロールバーを表示しておきたい場合、overflow-yの値はautoではなくscrollにしてください。

何かの参考になれば幸いです。

それでは、またー。