SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

星評価ブロック

スターレーティングブロックを使用すると、SeedProdの任意のページに視覚的なスターレーティングを表示できます。製品のレビュー、サービスの評価、証言の信頼性を高める場合でも、このブロックはオプションのテキストラベルと共に塗りつぶされた星のアイコンの行をレンダリングし、訪問者に一目で認識可能な品質シグナルを提供します。

スケール(0〜5または0〜10)、正確なレーティング値、星のサイズと間隔を完全に制御できます。タイポグラフィと色のオプションと組み合わせることで、スターレーティングブロックは、大胆なマーケティングページからミニマルなレビューレイアウトまで、あらゆるデザインシステムに合わせてシームレスにスタイル設定できます。

SeedProdページにラベルが付いた5つの塗りつぶされた金色の星を表示するスター評価ブロック

要件: スターレーティングブロックは、すべてのライセンスプランで利用可能です。


スターレーティングブロックをページに追加する

SeedProdページにスターレーティングブロックを追加するには、次の手順に従ってください。

ステップ1:ブロックを追加する

デザイン > ブロックの下で、スターレーティングブロックをページの目的のセクションにドラッグアンドドロップします。

SeedProdページにスター評価ブロックをドラッグアンドドロップする

ステップ2:コンテンツ設定を構成する

追加したら、スターレーティングブロックをクリックして設定を開きます。コンテンツタブで、スターレーティングセクションを使用してレーティング表示を構成します。

  • スケール:ドロップダウンメニューから0〜5または0〜10のレーティングスケールを選択します。
  • レーティング:スライダーを使用して正確なレーティング値を設定します。利用可能な範囲は、選択したスケール(最大5または最大10、0.5刻み)に基づいて調整されます。
  • ラベル:星の横に表示するオプションのテキストラベル(例:「5つ星のうち4.5」)を入力します。
  • 配置:デスクトップ、タブレット、モバイルの各デバイスの制御により、左、中央、右のいずれかの水平配置を設定します。
  • サイズ:スライダー(0〜100px)を使用してアイコンサイズを調整し、星を大きくまたは小さくします。
  • 間隔:スライダー(1〜100px)を使用して、各星アイコン間のギャップを制御します。
スケール、評価、ラベル、サイズ、スペーシングコントロールを表示するスター評価ブロックのコンテンツタブ設定

ステップ3:デザインをカスタマイズする

高度な設定タブでは、スターレーティングブロックの視覚的な外観をカスタマイズできます。スタイルセクションには、次のオプションが含まれています。

  • タイポグラフィ:ラベルテキストのフォントファミリー、サイズ、太さ、スタイル、行の高さ、文字間隔、文字ケースを設定します。
  • 星の色:星のアイコンの塗りつぶし色を選択します(デフォルトはゴールド)。
  • テキストの色:星の横に表示されるラベルテキストの色を設定します。

高度な設定タブには、間隔(マージンとパディング)、カスタムCSS属性、デバイスの表示、アニメーションの表示に関する制御も用意されています。

タイポグラフィ、星の色、テキストの色オプションを含むスタイルセクションを表示するスター評価ブロックの詳細タブ

ステップ4:変更を保存

スターレーティングブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。


スター評価ブロックをページに正常に追加しました! 証言、製品レビュー、ケーススタディ、または品質と信頼性を一目で伝えたい場所で使用してください。さまざまなサイズ、色、ラベルテキストを試して、ページデザインに自然に収まるスター評価を作成してください。

関連記事