賢威8では、説明文付きのランキングリストを簡単に作ることができます。
ランキングリスト
ランキングリストです。
順位の数字は自動で取得しているので、リストを伸ばせば追加されます。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<ol class="ranking-list"> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="./images/sample001.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="./images/sample002.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="./images/sample003.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> </ol> |
情報比較エリア
情報比較リストです。
-
商品名が入ります(メーカー名)
- 価格:
- 2,000円(税込)
- 容量:
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります(メーカー名)
- 価格:
- 2,000円(税込)
- 容量:
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります(メーカー名)
- 価格:
- 2,000円(税込)
- 容量:
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<ol class="ranking-list comparative-list"> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="./images/sample004.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3> <div class="item-data"> <dl> <dt>価格:</dt> <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd> </dl> <dl> <dt>容量:</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h4 class="review_desc_title title_no-style">管理人のレビュー</h4> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="./images/sample005.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3> <div class="item-data"> <dl> <dt>価格:</dt> <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd> </dl> <dl> <dt>容量:</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h5 class="review_desc_title title_no-style">管理人のレビュー</h5> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="./images/sample006.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3> <div class="item-data"> <dl> <dt>価格:</dt> <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd> </dl> <dl> <dt>容量:</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h5 class="review_desc_title title_no-style">管理人のレビュー</h5> <p>管理人のレビューが入ります。管理人のレビューが入ります。</p> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> </ol><!--ranking-list--> |
なお、情報比較リストで利用しているレビューの星は、0.5ずつ用意しています。
レビューの星
0.5
1.0
1.5
2.0
2.5
3.0
3.5
4.0
4.5
5.0
5.5
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="review_star star00">0.0</span> <span class="review_star star05">0.5</span> <span class="review_star star10">1.0</span> <span class="review_star star15">1.5</span> <span class="review_star star20">2.0</span> <span class="review_star star25">2.5</span> <span class="review_star star30">3.0</span> <span class="review_star star35">3.5</span> <span class="review_star star40">4.0</span> <span class="review_star star45">4.5</span> <span class="review_star star50">5.0</span> <span class="review_star star55">5.5</span> |