超初心者向け商品紹介テンプレート２
超初心者アフィリエイター向けテンプレート２・商品紹介テーブル／横２列x縦２段
商品紹介テーブル／横２列x縦２段簡単な商品紹介テーブルを作りました。ただのテーブルですが、楽天のテンプレートは複雑で管理しにくいので、よりシンプルなものを自分用に作りました。貼付ける場所を迷わないようにコメント行を加えました。
今回は、ちょっと枠線をつけてみました。本来なら、CSS で書いた方がいいのでしょうが、楽天ユーザー向けにすぐにペーストして使えるテーブルタグを使ったものにしました。初心者の方でも、分かりやすい１商品１行のタイプです（と書いている初心者も楽天を始めた２カ月弱前までは、ウェブデザインソフト一辺倒の HTML の素人ですが）。
商品紹介テーブル／横２列x縦２段
- 商品追加自由自在：<!-- ---------- 商品１ ---------- --> と <!-- ---------- /商品１ ---------- --> とで挟まれた部分を <!-- ---------- /商品２ ---------- --> の後ろにコピー＆ペーストすれば、商品数を好きなだけ増やせます。
- cell の背景色は、<td valign="top" bgcolor="#fffff0" width="120"> のように指定可能です。
- 画像の横幅は、１番目が 70 px まで、２番目が 120 px までです。
実際の表示例は、HTML コードの下にあります。
追記１： 自分で確認してみましたが、楽天の絵本の商品写真だと、120px はちょっと間が抜けて見えますね。 width="120" の部分を適当に変更してお試し下さい。 なお、ココログでお使いになる場合には、商品内容紹介欄の横幅を小さくする必要があります。ココログの CSS を見ると、コンテンツエリアは以下のように設定されています。つまり、横幅は 400px 以下でないとだめです。 #center { float: left; width: 400px; }
追記２： 楽天の中央カラム用に１列目 70 px、２列目 300 px の例を掲載しました（楽天の提供するアフィリエイト画像は、調べた限りでは幅 64 px でした）。表全体の横幅も 400px 以下にしましたので、ココログでも使えるはずです。 valign="baseline" から valign="top" に変更しました。
<!-- ===== 商品紹介テーブル／横２列x縦２段 楽天センターカラム用 ===== --> <!-- 商品の紹介文は、オレンジ色（#FFA500）70px:300px --> <!-- コピー＆ペーストで商品の数は、増やせます --> <table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999"> <tr> <td> <table border="0" cellspacing="2" cellpadding="2"> <!-- ---------- 商品１ ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="70"> <!-- ↓商品１アフィリエイト用画像 --> ▽商品１アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="300"> <!-- ↓商品１アフィリエイト用テキストリンクのソース --> ▽商品１アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品１紹介文 --> ▽商品１紹介文△ </font></p> </td> </tr> <!-- ---------- /商品１ ---------- --> <!-- ---------- 商品２ ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="70"> <!-- ↓商品２アフィリエイト用画像 --> ▽商品２アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="300"> <!-- ↓商品２アフィリエイト用テキストリンクのソース --> ▽商品２アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品２紹介文 --> ▽商品２紹介文△ </font></p> </td> </tr> <!-- ---------- /商品２ ---------- --> </table> </td> </tr> </table> <!-- ===== /商品紹介テーブル／横２列x縦２段 ===== -->
<!-- ===== 商品紹介テーブル／横２列x縦２段 ===== --> <!-- 商品の紹介文は、オレンジ色（#FFA500）120px:400px --> <!-- コピー＆ペーストで商品の数は、増やせます --> <table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999"> <tr> <td> <table border="0" cellspacing="2" cellpadding="2"> <!-- ---------- 商品１ ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="120"> <!-- ↓商品１アフィリエイト用画像 --> ▽商品１アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="400"> <!-- ↓商品１アフィリエイト用テキストリンクのソース --> ▽商品１アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品１紹介文 --> ▽商品１紹介文△ </font></p> </td> </tr> <!-- ---------- /商品１ ---------- --> <!-- ---------- 商品２ ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="120"> <!-- ↓商品２アフィリエイト用画像 --> ▽商品２アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="400"> <!-- ↓商品２アフィリエイト用テキストリンクのソース --> ▽商品２アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品２紹介文 --> ▽商品２紹介文△ </font></p> </td> </tr> <!-- ---------- /商品２ ---------- --> </table> </td> </tr> </table> <!-- ===== /商品紹介テーブル／横２列x縦２段 ===== -->
おすすめおもちゃ（実際の表示例）
おすすめ絵本の紹介の場合
70px:300px 楽天広場センターカラム用 
|
100万回生きたねこ
絵本ナビShop |
|
とけいのほん2
絵本ナビShop |
120px:400px
|
|
100万回生きたねこ
絵本ナビShop |
|
|
とけいのほん2
絵本ナビShop |
© Rakuten Group, Inc.
