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

この記事は約2分で読めます。

 

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

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

 

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

 

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

 

 

できあがりのイメージ

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

 

 

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

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

 



 

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

 

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

 

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

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

 

 

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

 

 

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

 

 

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

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

 

 

CSS(コピーしてご使用ください)

 

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

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

 

 

 

まとめ

 

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

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

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

 



 

コメント

タイトルとURLをコピーしました