【SANGO】カテゴリー一覧をオシャレにカスタマイズする方法

SANGOのカテゴリーメニューのカスタマイズ方法

くるみ

SANGOのカテゴリーメニューを可愛くしたいんだよね
ということで今回は

  • サイドバーのカテゴリーメニューをオシャレにしたい
  • カテゴリの表示もっといい感じにしたいんやけど

という方に向けて「SANGOのカテゴリーメニューを可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

カテゴリーメニューの完成イメージ

オレンジver

カテゴリーメニューのオレンジverの完成イメージ

カスタマイズ後のカテゴリーメニューのイメージは上の通り。ウチのデザインそのまんまです。

 

カテゴリメニューのホバー時の動き

ホバー時の動きも少しカスタマイズしてみました。

SANGOカラーver

カテゴリーメニューのSANGOカラーverの完成イメージ

SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。

好きな方を選んでね!

くるみ

簡単にカスタマイズの内容を説明すると…

  • カテゴリ前にアイコンを付けて可愛く
  • カテゴリ数を右寄せ&横長に

こんな感じです。

カスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。

すぐ終わりそうだね!

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

SANGOのカテゴリーメニューのカスタマイズ方法

CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】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カスタマイズをまとめているので参考にしてみてください。

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。