ランキングテーブルの詳細｜無料配布テンプレートの素材コード一覧

＜素材コード一覧に戻る

まず基本のテーブルはこちらです。

このテーブルを下の方で分解して解説します。

1位	詳細はこちら	ここに案件名。 ここにUSPを書く。ランキング1位はなるべく多く書く。 ボタンの名を入力してください
2位	詳細はこちら	ここに案件名 ここにUSPを書く。ランキング2位の商品もたまに売れるので、しっかりとUSPを書く。でも、1位より目立たないように気をつける。2位の商品の特徴まで書き終わった時点で、しっかりと1位が目立っているか確認する。 ボタンの名を入力してください
3位	詳細はこちら	ここに案件名 ここにUSPを書く。このあたりからランキングサイトでは、いわゆる当て馬。アクションもほとんど発生しないので、手を抜きすぎない程度にさらっと紹介しておく。 ボタンの名を入力してください
4位	詳細はこちら	ここに案件名 ここにUSPを書く。当て馬2合なので、適当に書く。 ボタンの名を入力してください
5位	詳細はこちら	ここに案件名 ここにUSPを書く。当て馬3号なので、適当に書く。 ボタンの名を入力してください

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <!-- 段――――――――――――――― --> <tr> <th width="100">1位</th> <td width="200"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td width="460"><h2>ここに案件名。</h2> <p>ここにUSPを書く。ランキング1位はなるべく多く書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th width="100">2位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。ランキング2位の商品もたまに売れるので、しっかりとUSPを書く。でも、1位より目立たないように気をつける。2位の商品の特徴まで書き終わった時点で、しっかりと1位が目立っているか確認する。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th width="100">3位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。このあたりからランキングサイトでは、いわゆる当て馬。アクションもほとんど発生しないので、手を抜きすぎない程度にさらっと紹介しておく。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th>4位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。当て馬2合なので、適当に書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th>5位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。当て馬3号なので、適当に書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p></td> </tr> <!-- 段――――――――――――――― --> </table>

---

テーブル一行に分解してみます。

●位	詳細はこちら	ここに案件名。 ここにUSPを書く。ランキング1位はなるべく多く書く。 ボタンの名を入力してください

一行分のコードは以下になります。

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <tr> <th width="100">●位</th> <td width="200"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/serviceimage.png" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td width="460"><h2>ここに案件名。</h2> <p>ここにUSPを書く。ランキング1位はなるべく多く書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> <p>&nbsp;</p></td> </tr> </table>

では、2行の場合どうなるでしょうか？

●位	詳細はこちら	ここに案件名。 ここにUSPを書く。ランキング1位はなるべく多く書く。 ボタンの名を入力してください
●位	詳細はこちら	ここに案件名。 ここにUSPを書く。ランキング1位はなるべく多く書く。 ボタンの名を入力してください

正解は↓です。

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <tr> <th width="100">●位</th> <td width="200"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/serviceimage.png" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td width="460"><h2>ここに案件名。</h2> <p>ここにUSPを書く。ランキング1位はなるべく多く書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> <p>&nbsp;</p></td> </tr> <tr> <th width="100">●位</th> <td width="200"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/serviceimage.png" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td width="460"><h2>ここに案件名。</h2> <p>ここにUSPを書く。ランキング1位はなるべく多く書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> <p>&nbsp;</p></td> </tr> </table>

分かりにくいと思うので、テーブルの中身にあ　い　う　だけを入れてお見せします。

あ	い	う
あ	い	う

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <tr> <th width="100">あ</th> <td width="200">い</td> <td width="460">う</td> </tr> <tr> <th width="100">あ</th> <td width="200">い</td> <td width="460">う</td> </tr> </table>

テーブルの行を増やしたい場合は<tr>から</tr>までが増えています。
ランキングの順位を増やしたい時は、<tr>から</tr>のひとかたまりを（※１）テーブルタグ内に増やしてください。
減らしたい場合は<tr>から</tr>を削除です。

※１　テーブルタグ内とは　<table border="0" cellspacing="0" cellpadding="0" class="ranktable">　から　</table> です。

今「あ」が入っているのは
<th width="100">あ</th>　ここですよね？このタグで囲われたところが青くなっています。
ランキングならこの中に No1　や　１位　等を書いておけばよいでしょう。

次に、「い」が入っているのは
<td width="200">い</td> ここですよね？こちらには、画像等をおいてサービスのイメージを伝える場所です。

次に、「う」が入っているのは
<td width="460">う</td> ここですよね？こちらには、案件名や、説明、リンクボタンを設置します。

※それぞれ、文法的な決まりではなくランキングテーブルを前提にした解説です。

あ　い　う　がそれぞれ入っているものの共通点は行と言うことにもなりますが
セルと言う風に考えてください。

thが付いているものは、セルの中でも見出しのような役割と言う事です。

この、ｔｈや、ｔｄの中身の埋め方についてですが。

thやtdの中には、<p>段落</p>等もおけます。<h2><strong>見出し</strong></h2>等もおけます。

このような組み合わせで、以下のようなテーブルが出来ます。

美味しい水ランキング！

1位	詳細はこちら	ミネラルウォーター 商品によって、あうあわないがありますが、基本的にはカルキ臭さが無く美味しい水です。 硬水か、軟水かによっても、喉をうるおせるのか？ミネラルをとれるのか比重が変わるそうです。 お得な各種大人買いはこちら
2位	詳細はこちら	水道水 地域によっては不安のある水道水ですが、最も手軽で蛇口をひねるだけでほぼすべてのご家庭でお飲みいただく事が出来ます。 またお風呂いっぱいに水を出しても、ミネラルウォーターに比べて値段が安く済んで経済的です。 お近くの水道局を調べる。

1位のミネラルウォーターの　う　が入っていた場所のタグを見てみましょう。

<td width="460">
　<h2>ミネラルウォーター</h2>
　 <p>商品によって、あうあわないがありますが、基本的には<span class="ybg-big">カルキ臭さが無く</span>美味しい水です。</p>
　 <p>硬水か、軟水かによっても、喉をうるおせるのか？ミネラルをとれるのか比重が変わるそうです。</p>
　 <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>お得な各種大人買いはこちら</span></a></p>
</td>

このように、 td　や　th の開始タグ、閉じタグの間に、様々な要素が置けるということです。

ランキングサイトを作成する場合は、こちらの構造を大まかに理解しておく必要があります。

＜素材コード一覧に戻る