楽天アフィリエイトとYahoo!ショッピングアフィリエイトの表示

少し前ですが、このブログで楽天アフィリエイトとYahoo!ショッピングアフィリエイトを利用してみました（楽天の例、Yahoo!の例）。

両者の生成するHTMLはあまりきれいではないようで、Markup Validation Serviceでエラーが出まくります。このブログ内でも、これらのアフィリエイトHTMLを含まないページだったらエラーが出ないのですが…。

商品画像に文字を回り込ませるために、商品画像を<div class=”photo”></div>で囲んでいます。先に追加した携帯対応プラグインで、携帯からアップした画像にこのタグをつけてCSSを追加して回り込ませているので、それを流用しています。

Yahoo!ショッピングアフィリエイトでは、Yahoo!IDでログインしていれば、リンク生成ページですぐさまアフィリエイトリンクが作れます。仕組みは非常に単純で、リンク先と画像のURLをユーザーが指定すれば、その画像で指定したリンク先URLにジャンプさせるアフィリエイトリンクHTMLを生成しています。画像のURLは、例として「http://shopping.yahoo.co.jp/photo.gif」なんてのが出ていますが、 普通にECサイトの商品ページを見て、商品の画像URLを抜き出すなんて一般の人ができるのかなあ？　と不思議に思ったりもしました。

ちなみにこの作業は、firefoxを使っていれば、画像の上で右クリックして「画像のURLをコピー」すれば画像URLをクリップボードに出力できます。

楽天アフィリエイトでは、商品名で楽天内を検索できて、検索結果に現れるボタンを押すと商品への画像入りリンクHTMLを生成してくれます。Yahoo!ショッピングアフィリエイトもせめてそのくらいした方がいいのでは…。と思いました。

また、Yahoo!ショッピングアフィリエイトでは、生成するアフィリエイトリンクHTML内に、1*1サイズの画像をトラッキングのために埋め込んでいます。このブログで利用しているCSSが、img画像には全て枠をつける処理をしているせいで、その画像が大きい四角になって表示されてしまうという問題がありました。そこで、トラッキング用imgタグにクラス指定し、このクラスでは枠をつけないCSSを追加して処理しました。

以下が追加したCSSです。


/* ----- Style for Yahoo! Shopping Affiriate ----- */
img.ysa_hidden {
margin:0;
padding:0;
border:none;
}
/* ---------- */


以下がアフィリエイトリンク内に埋め込まれているトラッキング用imgタグですが、太字にしたクラス（ysa_hidden）を追加して対応しました。

<img Src="http://atq.ad.valuecommerce.com/（省略）" height="1" width="1" border="0" class=”ysa_hidden”>

さらに、画像回り込みのために追加しているCSSは以下の通りです。wordpress用プラグイン「Ktai Entry」で紹介されているものと同じです。


/* ----- Style for Ktai Entry ----- */
.photo {
padding-right:6px;
float:left;
line-height:110%;
font-size:0.85em;
text-indent:0;
}
.photo img {
background:white;
margin:0 4px 4px 0;
padding:3px;
border:1px solid #999;
}
.photo-end {
clear:left;
}
/* ---------- */