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