WordPressテーマ「CUBEY (tcd023)」
 

【賢威6.1】ランキングページの作成とタグ使用方法

賢威6ランキング作成賢威6.1のランキングページの作成方法とタグ使用方法をご紹介します。

賢威には予めランキングのタグがスタイルシートで組み込まれています。これを使用することで、整ったランキングを作成することが出来ます。




賢威ランキング作成HTML例

今回の賢威6.1のHTML版からのソース抜出しをちょっぴり変更しています。
出来上がるランキング表は以下の通り。

  • 商品名1

    賢威ランキング1

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名2

    賢威ランキング2

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名3

    賢威ランキング3

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名4

    ここにテキストが入ります。ここにテキストが入ります。

  • 商品名5

    ここにテキストが入ります。ここにテキストが入ります。

賢威6.1ランキングHTMLソース

<!--ランキング-->
<div class="contents">
<ul class="ranking">
<li class="no01">
<p class="item-name">商品名1</p>
<p class="item-img"><img src="画像のURL" width="200" height="200" alt="altタグ" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="リンク先URL">「商品名1」の詳細を見る</a></p>
</li>

<li class="no02">
<p class="item-name">商品名2</p>
<p class="item-img"><img src="画像のURL" width="200" height="200" alt="altタグ" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="リンク先URL">「商品名2」の詳細を見る</a></p>
</li>

<li class="no03">
<p class="item-name">商品名3</p>
<p class="item-img"><img src="画像のURL" width="200" height="200" alt="altタグ" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="リンク先URL">「商品名3」の詳細を見る</a></p>
</li>

<li class="no04">
<p class="item-name">商品名4</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="リンク先URL">「商品名4」の詳細を見る</a></p>
</li>

<li class="no05 end">
<p class="item-name">商品名5</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="リンク先URL">「商品名5」の詳細を見る</a></p>
</li>
</ul>
</div>
<!--/ランキング-->

賢威ランキング作成タグ使用の注意点

画像のURLはメディアから情報を取ります。altタグはしっかり入れましょう。

今回の例ではランキング4と5は画像を入れていませんが、画像を入れたい場合はランキング1~3と同様のソースです。

ランキングは10位まで作れます。ランキングの最終のクラスタグにはendを挿入する必要があります。

例えば7位までのランキングだったら、以下のようにします。

<li class="no07 end">

画像を使わないランキングの場合

  1. 商品名1

    ここにテキストが入ります。

  2. 商品名2

    ここにテキストが入ります。

  3. 商品名3

    ここにテキストが入ります。

  4. 商品名4

    ここにテキストが入ります。

  5. 商品名5

    ここにテキストが入ります。

HTMLソース

<ol class="ranking"> 
<li class="no01"> 
<p class="item-name"><a href="http://keni-love.com/rankingtag.html">商品名1</a></p> 
<p>ここにテキストが入ります。</p></li>

<li class="no02"> 
<p class="item-name"><a href="http://keni-love.com/rankingtag.html">商品名2</a></p> 
<p>ここにテキストが入ります。</p></li>

<li class="no03"> 
<p class="item-name"><a href="http://keni-love.com/rankingtag.html">商品名3</a></p> 
<p>ここにテキストが入ります。</p></li>

<li class="no04"> 
<p class="item-name">商品名4</p> 
<p>ここにテキストが入ります。</p></li>

<li class="no05 end"> 
<p class="item-name">商品名5</p> 
<p>ここにテキストが入ります。</p> 
</li> 
</ol>

いかがでしたか?
このHTMLソースがあれば、賢威でランキングページは簡単に作成することが出来ます。アフィリエイトやブログにお役立てください。

Pocket

WordPressテーマ「CUBEY (tcd023)」 
 

Sponsored Link

WordPressテーマ「BlogPress (TCD010)」

コメントを残す

このページの先頭へ