【cocoon】目次の横幅を広げる「最大幅の解除」方法

どうも。ひま子です。

cocoonの目次の横幅を広げたい！

なのに横幅を広げるコードだけでは全然広がってくれない！

そんな私と同じ悩みを抱えている人に、「最大幅の解除」方法を紹介します。

目次の横幅を広げたい

cocoonの初期設定では、目次がシュッとなっていると思います。

パソコンではあまり気にならないかもしれませんが、スマホだと

さらに細長くなってめちゃくちゃ見にくい。

自分で読んでても嫌だわ。

というわけで、目次の横幅を広げていきましょう。

最終的にはこうなります。

スマホだとこんな感じ。めちゃくちゃ見やすくなりました。

ただ、こうするには横幅を広げるコードだけでは無理だったりします。

実際私がそうでした。

横幅を広げるコードをいろいろと入力しても目次が広がらない。

ただこれは、「最大幅の解除」をしていなかったせいだと判明しました。

.entry-content .toc {
width: 90%;
/* 最大幅を解除 */
max-width: unset;
}

このコードを、[外観]→[Cocoon Child: スタイルシート (style.css)］に追加して、「ファイルを更新」を押してください。

[追加CSS]じゃないからね！

そして目次を確認してみましょう。

おめでとうございます。美しく広がった目次とのご対面です。

「width: 90%」のパーセンテージを変えれば、横幅をカスタマイズできます。

私は90％くらいが好きだったので、その数値にしました。

あなたの好きな数値が見つかるまでいろいろ試してみてください。