Cocoon目次が見切れる原因と解決方法｜サイドバー追従目次をスクロール対応にするCSS

Cocoonテーマでは、記事の目次をサイドバーに追従表示（スクロール固定）できます。長い記事でも見出しへすぐジャンプできるため、回遊率や読みやすさの向上に効果的です。

ただし、見出しが多い記事では目次が途中で見切れてしまう問題が起こることも。

この記事では、

• Cocoonでサイドバー目次を追従表示する方法
• 目次が見切れる原因
• CSSでスクロール対応する方法

を初心者向けに分かりやすく解説します。

CSSでCocoonの目次をスクロール対応にする

まず結論です。

このCSSを追加すると、Cocoonのサイドバー目次が「追従＋スクロール対応」になります。

.toc-widget-box {
  max-height: 70vh;
  overflow-y: auto;
}

CSSのポイント

覚えるポイントは2つだけです。

max-height

max-height: 70vh;

画面の高さに対して70%まで表示する設定です。

vh（viewport height）は画面の高さを基準にした単位です。そのためPC画面サイズが変わっても自然な高さで表示されます。

overflow-y

overflow-y: auto;

縦方向にスクロールを表示します。

auto のため

• 必要なときだけスクロールバー表示
• 通常は表示されない

というスマートな動作になります。

Cocoonでサイドバー目次を追従表示する方法

Cocoonではプラグイン不要で、ウィジェットを配置するだけで追従目次を作れます。

手順は以下です。

1. WordPress管理画面を開く
2. 「外観」→「ウィジェット」をクリック
3. 「サイドバー追従（スクロール追従領域）」のウィジェットエリアを探す
4. 「目次」ウィジェットをドラッグ＆ドロップ
5. 保存

これだけで、記事をスクロールしてもサイドバーの目次が画面に固定表示されるようになります。

目次ウィジェットでできる設定

目次ウィジェットでは、次のような設定もできます。

• 目次タイトル（例：記事の内容）
• 表示する見出し（H2のみ / H2＋H3など）
• 表示ページ設定（投稿・固定ページなど）

記事構成に合わせて調整すると、より読みやすい目次になります。

Cocoonの目次が見切れる原因

サイドバーに追従目次を設置すると、記事によっては目次の下側が見切れてしまうことがあります。

これは Cocoonの不具合ではなく、CSSの仕様によるもの です。

position: sticky の仕組み

Cocoonのサイドバー追従は、CSSのposition: stickyという機能で実現されています。

この仕組みは次のように動きます。

• 通常は通常の位置に表示
• スクロールすると一定位置で固定
• 画面内で追従表示を続ける

JavaScriptを使わず、CSSだけで追従表示できる軽量な仕組みです。

なぜ目次が途中で隠れるのか

原因は親要素の高さ制限にあります。

position: sticky には次の特徴があります。

• 親要素の範囲内でのみ固定される
• 親要素の高さを超えると表示できない

つまり、目次が長いと次のような状態になります。

このため、目次の下側が見切れてしまうことがあります。

まとめ｜目次が長くても安心！Cocoonでのスクロールバー設置は簡単

サイドバー目次の見切れはCSSの仕様が原因です。

スクロール対応のCSSを追加すれば、長い目次でもすべて表示できます。

目次は記事の案内板のような存在。

見出しへすぐ移動できる導線を整えることで、記事の読みやすさや回遊率も向上します。

CSSの基本を知りたい方はこちら
→ CSSでブログデザインを変更する方法