もう設置してしばらく経つのでお分かりだと思いますが、｢Google AdSense｣と、｢Amazonアソシエイト・プログラム｣に登録して、広告バナーを設置しています。ちょっと仕事絡みで登録から設置まで一連の流れを体感しておく必要があったのが理由なんですヨ。とりあえず、自分のサイトで　どのくらい稼げるかという興味もあったので、設置したままにしておきます。アフィリエイトで儲けて生活しようとは思ってないです。そういうエントリーも書きたくないですし。で、その流れで、エントリーでAmazonで扱っている商品(本・CD・DVD・ホビー・電器製品等)に関する事を書いたら、Amazonのそのページに移動するようにしたいと思ったのですが、Amazonの標準の表示ではちょっとデザイン的に辛いんですよ。確か、タグの生成サービスがあったなと思い出し、｢amazlet.com｣と、｢G-Tools｣というサイトを見つけました。

2つを検討して、自分のサイトには、｢G-Tools｣ほ採用することにしました。｢amazlet.com｣は、生成されるタグがXHTMLでは禁じ手になっている<table> タグでレイアウトされたモノしか提供されていなかったのが、やめた理由です。

｢G-Tools｣の方は、XHTML用に、<table> タグなしのタグを生成してくれるのが決め手でした。自由に表示項目を変更できるのも魅力ですね。この自動生成タグに書かれているclass名に合わせて、自分でCSSを書いて、サイトのデザインに合うようにレイアウトを適用しています。ある程度、CSSを分かる方は、この方法はオススメですよ。

CSS書くの面倒臭いっていう人のために、ついでに、そのCSSを公開します。ご自分のサイトに合わせて数値を変えてみてください。

.hreview {
	width: 370px;
	margin: 0px;
	padding: 0px;
}
.hreview dl {
	margin: 0px;
	padding: 0px;
}
.hreview dt {
	font-size: 1em;
	font-family: "Hiragino Kaku Gothic Std", "ヒラギノ角ゴ Std W8", "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
.hreview dd {
	font-size: 0.9em;
	text-align: left;
	line-break: strict;
	margin: 0px 0px 5px;
	padding: 0px;
}
.hreview img.photo {
	float: right;
	margin: 0px 0px 10px 10px;
	padding: 0px;
}
.hreview p.gtools {
	font-size: 0.8em;
	text-align: left;
}

このCSSは、商品写真が右に来るようになっていますが、左にしたい場合は、.hreview img.photo以下のfloatをleftにして、margin: 0px 0px 10px 10px;をmargin: 0px 10px 10px 0px;に変えればOKです。