くるみ
- サイドバーのカテゴリーメニューをオシャレにしたい
- カテゴリの表示もっといい感じにしたいんやけど
という方に向けて「SANGOのカテゴリーメニューを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
カテゴリーメニューの完成イメージ
オレンジver
カスタマイズ後のカテゴリーメニューのイメージは上の通り。ウチのデザインそのまんまです。
ホバー時の動きも少しカスタマイズしてみました。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
簡単にカスタマイズの内容を説明すると…
- カテゴリ前にアイコンを付けて可愛く
- カテゴリ数を右寄せ&横長に
こんな感じです。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOのカテゴリーメニューのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

オレンジver
.widget_categories ul li a:before{
font-family: "Font Awesome 5 Free";
content: "f07b"; /*親カテゴリのアイコンの色*/
color:#f8c678;
font-weight: 900;
padding-right: 7px;
}
li.cat-item li a {
color: #777; /*文字色*/
}
li.cat-item ul li a:before{
color:#f8c678!important; /*子カテゴリのアイコンの色*/
}
li.cat-item a:hover {
transform: scale(1.06);
opacity:.9;
background-color: rgba(255,179,107,.2)!important; /*ホバー時の背景色*/
}
.entry-count {
border-radius: 25%;
float:right;
padding: 0 1em;
}
.widget_categories ul li a:before{
font-family: "Font Awesome 5 Free";
content: "f07b";
color:#f8c678;
font-weight: 900;
padding-right: 7px;
}
li.cat-item li a {
color: #777;
}
li.cat-item ul li a:before{
color:#f8c678!important;
}
li.cat-item a:hover {
transform: scale(1.06);
opacity:.9;
background-color: rgba(255,179,107,.2)!important;
}
.entry-count {
border-radius: 25%;
float:right;
padding: 0 1em;
}
SANGOカラーver
.widget_categories ul li a:before{
font-family: "Font Awesome 5 Free";
content: "f07b";
color:#92ccfb; /*親カテゴリのアイコンの色*/
font-weight: 900;
padding-right: 7px;
}
li.cat-item li a {
color: #777; /*文字色*/
}
li.cat-item ul li a:before{
color:#92ccfb!important; /*子カテゴリのアイコンの色*/
}
li.cat-item a:hover {
transform: scale(1.06);
opacity:.9;
background-color: rgba(146,204,251,.2)!important; /*ホバー時の背景色*/
}
.entry-count {
border-radius: 25%;
float:right;
padding: 0 1em;
}
.widget_categories ul li a:before{
font-family: "Font Awesome 5 Free";
content: "f07b";
color:#92ccfb;
font-weight: 900;
padding-right: 7px;
}
li.cat-item li a {
color: #777;
}
li.cat-item ul li a:before{
color:#92ccfb!important;
}
li.cat-item a:hover {
transform: scale(1.06);
opacity:.9;
background-color: rgba(146,204,251,.2)!important;
}
.entry-count {
border-radius: 25%;
float:right;
padding: 0 1em;
}
お好みの色にカスタマイズする
ここは「上の完成イメージとは違う色合いにしたい」という方向け。
コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。
ここまでくればカスタマイズは終了。お疲れ様です!
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
はじめまして、コメント失礼します。
こちらのCSSを使わせて頂きたいと思いコピペしてみたのですが、フォルダアイコンになるべきはずの部分が「f07b」という文字なってしまいます。
お力添えいただければ幸いです。