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>ポイント１</p>
<p>ポイント２</p>
<p>ポイント３</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】【９】と入力すると９点、【p50】【５】と入力すると5点になります。
【over50】は5点以上の場合に必要なクラス名です。4点以下の場合は削除してください。
【レビューをみる】、【公式サイへ】のボタンはリンク先を入力します。