くるみ
- SANGOのレビューボックスにひとアレンジ加えたい
- オシャレな評価ボックスを挿入したい
という方に向けてSANGOのショートコードで挿入できる「レビューボックスのカスタマイズ方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
レビューボックスの完成イメージ
カスタマイズ後のレビューボックスのイメージは上の通り。ウチのデザインそのまんまです。
実物はこちら
- 幅を狭くしコンパクトに
- 星の数を非表示にして見やすく
- 星に薄く影を付けてポップに
その他色を変えたり、タイトルを消してスッキリさせています。
というわけでそのカスタマイズ方法を見ていきましょう。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOのレビューボックスのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ

コードはこちら
.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カスタマイズをまとめているので参考にしてみてください。

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