スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

前後の記事

最近の記事

管理者にだけ表示を許可する

横2列の商品の並べ方


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

横に2つの商品を載せたスタイルの商品掲載方法を紹介します。少ないスペースに商品を載せる事が出来る為、縦スクロールを減らす事が出来ます。
タグはこちらです↓

順を追ってコードの解説をしていきます。
<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>円
▲左一段目の商品説明をいれて下さい。商品説明が必要なければこの部分をそっくり消してもらってOKです。
<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


コメント

管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。