Cocoon(テーマ)のカテゴリ一覧のフォルダとタグのアイコン黄色にしたい【WordPress】

Webサイト
スポンサーリンク

現在、Wordpressにてこのブログを運営しております。テーマ(ブログの見た目)をCocoonという無料で高品質なものを使用しています。

無料で高品質ですと使用している方も多く、独自性を出したくたまにカスタマイズを行っています。

今回は、カテゴリー一覧やタグ一覧の際に見出しに表示されるフォルダアイコン、タグアイコンを黄色にカスタマイズしていきます。

CSSを追記してカスタマイズ

カテゴリー一覧の元アイコンの色は元は#333(黒)です。
フォルダのアイコンだけCSSで指定して黄色にします。

下記のCSSを追記します。

.fa-folder-open:before {
color: #ffd900;
}

無事に黄色になりました。

タグアイコンは別のセレクタを使用する

タグも同様に黄色にします。
カテゴリー一覧のフォルダアイコンと同様、タグのアイコンの色は元は#333(黒)です。

下記のCSSを追記します。

.fa-tags:before {
	color: #ffd900;
}

同じ色なのでCSSもまとめる

現在、2種類の色を変更するCSSを書いて6行くらいになったと思うのですが、同じ色に変更するならまとめて3行にすることが可能です。

下記のように書き換えるとスッキリまとまります。

/*↓↓↓ 下記のように、6行あったものを… ↓↓↓*/
.fa-folder-open:before {
	color: #ffd900;
}

.fa-tags:before {
	color: #ffd900;
}

/*↓↓↓ まとめてスッキリ ↓↓↓*/
.fa-folder-open:before,.fa-tags:before {
color: #ffd900;
}

CSSをカスタマイズするには

(1)左メニューの 外観 > カスタマイズ をクリックします。

(2)カスタマイズページの『追加CSS』へ進みます。

(3)①のエディタにCSSを入力して、プレビュー画面で問題ないか確認して、②の『公開』ボタンクリックで確定して公開します。

おわりに

と、いうことで『Cocoon(テーマ)のカテゴリ一覧のフォルダとタグのアイコン黄色にしたい【Wordpress】』でした。

Cocoonは無料で高品質のテーマでとても重宝しております。
今後も独自性を出したくカスタマイズを行っていきますので、ブログで紹介していきます!