くるみ
- サイドバーのカテゴリーメニューをオシャレにしたい
- カテゴリの表示もっといい感じにしたいんやけど
という方に向けて「SANGOのカテゴリーメニューを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
カテゴリーメニューの完成イメージ
オレンジver
カスタマイズ後のカテゴリーメニューのイメージは上の通り。ウチのデザインそのまんまです。
ホバー時の動きも少しカスタマイズしてみました。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
簡単にカスタマイズの内容を説明すると…
- カテゴリ前にアイコンを付けて可愛く
- カテゴリ数を右寄せ&横長に
こんな感じです。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOのカテゴリーメニューのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSを編集する方法を徹底解説オレンジ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カスタマイズをまとめているので参考にしてみてください。
【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
