...

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

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

どうもおはようポテト(@ohayoupoteto22)です。

レビューボックスを可愛くしたいんだぞ

ということで今回は

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を編集する3つの方法

コードはこちら

.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カスタマイズ総まとめ】サイトをもっと魅力的に!

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA