【SANGOカスタマイズ】サルワカ風！カテゴリの先頭にアイコンを表示する

こんにちわ！
うにとん（@uniuni_tonton）です。

本記事ではこのブログで使用しているワードプレステーマ「SANGO」のカスタマイズを紹介します。

できるようになること

カテゴリの先頭にアイコンを表示させる

うにとん

カスタマイズをする際は自己責任でお願いします。バックアップ推奨です。

カテゴリの先頭にアイコンを表示させる
まとめ：カテゴリが見やすくなりました！

カテゴリの先頭にアイコンを表示させる

『サルワカ』風にしたいと思い、サイドバーのカテゴリの先頭にアイコンを表示できるように設定してみました。

好きなアイコン・好きな色で設定できるのでデザインにこだわりたい人におすすめのカスタマイズです！

では、さっそくカスタマイズ方法を紹介。

使いたいアイコンを決める
使いたい色を決める
外観　⇒　テーマの編集
スタイルシート (style.css)にコードを入力する

１，使いたいアイコンを決める

『Font Awesome』のページから使用したいアイコンを決めておきましょう。

まだバージョン4.7の方はこちらから選択。

Font Awesomeのバージョンが違うとアイコンが表示されないので注意が必要です。私はまだ4.7からバージョンアップしてません；置き換えるのが面倒なので・・・ｗ

参考記事：SANGOでFontAwesome4.7から5へと切り替える方法と注意点

バージョン4.7の方はこちらのサイトが日本語対応していて探しやすくておすすめです。

参考 Font Awesomeのアイコンを日本語、英語、カタカナで簡単一発検索！

２、使いたい色を決める

私はいつも『HTMLカラーコード: WEB色見本原色大辞典』で色を選んでいます。

特にこだわりが無ければ、サイト全体と同じ色にすると統一感がでますよ！

あんまり色んな色を使うと、ごちゃごちゃするので、どこかで使用している色と同じ色にするのがオススメです。

３、CSSを貼り付ける

外観　⇒　テーマの編集から
スタイルシートを選択しCSSをコピペして貼り付けてください。

必要な箇所は書き換えてくださいね！

コード

/* ———————–
親カテゴリにアイコンを設定
———————– */
.widget_categories .cat-item-★カテゴリID★>a:before {
content: “\f015”;/*使いたいアイコンのコード*/
}
.widget_categories ul li a:before {
color: #9ddcdc; /*アイコンの色コード*/
font-family: FontAwesome; /*バージョン5の人はここを書き換える*/
padding-right: 6px;
}