サービス・商品のレビューに使えるレート付きボックス【WordPress】

16 min

総合評価の数値と項目別の数値を自由に設定できるレビューボックスです。

リストにはグラデーションを使っているため直感的に分かりやすくなります。

こんなレビューボックスができます。

TOTAL

8

掃除機のレビュー

  • 動作音が静か
  • 吸引力が強くゴミを漏らさない
  • 軽量なので片手で使える
  • 手入れがちょっと手間
  • 値段が高い

5

価格

9

吸引力

8

使いやすさ

9

静音性

説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。

グーテンベルクエディタ(ブロックエディタ) の基本的な機能を使っているので、ほとんどのテーマで使うことができると思います。ただし、クラシックエディタの場合は使えません。

再利用ブロックを「.json」ファイルで配布しているのでほとんどカスタマイズせずに使えます。

このカスタマイズにはFontAwesome 5を使っていますが文字に変更することも可能です!

導入する手順
  1. 再利用ブロック「.json」をダウンロード・インポート
  2. style.css を編集
  3. 編集画面で再利用ブロックを追加
  4. 数値やラベルを好きなように変更

利用する前には必ずファイルをバックアップしてください。

再利用ブロックをインポート

JSON ファイルは別のところで作成した再利用ブロックを使うために必要なファイルで、内容はテキスト( JavaScript の構造データ)です。

こちらから再利用可能ブロック「.json」ファイルをダウンロードして下さい。

ダウンロードできる再利用ブロックと全く同じものです。

こちらのコードを全部コピーして、テキストエディタなどで「xxxxx.json」として保存してからインポートできます。

review-box.json

{
  "__file": "wp_block",
  "title": "[ボックス]レーティングレビュー",
  "content": "<!-- wp:group {\"className\":\"bl_reviewPies\"} -->\n<div class=\"wp-block-group bl_reviewPies\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph {\"className\":\"el_reviewPie_totalLabel\"} -->\n<p class=\"el_reviewPie_totalLabel\">TOTAL</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_total\"} -->\n<p class=\"el_reviewPie_total\">7</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPies_title\"} -->\n<p class=\"el_reviewPies_title\">商品レビュー</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:group {\"className\":\"bl_gradList_icon bl_gradList\"} -->\n<div class=\"wp-block-group bl_gradList_icon bl_gradList\"><div class=\"wp-block-group__inner-container\"><!-- wp:list {\"className\":\"bl_gradList_b2\"} -->\n<ul class=\"bl_gradList_b2\"><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"className\":\"bl_reviewPie\"} -->\n<div class=\"wp-block-column bl_reviewPie\"><!-- wp:paragraph {\"className\":\"el_reviewPie_rate__5 el_reviewPie_rate\"} -->\n<p class=\"el_reviewPie_rate__5 el_reviewPie_rate\">5</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_label\"} -->\n<p class=\"el_reviewPie_label\">レート</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"className\":\"bl_reviewPie\"} -->\n<div class=\"wp-block-column bl_reviewPie\"><!-- wp:paragraph {\"className\":\"el_reviewPie_rate__6 el_reviewPie_rate\"} -->\n<p class=\"el_reviewPie_rate__6 el_reviewPie_rate\">6</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_label\"} -->\n<p class=\"el_reviewPie_label\">レート</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"className\":\"bl_reviewPie\"} -->\n<div class=\"wp-block-column bl_reviewPie\"><!-- wp:paragraph {\"className\":\"el_reviewPie_rate__7 el_reviewPie_rate\"} -->\n<p class=\"el_reviewPie_rate__7 el_reviewPie_rate\">7</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_label\"} -->\n<p class=\"el_reviewPie_label\">レート</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"className\":\"bl_reviewPie\"} -->\n<div class=\"wp-block-column bl_reviewPie\"><!-- wp:paragraph {\"className\":\"el_reviewPie_rate__8 el_reviewPie_rate\"} -->\n<p class=\"el_reviewPie_rate__8 el_reviewPie_rate\">8</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_label\"} -->\n<p class=\"el_reviewPie_label\">レート</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"className\":\"el_reviewPie_desc\"} -->\n<p class=\"el_reviewPie_desc\">説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。説明文。</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"customBackgroundColor\":\"#2990ff\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background\" style=\"background-color:#2990ff\">公式サイト</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"customBackgroundColor\":\"#2990ff\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background\" style=\"background-color:#2990ff\">Amazon</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->"
}

ダウンロードできたら、WordPressの管理画面左の「再利用ブロック管理」などのメニューを開きます。

テーマによっては表示されないことあるので、その場合は以下のURLで開きましょう。

https://ブログ.com/wp-admin/edit.php?post_type=wp_block

コピー

wp-admin/edit.php?post_type=wp_block

上部の「JSON からインポート > ファイルを選択」でダウンロードした.jsonファイルを選択してインポートをクリックします。

画像

インポート後、ブラウザをリロードすると一覧に再利用ブロックが表示されます。

style.css を編集・カスタマイズ

