Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法

テーマCocoonでは、目次をサイドバーに固定して追従させることができます。しかし、目次の項目が多くなると、全ての項目が表示されずに使いにくくなることも。

この記事では、目次に垂直スクロールバーを設置してより使いやすくする方法をご紹介します。

Cocoonで目次追従を設定する方法（簡単）

まず目次追従について。サイドバーに目次を表示したときに、記事を下にスクロールしても目次が固定されて表示される仕組みのことを言います。

追従という言葉を聞くと難しそうな感じがしますが、実はこの目次追従を設定するのはCocoonだととても簡単です。

管理画面の外観→ウィジェット→サイドバースロール追従に目次を追加するだけ！（ドラッグ＆ドロップ）

この操作だけで追従するようになります。

追加した目次をクリックすると簡単な設定ができるようになっています。

1. 表示するタイトル
2. 表示する目次の階層
3. 表示設定

Cocoon目次追従が途中で見切れる原因

目次数が少ないときは問題ありませんが、目次の項目が多くなると全ての項目が表示されずにはみでた部分が見切れたようになってしまいます。

Cocoon目次追従にはプロパティposition:stickyが使われている

この現象が起こる原因として、サイドバーの目次追従にposition:stickyが使われていること。

CSSのプロパティのひとつです。

このため、最後までスクロールされればきちんと目次の最後までは動いて全部が見えるのですが、はじめに目次の位置で留まった段階では途中で見切れているように見えてしまいます。

この動き方の特性上、見切れていると感じる人は多いはず…

対策

1. 目次項目を少なくする
   • 記事の質を維持するために現実的ではない
2. 表示する階層を制限する（例：h2のみ表示）
   • 目次階層を制限しても長くなる可能性あり
3. 目次にスクロールバーを置く
   • 使いやすく、目次階層を変更する必要がない

見切れていると感じる対策として、③の目次の縦方向にスクロールバーを設置。目次に表示領域（高さ）を設定し、長い場合は目次内でスクロールができるようにします。

目次追従に垂直スクロールバーを設置するCSS

スクロールバーを設置するためにこちらのCSSを追加します。

.widget_toc{
	max-height: 800px; /* 目次の高さを調整 */
	overflow-y: auto; /* 垂直スクロールバーを有効にする */
}

このCSSコードは、目次の高さを300pxに制限し垂直スクロールバーを追加します。必要に応じて、max-heightの値を変更して、目次の高さを調整してください。

• overflow-y: auto; にすることで、max-height プロパティで設定した高さを超える場合にのみ垂直スクロールバーが表示されます。
• 高さを調整しないとうまくスクロールバーが表示されないので注意しましょう。

Cocoon目次追従に設置したスクロールバーの動作確認

このコードを追加すると、このようにサイドバー目次の右側に垂直スクロールバーが設置されます。

実際の動作確認は、目次数の多いこちらの記事をご覧ください。

スクロールバーのスタイルを調整するカスタマイズ

必要に応じて、スクロールバーのスタイルもカスタマイズできます。

サイト内すべてのスクロールバーに適用

/* スクロールバーのスタイルを調整 */
::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}

サイドバー内目次に限定したスクロールバーに適用

上記CSSではサイト内すべてのスクロールバーに反映されるため、サイドバー目次に限定するときはセレクタ部分を変更してくださいね。

/* スクロールバーのスタイルを調整（サイドバー目次） */
.widget_toc::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

.widget_toc::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

.widget_toc::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

.widget_toc::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}

まとめ

Cocoonテーマの目次に垂直スクロールバーを追加することで、目次の項目が多い場合でも使いやすくなります。CSSを使って簡単に実装できるのでぜひお試しください。