<a id="YahooShoppingLink" href="http://web-sozai.seesaa.net/" target="_blank">Yahoo!ショッピング コンテンツマッチ</a>Yahoo!ショッピング コンテンツマッチ
↑シンプル表示
このタグの位置に表示される。
id属性で表示タイプが変わる。
target属性は変更可能。
<a id="YahooShoppingLink1" href="http://web-sozai.seesaa.net/" target="_blank">Yahoo!ショッピング コンテンツマッチ</a>Yahoo!ショッピング コンテンツマッチ
↑商品番号指定
YahooShoppingLinkの後ろに0-5の数字をつけると商品がかぶらずに最大6個まで好きな位置に設置できる。
<a id="YahooShoppingRotation" href="http://web-sozai.seesaa.net/" target="_blank">Yahoo!ショッピング コンテンツマッチ</a>Yahoo!ショッピング コンテンツマッチ
↑ローテーションインライン表示
<div style="position:relative;overflow:hidden;width:468px;font-size:small"><a id="YahooShoppingSlide" href="http://web-sozai.seesaa.net/" target="_blank">Yahoo!ショッピング コンテンツマッチ</a> </div>
↑移動するリンク表示
領域幅を固定する必要があるので、このタイプのみ親ブロックが必要。
親ブロックには、position属性でrelativeやfixedなどを指定する必要がある。
親ブロックはoverflow:hidden;ではみ出し非表示にする。
親ブロックのwidth属性は変更可能だが、pxでかならず指定。
font-sizeの指定は必要ないが、nomalだと横幅468pxで収まらない商品がたまにある。
<div>この範囲</div>に を入れて高さを確保する必要がある。(height属性で指定してもいい)
<div>ではなく、display:inline-block; な<span>とかに変更すればインラインブロックにできる。
<script src="ysa.js" charset="utf-8"></script>↑本体スクリプトを読み込む。
ディレクトリが違う場合はsrc属性を変更。
<script>↑Yahoo!デベロッパーネットワークを利用するスクリプト。
var appid="デベロッパーネットワークのアプリケーションID";
var affiliate_id="Yahoo!アフィリエイトIDまたはバリューコマースアフィリエイトID";
var affiliate_type="Yahoo!アフィリエイトなら「yid」、バリューコマースなら「vc」";
var url=location.href;
url=encodeURIComponent(url);
var script=document.createElement('script');
script.src="http://shopping.yahooapis.jp/ShoppingWebService/V1/json/contentMatchItem?callback=YahooShopping&url="+url+"&appid="+appid+"&affiliate_id="+affiliate_id+"&affiliate_type="+affiliate_type;
script.charset="utf-8";
document.body.appendChild(script);
</script>
本体スクリプトよりも後ろに記述する。
appid
affiliate_id
affiliate_type
に自分のIDを指定してください。
上記のコードの場合、設置ページにコンテンツマッチする。
マッチさせるアドレスを指定したい場合は
var url="http://web-sozai.seesaa.net/";
のように。
インラインフレームで設置し、トップフレームにマッチさせたい場合は、
var url=window.top.location.href;
にする。

↑クレジット表示
Yahoo!デベロッパーネットワークのAPIを使う場合、クレジットを表示する必要があります。
テキストタイプなどもあります。
【Yahoo!ショッピング コンテンツマッチ広告の最新記事】