SFTPクライアントや、テーマエディタで子テーマの「style.css」を編集・追記します。

style.css

/*--------------------------------------
レビューボックス
--------------------------------------*/
.bl_reviewPies {/*ラッパー*/
    position: relative;
    margin-top: 3.5rem;
    padding: 2rem;
    border-radius: 5px;
    background: #E5F3FF;/*背景色*/
}

.bl_reviewPies .el_reviewPie_totalLabel { /*TOTALラベル*/
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: -25px;
    font-size: .8rem;
    z-index: 9;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.bl_reviewPies .el_reviewPie_total { /*トータル円と数値*/
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: -45px;
    width: 100px;
    height: 100px;
    padding-top: 8px;
    font-size: 2rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    color: #555;
    text-align: center;
    line-height: 86px;
    border: 8px solid #E5F3FF; /*背景色と同じ*/
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.bl_reviewPies .el_reviewPies_title {/*レビュータイトル*/
	margin-bottom: 1rem;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.bl_reviewPies .el_reviewPie_total + .el_reviewPies_title {/*調整*/
    padding-top: 2rem;
}

/*レビューレートカラム*/
.bl_reviewPies .wp-block-columns {
    margin: 2rem 0 0;
}

.bl_reviewPie .el_reviewPie_rate { /*数値*/
    position: relative;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 1.6rem;
    width: 60px;
    height: 60px;
    color: #555;
    margin: 0 auto;
    margin-bottom: 1rem;
    z-index: 2;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.bl_reviewPie .el_reviewPie_rate:before { /*外側円*/
    position: absolute;
    left: 50%;
    top: -10px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    content: "";
    z-index: -2;
}

.bl_reviewPie .el_reviewPie_rate:after { /*内側円*/
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-radius: 50%;
    line-height: 60px;
    content: "";
    width: 60px;
    height: 60px;
    background: #fff;
    z-index: -1;
}

.bl_reviewPie .el_reviewPie_rate__0:before {
    background: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__1:before {
    background: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__2:before {
    background: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__3:before {
    background: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__4:before {
    background: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__5:before {
    background: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__6:before {
  background: linear-gradient(90deg, orange 50%, transparent 50%), linear-gradient(54deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__7:before {
    background: linear-gradient(90deg, orange 50%, transparent 50%), linear-gradient(18deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__8:before {
    background: linear-gradient(90deg, orange 50%, transparent 50%), linear-gradient(-18deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__9:before {
    background: linear-gradient(90deg, orange 50%, transparent 50%), linear-gradient(-54deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_rate__10:before {
    background: linear-gradient(90deg, orange 50%, transparent 50%), linear-gradient(-90deg, orange 50%, #ddd 50%);
}

.bl_reviewPie .el_reviewPie_label { /*レートのラベル*/
    text-align: center;
    margin-bottom: 2rem;
}

/*説明文*/
.bl_reviewPies .el_reviewPie_desc {
    padding: 1rem;
}

/*ダブルボタン*/
.bl_reviewPies .wp-block-button,
.bl_reviewPies .wp-block-button__link {
    width: 100%;
    margin-bottom: .5rem;
}

@media (max-width: 599px) {
  .bl_reviewPie .el_reviewPie_label {
    margin-bottom: 1rem;
  }

  .bl_reviewPie.wp-block-column { /*モバイル2列*/
    -ms-flex-preferred-size: 50% !important;
        flex-basis: 50% !important;
  }
}

/*--------------------------------------
グラデーションリスト
--------------------------------------*/
.bl_gradList ul {
    position: relative;
    margin-left: 40px;
    padding-left: 24px;
    list-style: none;
    border: none;
}

/*グラデーションバー*/
.bl_gradList ul:before,
.bl_gradList ul:after {
    position: absolute;
    left: 0;
    margin: auto;
    content: "";
}

.bl_gradList ul:before {
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
    background: linear-gradient(#8EED51 35%, #FBCD70 100%) no-repeat 50% 50%/100% 100%; 
    border-radius: 10px;
}

/*リストスタイル*/
.bl_gradList ul li {
    position: relative;
    margin-left: 10px;
}

.bl_gradList ul li:before {
    position: absolute;
    display: inline-block;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: -16px;
    width: 8px;
    height: 8px;
    background-color: #53d900; /*リスト丸の色*/
    border-radius: 50%;
    content: "";
}

/*下からn番目のリストスタイル*/
.bl_gradList .bl_gradList_b1 li:last-child:before,
.bl_gradList .bl_gradList_b2 li:nth-last-child(-n+2):before,
.bl_gradList .bl_gradList_b3 li:nth-last-child(-n+3):before {
    background-color: #ffab00;
}

/*顔アイコン*/
.bl_gradList_icon {
    position: relative;
    margin-bottom: 3rem;
}

.bl_gradList_icon:before,
.bl_gradList_icon:after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    left: -10px;
    width: 45px;
    font-size: 2rem;
    font-weight: 400;
}

.bl_gradList_icon:before {
    top: 0;
    content: "\f582";
    color: #53d900;
}

.bl_gradList_icon:after {
    bottom: 0;
    content: "\f119";
    color: #ffab00;
}

JIN で利用する場合

リストの色にはアクセントカラーが優先的に適用されるので、上書きします。

下記のコードを style.css に追記して下さい。

style.css

/*JIN*/
.cps-post-main .bl_gradList li:before {
	background-color: #53d900 !important;
}

.cps-post-main .bl_gradList .bl_gradList_b1 li:last-child:before,
.cps-post-main .bl_gradList .bl_gradList_b2 li:nth-last-child(-n+2):before,
.cps-post-main .bl_gradList .bl_gradList_b3 li:nth-last-child(-n+3):before {
	background-color: #ffab00 !important;
}

SWELL で利用する場合

モバイル表示した時に表示が崩れるので追記修正します。

style.css

/*SWELL*/
.post_content .bl_reviewPies .wp-block-column {
    margin-top: 1.5rem !important;
}

Cocoon で利用する場合

総合評価のラベルがずれるので追記修正します。

style.css

/*Cocoon*/
.bl_reviewPies .el_reviewPie_totalLabel {
    top: -45px;
}

.bl_reviewPies .el_reviewPie_total {
    top: -85px;
}

グラデーションバーの色を変更するには

リスト左のグラデーションがかかった縦のラインの色を変更したい場合は、こちらのサイトを使うとかんたんにグラデーションを作ることが出来ます。

2色を選んでグラデーションを作成

グラデ

style.css の.bl_gradList ul:before {background: XXXXX;}に貼り付ける

ジェネレーター

editor-style.css を編集

WordPressの編集画面をカスタマイズします。編集時に見やすくするだけなのでここは飛ばしてもOKです。

editor-style.css の使い方は「テーマ名 editor-style.css」で検索してみてください。

editor-style.css

/*--------------------------------------
レビューボックス
--------------------------------------*/
.bl_reviewPies {
    padding: 2rem;
    background: #E5F3FF;
}

レビューボックスを配置

編集画面から新規ブロックを追加します。

再利用可能ブロックの「[ボックス]レーティングレビュー」を探して追加してください。

ここで追加したブロックを再利用ブロックから「通常のブロック」へ変換します。

通常ブロック

再利用ブロックのままだと、別の所で同じ再利用ブロックを使った場合に内容が同じになってしまいます。

数値や説明を変更

画像

タイトルや数値を自由に変更してください。

レートの数値は 0〜10まで設定可能です。窮屈にはなりますが小数も入力できます。

項目の点数を円グラフと一致させる

円グラフの表示は自動では変わらないので、「高度な設定 > 追加CSSクラス」で変更します。

項目の点数のブロックをクリックした後、追加CSSクラスを以下のように変更して下さい。

画像

el_reviewPie_rate__5

この数字を点数と一致するように変更して下さい。( 0〜10 )

「5」を満点にしたい場合は el_reviewPie_rate__10 になります。

リストの前の丸の色を変える

通常はリストの前の丸の色は一色ですが、グラデーションに合わせて丸の色を変更可能です。

リスト全体のブロックを選択後、編集画面右の一番下「高度な設定 > 追加CSS」の「bl_gradList_bX」の数値を変更してください。

b1は一番下のみ、b2は下から2つ分色を変更できます。

リスト前の色

下から3つまでのリストに対応していますが。必要な場合はstyle.cssにb4、b5など追加してください。

  • bl_gradList_b1
  • bl_gradList_b2
  • bl_gradList_b3

追加CSSクラスを空欄にするとリスト前の丸の色は一色になります。

ボタンの変更

テーマによっては編集画面でエラーが出るのでブロックのリカバリーをするか、再度作り直して下さい。テーマで用意しているボタンに変更してもOKです。

ブロック単体でもOK

使わないブロックを削除すれば、リストやレートブロックだけ使うことも出来ます。

この場合、リストの文字色や、背景色を編集画面から変更できます。

商品レビュー

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

エナジードリンク

画像

3.0

値段

4.0

甘さ

3.8

フレーバー

4.5

スッキリ度

最新スマホ

2

価格

10

通信速度

8

サクサク

  • ふつうのリスト
  • グラデーションなし
  • いろいろ配置できる

上部に製品の写真を挿入したり、さまざまなブロックの追加が可能です。これがブロックエディタのよいところですね!

応用:顔文字を文字列に変える

飲み物

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

グラデーションバー横の絵文字は FontAwesome 5 を使っているので、テーマが対応していなかったり無効にしている場合は表示できません。

style.css に以下のコードを追記して、「content: “★”」の★の中を変更してください。

style.css

.bl_gradList_icon:before,
.bl_gradList_icon:after {
	position: absolute;
	left: -24px;
	width: 45px;
	font-size: 1rem;
	font-weight: 400;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.bl_gradList_icon:before {
	top: 0;
	content: "Good";
	color: #53d900;
}

.bl_gradList_icon:after {
	bottom: 0;
	content: "Bad";
	color: #ffab00;
}
関連記事

コメントを残す

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