Simplicityのカテゴリー一覧をWEBフォントで装飾

web-icon

 WordPressのテーマ、Simplicityのカテゴリーウィジェットを装飾しました。
各カテゴリー名の前にWEBアイコンフォント「FontAwesome」でアイコンを表示することによって簡単に豪華で可愛い一覧に変身しますよ♪(^^)v

スポンサーリンク

装飾前と装飾後の比較

category

↑このように、ほんの一手間(コピペだけ)で見栄えが全然違って見えますよね。
アイコンの種類や色は自由に変更できるので順を追ってやってみましょう。

カスタマイズ方法

1. カテゴリーウィジェットのIDを調べる。

ブラウザがChromeの場合(Firefoxでも同じ)
カテゴリー内を右クリック ⇒ 要素を検証をクリック。
カテゴリーのIDを調べる

開いた窓のElements側で、マウスポインターを移動させてカテゴリー全体の色が反転する「ID名」が書かれた行を探します。
カテゴリーのIDを探す

この画像の場合は、ID="categories-2"でした。

コピペでOKのコード。

これから紹介するコードのID名を自分のID名に書き換えて、
Simplicityの子テーマSimplicity child: スタイルシート (style.css)へペーストして下さい。

1. アイコンを付ける。

font awesomeを付ける

色を付けないシンプルな表示です。

ここでのアイコンは「」ですが「」これにする場合は、
2行目のf02cf02bに書き換えて下さい。

2. アイコンに色を付ける。

アイコンに色を付ける

アイコンを青色にしてみました。
1.のコードにcolor: blue;を書き足すだけです。

親カテゴリーと子カテゴリーでアイコンを変更する。

親子でアイコン変更

1行目が親で「
2行目が子で「」です。

親カテゴリーのアイコンのみ色を変更する。

親子で色を分ける

親子でアイコンを変えるなら色も変えてみましょう。
親アイコンを赤茶色にします。

カテゴリー名の背景に色を付ける。

この記事を書いてる時点での私のカテゴリーのデザインです。
私のカテゴリーデザイン

このようにテキストの背景に色や境界線を入れるには
#categories-2 ul li aでスタイルを書いていきます。

↑これは私のコードです。 ここまでする人はいないと思うので背景だけ設定する場合は、 2行目のbackgroundで背景色 9行目のtext-decoration: noneでリンク下線を消すことができます。

 あとがき

お疲れ様でした。

Simplicityと記事タイトルにしましたが、どのブログでもできるので
ブログにワンポイントを入れたい人は、ID名を指定することで簡単にできます。(FontAwesomeがインストールしてあることが条件ですが)

FontAwesomeが使えるようになってないブログの方はこちらが参考になります。

Simplicityでメニューをカスタマイズしたい方はこちらをどうぞ。

最後までご覧いただきありがとうございました。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る