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