【SANGO】レビューボックスを立体的に可愛くするカスタマイズ

SANGOのレビューボックスのカスタマイズ方法

くるみ

レビューボックスを可愛くしたいんだぞ
ということで今回は

  • SANGOのレビューボックスにひとアレンジ加えたい
  • オシャレな評価ボックスを挿入したい

という方に向けてSANGOのショートコードで挿入できる「レビューボックスのカスタマイズ方法」をまとめました。

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

レビューボックスの完成イメージ


カスタマイズ後のレビューボックスのイメージは上の通り。ウチのデザインそのまんまです。

実物はこちら

麺のカタさ
(1.5)
スープのコク
(3.0)
見た目
(4.5)
総合評価
(4.0)
簡単にカスタマイズの内容を説明すると…

  • 幅を狭くしコンパクトに
  • 星の数を非表示にして見やすく
  • 星に薄く影を付けてポップに

その他色を変えたり、タイトルを消してスッキリさせています。

というわけでそのカスタマイズ方法を見ていきましょう。

カスタマイズ手順

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

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする
step3
幅を調整する
すぐ終わりそう!

くるみ

バックアップを忘れずに

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

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

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

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

SANGOのレビューボックスのカスタマイズ方法

CSSコードをコピペする

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

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

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

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

.rate-box{
  border-radius: 5px;
  border: 2.3px solid rgba(255,179,107,.3);
  width:63%;
  margin:1em auto 2em auto;
  box-shadow: 0 2px 2px rgba(0,0,0,.05); 
}
@media only screen and (max-width: 480px){
  .rate-box{
    width:90%;
  }
}
.rate-title {
  display:none;
}
.rate-thing {
  color: rgb(146,135,110); /*文字色*/
  font-size:.98em;
}
.rateline.end-rate .rate-thing{
  color: rgb(136,125,100); /*最終行の文字色*/
}
.rate-box .rateline:nth-child(even) {
  background: rgba(255,249,229,.7); /*偶数行の背景色*/
}
.rate-box .rateline.end-rate {
  background: rgba(255,181,0,.17); /*最終行の背景色*/
}
.rate-star {
  color: transparent; /*星の数を非表示(透明)に*/
  font-size: .97em!important;
  text-align: center;
}
.rate-star .fa, .rate-star .fa-star-half-alt{
  text-shadow: 1px 1px rgba(0,0,0,.09);
}
.fa-star-half-alt {
  font-size: 1em!important;
  opacity:.9!important;
}
.rate-box{
  border-radius: 5px;
  border: 2.3px solid rgba(255,179,107,.3);
  width:63%;
  margin:1em auto 2em auto;
  box-shadow: 0 2px 2px rgba(0,0,0,.05); 
}
@media only screen and (max-width: 480px){
  .rate-box{
    width:90%;
  }
}
.rate-title {
  display:none;
}
.rate-thing {
  color: rgb(146,135,110);
  font-size:.98em;
}
.rateline.end-rate .rate-thing{
  color: rgb(136,125,100);
}
.rate-box .rateline:nth-child(even) {
  background: rgba(255,249,229,.7);
}
.rate-box .rateline.end-rate {
  background: rgba(255,181,0,.17);
}
.rate-star {
  color: transparent;
  font-size: .97em!important;
  text-align: center;
}
.rate-star .fa, .rate-star .fa-star-half-alt{
  text-shadow: 1px 1px rgba(0,0,0,.09);
}
.fa-star-half-alt {
  font-size: 1em!important;
  opacity:.9!important;
}

お好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

幅を調整する

ここはレビューボックス自体の幅に違和感を感じた方や変えたい方向けです。

.rate-box{
  width:63%;
}
@media only screen and (max-width: 480px){
  .rate-box{
    width:90%;
  }
}

widthの値を変えてあげればOK。ブログ主的には60〜70%辺りが良さげかなと。

ここまで終わればカスタマイズは終了。お疲れ様です!

お疲れ様!

くるみ

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カスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。