Cocoonの目次をSANGO風にカスタマイズして有料テーマに空目させる方法

Simplicityを継いだ最強無料テーマとしてリリース後大人気のCocoon。ワードプレスカスタマイズマンたちがこぞって記事を上げてくれる中、僕も目次をいじってみました。

スポンサーリンク

Cocoonの目次を使う

これまで、Simplicityなどでは目次用のプラグインを使用して目次を表示させていました。が、今回のCocoonにはデフォルトで自前の目次機能が搭載されているのでそちらをカスタマイズしていきます。

本好きのねこ
本好きのねこ

プラグインがいらなくなって簡単&軽量化!

スポンサーリンク

SANGO風の目次

行き当たりばったりでやっても変な風になる可能性の方が高いので、最初からデザインの整っている有料テーマを参考にしてみます。目次のインパクトで言えばSANGOのデザインがいい感じだったので真似させていただきました。

スポンサーリンク

Cocoon設定の変更

最終的にはcssでデザインを整えていきますが、まずは下準備としてCocoonの設定でデフォルトの目次デザインを少しだけ変更しておきます。

Cocoon設定の画面から目次タブを選択し、上記画像のように「目次ナンバーの表示」項目を「表示しない」にしておきます。その他の項目はお好みで大丈夫です。

CSSでデザイン

style.cssに目次のデザインに関する記述をしていきます。

本好きのねこ
本好きのねこ

カスタマイズは必ず子テーマを使いましょう!

全体をデザインする

まずは全体のデザイン。薄くグレーの背景色にして影も付けてそれっぽいかたちにします。文字色を指定し、文字の装飾もなくしておきます。

目次箇条書き部分

目次のテキスト前に表示される数字を「表示しない」に設定したので、代わりにドットを表示します。文字との距離をちょうどいい間隔にすると見やすいです。

目次のアイコンを表示

SANGO風の目次に見せるために一番大事な部分だと思います。Font Awesomeを使ってアイコンを表示させ、丸く囲んでかわいい感じに表示させます。

完成図

上記のようなカスタマイズでできた目次がこれです。それっぽくなったのではないでしょうか。目次として参照しやすく、かつスルーされにくいインパクトのある見た目だと思います。

まとめ

自由度の高いCocoonですが、デフォルトの状態では味気なさすぎるのでこういったカスタマイズでブログを装飾していきたいですね。パッと見で、この人は有料テーマ使ってるのかな?と思わせることもできるかも知れないデザインです。

本好きのねこ
本好きのねこ

まあそこにあまり意味はないですが…よかったら参考にしてみてください。

コメント