【Cocoon】サイドバーの追従目次で「数字が切れる」問題をCSS1行で解決する方法！

AI活用・PC

2026.05.21

Cocoonでブログを運営していて、

「サイドバーに目次を表示させて、スクロール追従させているけれど、なぜかリストの数字が左側に切れて見えなくなってしまう…」

とお悩みではありませんか？

この問題は、簡単なCSSを数行追記するだけで、初心者の方でも1分で解決できます。

この記事では、初心者でも修正できるように、具体的な修正コードとその手順を優しく解説します。

1. なぜサイドバー目次の数字が切れてしまうのか？

結論から言うと、「サイドバーという狭い枠に対して、数字を表示するための左側の余白（padding）が足りていないから」です。

特にCocoonの標準デザインでは、記事の中央にある大きな目次はきれいに見えるよう調整されていますが、サイドバーの狭いエリアに配置されると、数字が枠の外に追い出されてしまう現象が起こりやすくなります。

2. 【コピペでOK】数字の表示を直す魔法のコード

それでは、解決策です。

以下のCSSコードをコピーして、WordPressの「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けて、「公開」ボタンを押してください。

画像付きの詳しい手順は次章で紹介します。

CSS

/* サイドバースクロール追従エリア内の目次の数字を表示させる */
#sidebar-scroll .toc-content ol, 
#sidebar-scroll .toc-content ul {
    padding-left: 25px !important; /* 左側に余白を作る */
    margin-left: 0 !important;      /* 外側の余白をリセット */
}