楽天商品画像に隙間を作る

楽天の商品画像は、画像サイズぎりぎりに商品が拡大されていたりするので、ちょっと隙間を作ろうと思いサンプルを作ってみました。

表示イメージ

横方向は、width:72px のボックス内でセンタリングされます。縦方向もセンタリングしたかったのですが出来なかったので、商品画像の縦サイズによって成り行きとなっています。私の力量が足りませんでしたｗ

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>楽天商品画像に隙間を作る</title>
<style type="text/css">
<!--
p {
	font-size: 75%;
	line-height: 150%;
}
p.rakuten {
	margin: 0.25em 1em 0.5em 0em;
	padding: 4px;
	float:left;
	clear:left;
	/*height: 64px;*/
	width: 64px;
	background-color: #FFFFFF;
	text-align: center;
	/*line-height: 64px;*/
  }
body {
	background-color: #CCCCCC;
}
h2 {
	clear:left;
}
-->
</style>
</head>
<body>
<h2>楽天商品画像の表示</h2>
<p class="rakuten"><a href="#"><img src="img_v.gif" border=0 alt=""></a></p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<h2>楽天商品画像の表示</h2>
<p class="rakuten"><a href="#"><img src="img_h.gif" border=0 alt=""></a></p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</body>
</html>

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。