ワードプレステンプレートの賢威８
で商品やサービスを紹介する時に
ランキング形式や比較表示させたい場合の方法を説明します。
アフィリエイトなどで商品を紹介する時は、自分が売りたい（買ってもらいたい）商品を
単品で紹介すると、
購入者は「セールスされている」「押し売りされている」と感じてしまいます。
ランキング形式や比較表示させ、メリット・デメリットをきちんと記載すると
購入者からは信頼されやすい記事になります。
最後にもお話ししますが、もしあなたがアフィリエイターで
アフィリエイトで稼ぎたいと思っている方なら、これは覚えておいて下さい。
賢威でデザインや見栄えにこだわって時間を費やすのは無駄
提供されているスタイルシート、コードだけを使ってサイトを作りましょう
アフィリエイトで大事な事は、稼ぐ事ですよね？
デザインではないですよ
→アフィリエイトでまだ稼いでいないなら私の特典付きでこの商材を購入した方が良いです
このランキング形式は賢威で提供されているコードで
この様な形で表示されます
パターン１
当サイトでも他ページでこのランキングスタイルタグを使用して
記事を作成してみました
→賢威８でランキング形式の記事作成 オンライン英会話おすすめ
パターン２
賢威８ランキング表示のタグ・コード パターン１
下記コードを記事作成の”テキスト”に入力してください
<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–>
賢威８ランキング表示のタグ・コード パターン２
<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>
もっとオシャレにしたい！
賢威って、正直見栄え的には余り良くないワードプレスだと思います。
なので、もっとかっこよく見栄え良くしたいと思う人もいるかもしれませんが、
もし、あなたがアフィリエイターで稼ぐ事に重点を置くなら
デザインに時間を費やさないで下さい。
今、賢威ですぐに出来るデザインを駆使して、その範囲内でサイトを作りましょう。
かっこよいサイト＝稼げるサイト
ではありません。
私を始め、月収数百万～数千万稼ぐアフィリエイターも、サイトのデザインなんて
大したことありません。
大体、稼いでいるサイトを公開すると
皆さん、「こんなもんで良いの？」って驚かれます。
コメント