賢威で商品ランキングページを作る方法

hiro

こんにちは、hiroです。 →hiroのプロフィールはこちら

どうも、山田です。
　
　
今回は、「賢威で商品ランキングページを作る方法」についてです。
　
　

商品ランキングは成約数を増やす効果的な手法

アフィリエイトで商品ランキングを作っておくことは、訪問者の迷いを解消し、購入を促す効果があります。
　
　
なぜなら、ランキング順位が高いと、それだけ他者評価も高いと認識するため、信頼度が高まるからです。
　
　
しかし、ランキング形式の表示は、アイコンやレイアウトについて初心者の方にはハードルが高く感じるかもしれませんが、実際はそこまで難しくはありません。
　
　
今回は、商品ランキングページを作る方法を紹介します。
　
　

ランキングのコードを貼るだけ

ランキングは賢威7ではテンプレートとして使うことができ、下記コードを貼り付けるだけです。
　
　
タイトルや画像、説明文は各自入れたい内容を入れます。

<!--ランキング-->
<div class="main-body">
<ul class="ranking-list ranking-list01">
<li class="rank01">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>
 
<li class="rank02">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li> 

<li class="rank03">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>
</ul>
</div>
<!--/ランキング-->

また、アイコンを変えたい場合には、上記のranking-list ranking-list01の「01」を、02、03に変えると、アイコンが変わりますので、試して見てください。
　
　
さらに、ranking-list ranking-list01をranking-list comparative-list01と変えても変わります。
　
　
他にも、星マークを入れたい場合には、下記のようなコードを追加していきます。
　
　

<div class="item-data">
<table class="review-table">
<tbody>
<tr>
<th class="w40">価格</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>使いやすさ</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star50">5.0</span></td>
</tr>
</tbody>
</table>
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">9,800円</span><small>（税抜）</small></dd>
</dl>
</div>

　
半角などの違いで反映されないこともあるので、しっかり途中バックアップを取るなどしながら作業して確認していくといいですね。
　
　

売りたい商品のランキング順位を高くする

ランキングについては、掲載する側の意向を反映することもできます。
　
　
なので、売りたい商品のランキングを高めに設定しておくことで、訪問者からするとより上位にある方が信頼度も増します。
　
　
ただし、やみくもに順位をあげればいいというわけではなく、ちゃんと根拠を持って順位づけすることも大切ですね。