【Cocoon】「目次」デザインをCSSでおしゃれにしてみた（コピペ可）

WordPressのCocoonテーマでの「目次」をカスタマイズしてみました。

少し前までは拾い物のCSSを貼り付けていただけなのですが、少し色を変えたいなと思いちょっぴりカスタマイズしています。

綺麗なデザインの方が読みやすいですよね

設定の仕方とともにCSSも貼り付けておくので、気に入られたらそのままご使用ください。

できあがりのイメージ

まずはできあがりのデザインイメージです。

やさしい色の目次にしてみました。

北欧系の色が淡く優しいので好きです。

CSSをスタイルシートへ貼付けよう

CSSはどこに貼り付ければいいの？

ここから、CSSをどこに貼り付ければよいかを説明します。

「外観」→「テーマの編集」クリックします。

右端の項目から「スタイルシート」を選択します。

下図の欄にCSSを貼り付ければOKです。

貼付け後は忘れずに「ファイルの更新」を押してください。

失敗しても元に戻せるように、バックアップを取りながら作業してくださいね！

CSS（コピーしてご使用ください）

CSSを「スタイルシート」内に貼り付けて更新すれば目次のデザインが変更されます。

以下のCSSをコピーして貼り付けてみてください

まとめ

デザイン性の高いブログの方が、ノイズが無く内容を理解しやすいですよね。

文字の大きさや色などは、CSS内の数値をいじれば変更できます。

まだまだ私も勉強中ですが、参考にしていただけると幸いです。