今回は目次部分の操作性を改善するカスタマイズ。
具体的にはサイドバー目次に垂直スクロールバーをつけていきます。
実装したきっかけは当ブログを見てくださった方からお問い合わせがあったこと。
どんな状態なのかをパソコンで確認してみると…

確かに途中からサイドバー目次が一旦固定されてはみ出た部分が見えなくなってる。
ということで改善していきます。
- Cocoonサイドバーの目次を追従させる方法
- サイドバーの目次に縦スクロールバーをつける方法(CSS)
- スクロールバーのデザインを調整する方法(CSS)
Cocoon目次追従とは
まず目次追従について。
サイドバーに目次を表示したときに、記事を下にスクロールしても目次だけが固定されて表示される仕組みのことを言います。

記事が長いときなど、サイドバーの目次からすぐ見たいところへ戻れるので便利!
Cocoonで目次追従を設定する方法(簡単)
追従という言葉を聞くと難しそうな感じがするけど、実はこの目次追従を設定するのはCocoonだととても簡単です。
管理画面の外観→ウィジェット→サイドバースロール追従に目次を追加するだけ!(ドラッグ&ドロップ)

この操作だけで追従するようになります。
追加した目次をクリックすると簡単な設定ができるようになっています。
- 表示するタイトル
- 表示する目次の階層
- 表示設定

Cocoon目次追従が途中で見切れる原因
ここで冒頭の問題に戻るのですが…
記事が短く目次数が少ないときは問題ありませんが、表示する目次が多いと途中で見切れてしまうんですよね。

Cocoon目次追従にはプロパティposition:stickyが使われている
この現象が起こる原因として、
サイドバーの目次追従にposition:stickyが使われていること。
CSSのプロパティのひとつです。
- 画面をスクロールして目次の位置に到達するとそこに留まる
- 長くなった続きの部分はある程度ページスクロールしてから、ようやく動きだして見えるようになる
このため、最後までスクロールされればきちんと目次の最後までは動いて全部が見えるのですが、はじめに目次の位置で留まった段階では途中で見切れているように見えてしまいます。
この動き方の特性上、見切れていると感じる人は多いはず…
対策/縦方法にスクロールバーを設置する
ここでの対策として、
- 記事を短くする
- 表示する階層を制限する(例:h2のみ表示)
- 目次にスクロールバーを置く
①は現実的ではなく階層を制限しても長くなる場合を想定して、今回は③の目次の縦方向にスクロールバーを設置してみることに。
目次に表示領域(高さ)を設定し、長い場合は目次内でスクロールができるようにします。
Cocoon目次追従にスクロールバーを設置するCSS
こちらのCSSを追加しました。
.widget_toc{
overflow-y:scroll;/*縦方向スクロールを設置*/
max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}
.widget_toc(サイドバーの見出し)に、
- overflow-y:scroll;→縦方向にはみ出た分、スクロールバーを設置する
- max-height:calc(100vh – 150px);→100vh(画面いっぱいの高さ)からヘッダーの高さをマイナスし調整した高さを指定

高さを調整しないとうまくスクロールバーが表示されないので注意しましょう。
Cocoon目次追従にスクロールバーが設置されました
このコードを追加したところサイドバー目次の右側に垂直スクロールバーが設置され、動作確認もできました。

スクロールできるときにだけスクロールバーを表示させるための調整
ここまでで完成なのですが少し調整を追加します。
スクロールバーが常時見えてしまう
目次数が少なくスクロールする必要がないときも設置したスクロールバーの背景色が見えてしまっているんですよね…

デザイン的にはスクロールしないときには必要ないので、この薄いグレーの背景色は消して、スクロールするときに動かすつまみの部分だけ残してみることに。
対策/スクロールが必要なときの動かす部分のみに背景色をつける
そうすることで目次項目が少ない記事からスクロールバーは消えて、スクロールが必要な記事だけに表示される状態となりました。

スクロールバーを調整するCSS
今回使用するコードはこちらです。
参考サイト CSSでスクロールバーのデザインを変更する方法
Google ChromeやSafariなど「webkit」を採用しているブラウザ
/*スクロールバー調整(webkitを採用しているブラウザ)*/
.widget_toc::-webkit-scrollbar {
width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
background: #ccc;/*可動部のみ背景色を付ける*/
border-radius: 10px;
}
Firefoxの場合はこちらが有効
Firefoxは、次のように記述するとスクロールバーのデザインが変更できます。
/* スクロールバー調整(Firefox)*/
.widget_toc{
scrollbar-width: thin;/* スクロールバーの太さ(細く)、autoでも可*/
scrollbar-color: #ccc transparent ; /* ツマミの色と背景 */
}
- スクロールバーの幅を変えたり細かい調整はできません
- 目次部分限定ではなくサイト全体のスクロールバーに適用させる場合はセレクタ部分(.widget_toc)をhtmlに変更します。
html{
scrollbar-width: thin;/* スクロールバーの太さ */
scrollbar-color: #ccc transparent ; /* ツマミの色と背景 */
}
さいごに
読者の方へご連絡したところ、問題なく動作していることを確認していただきました。

直接こういったご意見をいただけるのはありがたいです。
見やすいブログと利便性を上げたい方はご活用ください。
それではまた。
Comment
目次が長すぎて途切れる原因をわかりやすく伝えていただき、本当にありがとうございました!!
ずっと悩んでたので助かりました<(_ _)>
> MORIさん
はじめまして!
ブログを見てくださりありがとうございます。
記事がお役に立てたようで嬉しいです。