REVIEW BOX


レビューボックスをカスタマイズする

STEP.1
テキストと画像を変更する

HTMLファイルをカスタマイズしてテキストと画像を変更します。

上記の画像と下記のHTMLは色で紐付けられています。

<div class="reviewBox">
<h4>好きなテキスト</h4>
<div class="reviewBox_content">
<div class="reviewBox_top">
<div class="reviewBox_left">
<h5>商品名・タイトル</h5>
<p>ポイント1</p>
<p>ポイント2</p>
<p>ポイント3</p>
</div>
<div class="reviewBox_right"><img src="ここに商品画像のURL"></div>
</div>

画像のURL取得方法は下記ページを参考にしてください。

STEP.2
スコアやボタンを変更する

HTMLファイルをカスタマイズしてスコアボタンを変更します。

上記の画像と下記のHTMLは色で紐付けられています。

<div class="reviewBox_center">
<div class="progress-circle over50 p90">
<div class="progress-text">9</div>
<div class="left-half-clipper">
<div class="first50-bar"> </div>
<div class="value-bar"> </div>
</div>
<div class="reviewBox_score">
<p>スコア名</p>
</div>
</div>
<div class="progress-circle  over50 p70">
<div class="progress-text">7</div>
<div class="left-half-clipper">
<div class="first50-bar"> </div>
<div class="value-bar"> </div>
</div>
<div class="reviewBox_score">
<p>スコア名</p>
</div>
</div>
<div class="progress-circle  over50 p80">
<div class="progress-text">8</div>
<div class="left-half-clipper">
<div class="first50-bar"> </div>
<div class="value-bar"> </div>
</div>
<div class="reviewBox_score">
<p>スコア名</p>
</div>
</div>
<div class="progress-circle  over50 p80">
<div class="progress-text">8</div>
<div class="left-half-clipper">
<div class="first50-bar"> </div>
<div class="value-bar"> </div>
</div>
<div class="reviewBox_score">
<p>スコア名</p>
</div>
</div>
</div>
<div class="reviewBox_bottom">
<div class="reviewLink"><a href="ここにURL">レビュー記事へ</a><a href="ここにURL">公式サイトへ</a></div>
</div>
</div>
</div>

スコアの円型のバーは0点〜10点の、10%単位でカスタマイズができます。【p90】【9】と入力すると9点、【p50】【5】と入力すると5点になります。
【over50】は5点以上の場合に必要なクラス名です。4点以下の場合は削除してください。

【レビューをみる】、【公式サイへ】のボタンはリンク先を入力します。