賢威7のWordPress版に用意されているCSSのスタイルを適用してランキングや商品比較のコンテンツを表示する方法を紹介します。賢威7の標準機能の説明です。

下記は実際にランキングや商品比較のコンテンツを表示しています。

ランキングや商品情報比較の形式で表示する際は、下記のHTMLのサンプルコードをコピー&ペーストして利用してください。表示例のサンプルコードを用意していますので参考にしてください。


はじめに

HTMLの雛形です
  1. この記事では賢威7のWordPress版で利用するHTMLの雛形とCSSの使い方を解説しています。下記のサンプルコードはあくまでも見本です。自分のサイト用にカスタマイズしてご利用ください。
  2. サンプルコードの画像ファイルはダミー画像になっています。自分のサイトで利用する画像ファイルはご自身でご用意ください。

ランキング

王冠のランキング

王冠とランクの数字が表示されるランキングのHTML雛形です。

  1. ランク01の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  2. ランク02の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  3. ランク03の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  4. ランク04の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  5. ランク05の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  6. ランク06の項目が入ります

  7. ランク07の項目が入ります

  8. ランク08の項目が入ります

  9. ランク09の項目が入ります

  10. ランク10の項目が入ります

<ol class="ranking-list ranking-list01">
<li class="rank01">
<h4 class="rank-title"><a href="#">ランク01の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title"><a href="#">ランク02の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title"><a href="#">ランク03の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title"><a href="#">ランク04の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title"><a href="#">ランク05の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank06">
<p class="rank-title"><a href="#">ランク06の項目が入ります</a></p>
</li>
<li class="rank07">
<p class="rank-title"><a href="#">ランク07の項目が入ります</a></p>
</li>
<li class="rank08">
<p class="rank-title"><a href="#">ランク08の項目が入ります</a></p>
</li>
<li class="rank09">
<p class="rank-title"><a href="#">ランク09の項目が入ります</a></p>
</li>
<li class="rank10">
<p class="rank-title"><a href="#">ランク10の項目が入ります</a></p>
</li>
</ol>

メダルのランキング

メダルとランクの数字が表示されるランキングのHTML雛形です。

  1. ランク01の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  2. ランク02の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  3. ランク03の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  4. ランク04の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  5. ランク05の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  6. ランク06の項目が入ります

  7. ランク07の項目が入ります

  8. ランク08の項目が入ります

  9. ランク09の項目が入ります

  10. ランク10の項目が入ります

<ol class="ranking-list ranking-list02">
<li class="rank01">
<h4 class="rank-title"><a href="#">ランク01の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title"><a href="#">ランク02の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title"><a href="#">ランク03の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title"><a href="#">ランク04の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title"><a href="#">ランク05の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank06">
<p class="rank-title"><a href="#">ランク06の項目が入ります</a></p>
</li>
<li class="rank07">
<p class="rank-title"><a href="#">ランク07の項目が入ります</a></p>
</li>
<li class="rank08">
<p class="rank-title"><a href="#">ランク08の項目が入ります</a></p>
</li>
<li class="rank09">
<p class="rank-title"><a href="#">ランク09の項目が入ります</a></p>
</li>
<li class="rank10">
<p class="rank-title"><a href="#">ランク10の項目が入ります</a></p>
</li>
</ol>

シンプルなランキング

ランクの数字のみが表示されるシンプルなランキングのHTML雛形です。

  1. ランク01の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  2. ランク02の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  3. ランク03の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  4. ランク04の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  5. ランク05の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  6. ランク06の項目が入ります

  7. ランク07の項目が入ります

  8. ランク08の項目が入ります

  9. ランク09の項目が入ります

  10. ランク10の項目が入ります

<ol class="ranking-list ranking-list03">
<li class="rank01">
<h4 class="rank-title"><a href="#">ランク01の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title"><a href="#">ランク02の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title"><a href="#">ランク03の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title"><a href="#">ランク04の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title"><a href="#">ランク05の項目が入ります</a></h4>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank06">
<p class="rank-title"><a href="#">ランク06の項目が入ります</a></p>
</li>
<li class="rank07">
<p class="rank-title"><a href="#">ランク07の項目が入ります</a></p>
</li>
<li class="rank08">
<p class="rank-title"><a href="#">ランク08の項目が入ります</a></p>
</li>
<li class="rank09">
<p class="rank-title"><a href="#">ランク09の項目が入ります</a></p>
</li>
<li class="rank10">
<p class="rank-title"><a href="#">ランク10の項目が入ります</a></p>
</li>
</ol>

画像の上に番号を重ねる

画像の上にランクの数字が重なって表示されるランキングのHTML雛形です。

  1. ランク01の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  2. ランク02の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  3. ランク03の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  4. ランク04の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

  5. ランク05の項目が入ります

    ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。

<ol class="ranking-list ranking-list03">
<li class="rank01 on-image">
<h4 class="rank-title"><a href="#">ランク01の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank02 on-image">
<h4 class="rank-title"><a href="#">ランク02の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank03 on-image">
<h4 class="rank-title"><a href="#">ランク03の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank04 on-image">
<h4 class="rank-title"><a href="#">ランク04の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
<li class="rank05 on-image">
<h4 class="rank-title"><a href="#">ランク05の項目が入ります</a></h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="200" height="200" /></div>
<p class="rank-desc">ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。ランキングの説明文が入ります。</p>
</li>
</ol>

商品情報比較

王冠の商品比較

商品情報のレビュー(批評)、商品情報の比較で利用できるHTMLの雛形です。王冠とランクの数字が表示されます。

  1. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

  2. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

  3. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

<ol class="ranking-list comparative-list01">
<li class="rank01">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table></div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
<li class="rank02">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl></div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
<li class="rank03">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl></div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
</ol>

画像の上に番号を重ねる商品比較

商品情報のレビュー(批評)、商品情報の比較で利用できるHTMLの雛形です。画像の上に重ねてランクの数字が表示されます。

  1. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

  2. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

  3. 商品名・メーカー名が入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,400円(税込)
    容量:
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。

    商品詳細を見る

<ol class="ranking-list comparative-list02">
<li class="rank01 on-image">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table></div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
<li class="rank02 on-image">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl></div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
<li class="rank03 on-image">
<h4 class="rank-title">商品名・メーカー名が入ります</h4>
<div class="rank-thumb"><img src="./img.png" alt="" width="330" height="250" />
<table class="review-table">
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格:</dt><dd><span class="red f12em">2,400円</span><small>(税込)</small></dd>
</dl>
<dl>
<dt>容量:</dt><dd>150ml</dd>
</dl></div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>レビューが表示されます。レビューが表示されます。レビューが表示されます。レビューが表示されます。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
</ol>

以上