1571016 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

ものぐさ父さんの子育て

超初心者向け商品紹介テンプレート2

超初心者アフィリエイター向けテンプレート2・商品紹介テーブル/横2列x縦2段

商品紹介テーブル/横2列x縦2段

簡単な商品紹介テーブルを作りました。ただのテーブルですが、楽天のテンプレートは複雑で管理しにくいので、よりシンプルなものを自分用に作りました。貼付ける場所を迷わないようにコメント行を加えました。

今回は、ちょっと枠線をつけてみました。本来なら、CSS で書いた方がいいのでしょうが、楽天ユーザー向けにすぐにペーストして使えるテーブルタグを使ったものにしました。初心者の方でも、分かりやすい1商品1行のタイプです(と書いている初心者も楽天を始めた2カ月弱前までは、ウェブデザインソフト一辺倒の HTML の素人ですが)。


商品紹介テーブル/横2列x縦2段
  • 商品追加自由自在:<!-- ---------- 商品1 ---------- --> と <!-- ---------- /商品1 ---------- --> とで挟まれた部分を <!-- ---------- /商品2 ---------- --> の後ろにコピー&ペーストすれば、商品数を好きなだけ増やせます。
  • cell の背景色は、<td valign="top" bgcolor="#fffff0" width="120"> のように指定可能です。
  • 画像の横幅は、1番目が 70 px まで、2番目が 120 px までです。

実際の表示例は、HTML コードの下にあります。


追記1: 自分で確認してみましたが、楽天の絵本の商品写真だと、120px はちょっと間が抜けて見えますね。 width="120" の部分を適当に変更してお試し下さい。 なお、ココログでお使いになる場合には、商品内容紹介欄の横幅を小さくする必要があります。ココログの CSS を見ると、コンテンツエリアは以下のように設定されています。つまり、横幅は 400px 以下でないとだめです。  #center {     float: left;     width: 400px;  }
追記2: 楽天の中央カラム用に1列目 70 px、2列目 300 px の例を掲載しました(楽天の提供するアフィリエイト画像は、調べた限りでは幅 64 px でした)。表全体の横幅も 400px 以下にしましたので、ココログでも使えるはずです。 valign="baseline" から valign="top" に変更しました。
<!-- ===== 商品紹介テーブル/横2列x縦2段 楽天センターカラム用 ===== -->
<!-- 商品の紹介文は、オレンジ色(#FFA500)70px:300px -->
<!-- コピー&ペーストで商品の数は、増やせます --> 

<table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999">
<tr>
	<td>
	<table border="0" cellspacing="2" cellpadding="2">
		<!-- ---------- 商品1 ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="70">
		<!-- ↓商品1アフィリエイト用画像 -->
		▽商品1アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="300">
		<!-- ↓商品1アフィリエイト用テキストリンクのソース --> 
		▽商品1アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品1紹介文 -->
		▽商品1紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品1 ---------- -->

		<!-- ---------- 商品2 ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="70">
		<!-- ↓商品2アフィリエイト用画像 -->
		▽商品2アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="300">
		<!-- ↓商品2アフィリエイト用テキストリンクのソース -->
		▽商品2アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品2紹介文 -->
		▽商品2紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品2 ---------- -->
	</table>
	</td>
</tr>
</table>
<!-- ===== /商品紹介テーブル/横2列x縦2段 ===== -->

<!-- ===== 商品紹介テーブル/横2列x縦2段 ===== --> <!-- 商品の紹介文は、オレンジ色(#FFA500)120px:400px --> <!-- コピー&ペーストで商品の数は、増やせます --> <table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999"> <tr> <td> <table border="0" cellspacing="2" cellpadding="2"> <!-- ---------- 商品1 ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="120"> <!-- ↓商品1アフィリエイト用画像 --> ▽商品1アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="400"> <!-- ↓商品1アフィリエイト用テキストリンクのソース --> ▽商品1アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品1紹介文 --> ▽商品1紹介文△ </font></p> </td> </tr> <!-- ---------- /商品1 ---------- --> <!-- ---------- 商品2 ---------- --> <tr> <td align="center" valign="center" bgcolor="white" width="120"> <!-- ↓商品2アフィリエイト用画像 --> ▽商品2アフィリエイト用画像△ </td> <td valign="top" bgcolor="white" width="400"> <!-- ↓商品2アフィリエイト用テキストリンクのソース --> ▽商品2アフィリエイト用テキストリンクのソース△ <p><font color="#ffa500"> <!-- ↓商品2紹介文 --> ▽商品2紹介文△ </font></p> </td> </tr> <!-- ---------- /商品2 ---------- --> </table> </td> </tr> </table> <!-- ===== /商品紹介テーブル/横2列x縦2段 ===== -->


おすすめおもちゃ(実際の表示例)

おすすめ絵本の紹介の場合

70px:300px 楽天広場センターカラム用
100万回生きたねこ 100万回生きたねこ

絵本ナビShop
絵本と絵本グッズの専門店!大人も子供も楽しめて癒されます!

とけいのほん2 とけいのほん2

絵本ナビShop
絵本と絵本グッズの専門店!大人も子供も楽しめて癒されます!



120px:400px
100万回生きたねこ 100万回生きたねこ

絵本ナビShop
絵本と絵本グッズの専門店!大人も子供も楽しめて癒されます!

とけいのほん2 とけいのほん2

絵本ナビShop
絵本と絵本グッズの専門店!大人も子供も楽しめて癒されます!



© Rakuten Group, Inc.