簡単につくれるホームページHTML入門 商品説明など 価格：400円		HTMLハンドブック 商品説明など 価格：648円
	HTMLレイアウトスタイル辞典 商品説明など 価格：743円		図解で分かる XMLのすべて 商品説明など 価格：743円

横に２つの商品を載せたスタイルの商品掲載方法を紹介します。少ないスペースに商品を載せる事が出来る為、縦スクロールを減らす事が出来ます。
タグはこちらです↓
<table border = 0 width = 100%><TR><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f548687%2f%23492004" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040691921.gif" border=0 alt="簡単につくれるホームページHTML入門"></a><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f548687%2f%23492004" target="_blank">簡単につくれるホームページHTML入門</A><BR>商品説明など<BR><B>価格：<font color = red>400</font>円<TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f591161%2f%23548204" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040974567.jpeg" border=0 alt="HTMLハンドブック"></a><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f591161%2f%23548204" target="_blank">HTMLハンドブック</a><BR>商品説明など<BR><B>価格：</B><font color = red>648</font>円<TR><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f549456%2f%23493426" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040700492.gif" border=0 alt="HTMLレイアウトスタイル辞典"></a><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f549456%2f%23493426" target="_blank">HTMLレイアウトスタイル辞典</a><BR>商品説明など<BR><B>価格：</B><font color = red>743</font>円<TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f657905%2f%23616457" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img10401306727.jpeg" border=0 alt="図解で分かる XMLのすべて"></a> <TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f657905%2f%23616457" target="_blank">図解で分かる XMLのすべて</a><BR>商品説明など<BR><B>価格：</B><font color = red>743</font>円</table>
順を追ってコードの解説をしていきます。

<table border = 0 width = "100%">

▲テーブルで作ってあります。枠をつけるのならば border = ??
の??に好きな数字を入れてください。ちなみに、枠の色は bordercolor = "色" で変更できます。
＊width = 100%　は記事横一杯に表示される為にあります。％で設定すると画面サイズなどに影響されにくくなります。

<TR><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f548687%2f%23492004" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040691921.gif" border=0 alt="簡単につくれるホームページHTML入門"></a>

▲左一段目の部分の画像です。楽天市場の商品です。

<TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f548687%2f%23492004" target="_blank">簡単につくれるホームページHTML入門

▲左一段目の商品タイトルリンクです。

<BR>商品説明など<BR>

▲左一段目の商品説明です。＜br＞は一段改行をさせるタグです。

<B>価格：<font color = red>400</font>円

▲左一段目の商品説明をいれて下さい。商品説明が必要なければこの部分をそっくり消してもらってＯＫです。

<TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f591161%2f%23548204" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040974567.jpeg" border=0 alt="HTMLハンドブック"></a><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f591161%2f%23548204" target="_blank">HTMLハンドブック</a><BR>商品説明など<BR><B>価格：</B><font color = red>648</font>円

▲右一段目です。やり方は左一段目と同じです。

<TR><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f549456%2f%23493426" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img1040700492.gif" border=0 alt="HTMLレイアウトスタイル辞典"></a><TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f549456%2f%23493426" target="_blank">HTMLレイアウトスタイル辞典</a><BR>商品説明など<BR><B>価格：</B><font color = red>743</font>円

▲左二段目です。やり方は左一段目と同じです。

<TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f657905%2f%23616457" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/digpro/img64/img10401306727.jpeg" border=0 alt="図解で分かる XMLのすべて"></a> <TD><a href="http://pt.afl.rakuten.co.jp/c/011a1868.df4c5261/?url=http%3a%2f%2fwww.rakuten.co.jp%2fdigpro%2f510029%2f548831%2f657905%2f%23616457" target="_blank">図解で分かる XMLのすべて</a><BR>商品説明など<BR><B>価<格：/B><font color = red>743</font>円

▲右二段目です。やり方は左一段目と同じです。

</table>

▲ここまで

どうでしょうか？一度自分でやってみないと分かって頂くのは難しいと思います。
一度ページ上部にあるタグをコピーして自分のブログに貼り付け、いろいろとカスタマイズしながら構造を把握して欲しいと思います。
そこからカスタマイズなどしていくと分かってくると思います。

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL：
http://fc2blogshop.blog13.fc2.com/tb.php/12-e13edccc

コメント