【Cocoon】カテゴリー表示をカスタマイズしてみました。

フィンテックの波に乗る、フィンテックサーファーです。🏄


カテゴリー表示をカスタマイズしてみました。


初期設定のカテゴリー表示はとても見にくかったので、見やすいカテゴリ表示にカスタマイズしようと思い、いつも通りGoogle先生に聞きました。


使っているWordPressの無料テーマが「Cocoon」なので、『Cocoon　カテゴリー　カスタマイズ』　と検索。


その中から、気に入ったデザインを使っている人のブログを見つけて、記事を参考にしてカスタマイズしてみました。

【Cocoon】カテゴリー表示をカスタマイズする - MASAa.net

INDEX カテゴリー表示テーマCocoonのカテゴリー表示ウィジェット カテゴリー設定カテゴリー表示のカスタマイズカスタマイズ内容カスタマイズ後のカテゴリー表示最後に カテゴリー表示 WordPressテーマ Coco

masaa.net

ポイントは、自分のブログカラーに変更をすることです。


上記の参考の方のページはピンク色がベースカラーなので、私はベースカラーのブルーに変更をしました。

左がBefore、右がAfterです。


左は親カテゴリーと子カテゴリーがぱっと見、分かりません。


カスタマイズ後は、親カテゴリーと子カテゴリーの見分けが付きやすくなりました。


カテゴリーの上下も縮まって、より見やすく、選びやすくなっています。



▼カテゴリーの色を自分のブログカラーに変更する時は、Google拡張機能を使って自分のブログカラーを抽出してカラーコードを割り出します。

ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

chromewebstore.google.com

▼色を抽出したら、下記画像内の＃333や＃ffc5e0の部分を自分のブログカラーに変更をします。

カラーを変えて、保存して、プレビューで確認。


この作業を何度かやると自分の思い通りのカラーにカテゴリーをカスタマイズできます。


また、カテゴリーの順番は作成した順番になり、基本は変更ができないようですが、プラグインを使うと簡単に順番を思い通りに変更できます。


▼コチラを参考にしました。

WordPressカテゴリーの表示順番を簡単に変更する方法｜ブログ活用

WordPressでカテゴリー一覧の表示順番を変更する簡単な方法を紹介いたします。WordPressの管理画面でドラッグで動かすだけで順番を変更できるので、見てもらいたいカテゴリーの順番に変更したい場合はオススメです。

www.infact1.co.jp

諸々、参考にしてみてください！(・∀・)ｲｲﾈ!!