レビューボックスは、評価の結論と根拠を近くに置くために使います。星の数だけでなく、試した条件・良い点・注意点を読める形にしてから装飾を整えましょう。記事中の星と検索結果の星の違いも説明します。
この配布JSONは、Styles & Scripts、Panel、Controls Conditions（いずれもProの機能）を使う既存環境向けです。無料版のソース確認では、星と開閉に使うCSS・JavaScriptをこの欄から出力する処理は確認できませんでした。入力コントロールの種類だけを見て「無料版の範囲で組める」とした以前の案内を訂正します。
導入がまだの方は先にLazy Blocks使い方完全ガイドで基本を確認しておくとスムーズです。
- 「ただのテキストレビューでは読者の目に留まらない…」
- 「公式サイトのような洗練された口コミデザインを作りたい」
- 「構造化データの設定や長文の折りたたみまで手が回らない…」
以下では表示デモと入力項目、公開前の確認点を紹介します。
完成デモ：評価と本文を読みやすく整理する
評価・投稿者情報・レビュー本文を一か所に整理し、長い本文は開閉できる構成です。
星やバッジだけでレビューの信頼性が保証されるわけではありません。実際に確認した事実、評価した人、評価基準が分かる内容に差し替えて使います。
読者が「自分の使い方にも当てはまるか」を判断できるよう、利用条件や気になった点も本文に残してください。
下の3枚は、このブロックで実際に何が入力・出力できるかを示すための表示サンプルです。
「WP構築代行屋」「エンジニア」のような肩書きと本文は、Lazy Blocksの各コントロール（星評価・バッジ・良い点/悪い点リストなど）がどう反映されるかを見せるために私が書いたサンプルテキストで、実在する利用者の声ではありません。
あなたのブログで使うときは、実際の利用者から集めた本物の声か、あなた自身の一次情報に差し替えて使ってください。
架空の表示サンプル：本文と箇条書きの配置
本文を二つの段落に分けた場合と、短い文章だけの場合を比べます。公開ページでは、見出し・本文・箇条書きの順に読めるか、スマホで余白や改行が不自然になっていないかを確認してください。
- 短い本文と箇条書きの配置を確認する例
- 見出しと本文の文字量を変えて確認する例
- 文章が長い場合の改行と余白も確認する
架空の表示サンプル：長めの本文と星表示
本文を長くした場合に、星・投稿者名・本文・箇条書きが重ならないかを確認します。入力後はPCとスマホの両方で、表示の順番と文章の折り返しを確かめてください。
- 星の入力値が表示へ反映されるかを見る例
- 段落を分けた本文の余白を見る例
- 投稿者名とバッジの並びを見る例
- 長い文章ではスマホの折り返しも確認する
架空の表示サンプル：複数の確認点を並べる
短い項目と長い項目を混ぜ、アイコンと文章の位置、行間、折り返しを確認します。実際のレビューを掲載する場合は、出典と確認できた内容に合わせて入力してください。
- 短い項目の文字位置を見る例
- 長い項目が折り返されたときの配置を見る例
- 確認点を複数並べたときの間隔を見る例
- 表示例の星や内容を実際の評価と混同しない
1. 根拠がある場合に使うバッジと星評価
星の数はCSSのグラデーション塗り分けで表現しています。
<span class="rv-stars-fill" style="color:{{star_color}} !important;">★★★★★</span>★★★★★背景色のグレーの★5個の上に、色付きの★5個を--rating変数の割合分だけ重ねて表示しています。
だから0.5刻みの評価も、画像を用意することなくCSSだけで表現できます。
バッジの文言は自由に入力できます。「動作確認済み」とするなら、確認した環境と範囲を本文に示しましょう。認証を受けていないのに第三者認証と誤解される表示は使いません。
2. 長文もスッキリ収まる「続きを読む」開閉機能
この機能、実は「常に3行で省略する」という単純な作りではありません。
if (text.scrollHeight <= text.offsetHeight + 2) {
btn.classList.add('is-hidden'); // 短文なら「続きを読む」ボタン自体を消す
return;
}CSSで本文を3行にクランプ（-webkit-line-clamp）した上で、JavaScriptが実際の文章の高さ(scrollHeight)と表示上の高さ(offsetHeight)を比較しています。
短い文章で3行に収まっている場合は、そもそも「続きを読む」ボタンごと非表示にする分岐が入っています。
短いレビューに不要な開閉ボタンを出さない作りです。実際の文章に差し替えた後、途中で切れていないか、展開後に全文を読めるか確認します。
3. メリット・デメリットを一目で伝える「良い点・悪い点まとめ」
良い点・悪い点のリストは1本のRepeaterコントロールで管理しています。
行ごとに「good」か「bad」かを選ぶSelectコントロールを持たせていて、その値をそのままCSSクラス名(rv-item--good / rv-item--bad)に使っています。
良い点用・悪い点用で別々のRepeaterを2つ用意する作り方もできますが、1本にまとめて種別だけ切り替える方が、後から並び替えたいときに1つのリスト内でドラッグするだけで済んで楽です。
実際に「続きを読む」を押すとこうなります。
「既存プラグイン」との差別化
PHPやCSSを管理できる場合は、入力欄と出力を用途に合わせて調整できます。テーマ標準のレビュー表示で足りるなら、既存機能を使う選択もあります。
出典リンクにはrel="noopener noreferrer nofollow"を付けています。出典を隠すための設定ではなく、読者が元の情報を確認できるリンクとして使ってください。
このブロックはitem_nameを入力するとReview用のJSON-LDを出力しますが、名前を入れるだけでGoogleの表示条件を満たすわけではありません。
ページに表示した実際のレビューと評価を記述し、対象の種類・必須項目を確認してください。商品の実体験に基づく執筆者のレビューまで一律に禁止されているわけではありません。一方、架空の体験や人物を使ったレビュー、特典の提供を開示しないレビューは掲載しないでください。
また、自社・自店舗について自サイトに載せるOrganization／LocalBusinessのレビューは、実在する投稿でも星付き表示の対象外です。Google公式の対象と条件を確認し、リッチリザルトテストで検証してください。この記事のサンプルカードはitem_nameを空にし、構造化データを出力しない状態にしています。
記事の星評価と、検索結果の星を混同しない
| 目的 | 選び方 |
|---|---|
| この記事のレビューボックス | 読者に評価・良い点・注意点を見せる表示。評価の基準と検証条件が必要。 |
| 読者が投稿する評価 | 入力フォーム・保存・不正投稿への対策を持つ別の仕組みが必要。 |
| 検索結果の星表示 | 対象となる構造化データとGoogleの要件への適合が必要。装飾だけでは実現しない。 |
まず評価対象と配点を決めます。たとえば「編集のしやすさ」「必要な出力」「利用条件」のように軸を固定し、同じ条件で比較した結果か、筆者の使用感かを明記します。参考レビューの件数を自分の検証数として掲載しないようにしてください。
星を置いただけで検索結果へ星が表示されるわけではありません。構造化データを追加する場合は、本文に見える評価と一致させ、SEOプラグインとの二重出力も確認します。Googleのクチコミ抜粋の要件に従っても表示は保証されません。この配布物の装飾とは別の確認事項です。
WordPress.comの評価ブロック、テーマ内蔵のレビュー欄、追加プラグイン、自作ブロックでは、入力できる項目と保存方法が異なります。既存機能で目的を満たすなら、その評価欄に検証条件と出典を補う方法から試してください。
公開前には、点数の最大値・小数・空欄・長い商品名を入れて表示を確認します。スマホで点数だけ目立って注意点が遠くならないよう、結論と主な制約を近くに配置しましょう。
配布用JSONファイルダウンロード
JSONを読み込んだら、まず自分が実際に確認したレビューを一件入れてみてください。評価基準、出典、開閉表示、スマホの文字サイズを確認してから公開します。
入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。
配布データの動作条件と読み込み手順
この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。
CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。
- 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
- 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
- 見出し・本文・画像・URLを自分の内容へ置き換える。
- PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
- 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。
設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。
