楽天ランキングカスタマイズ　価格比較のウェルモッチ

好きなデザインで楽天ランキングを掲載できる楽天ランキングカスタマイズタグ。実際にカスタマイズを行う際のヘルプブログです。アフィリエイト報酬アップにお役立てください。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

|
▲Top

タグの基本構造

　楽天ランキングカスタマイズで発行されたタグを変更して、お好みの形式で表示させることができます。
　なおタグの変更にあたっては、HTMLおよびスタイルシートの基礎的な知識が必要です。

　楽天ランキングカスタマイズでアフィリエイトIDを入力し、なにも変更せずにそのまま出力した場合、下記のようなタグが発行されます。

<script type="text/javascript">
afid = 'affiliateId';
item_cnt = 5;
name_len = 30;
split_cnt = 1;
split_tag = '<div class="splt"></div>';
style_tag = '#wlmc *{color:black;font-size:11px;letter-spacing:0;line-height:140%;}#wlmc p{margin:0;}#wlmc img{border:0;}#wlmc a{color:blue;text-decoration:underline;}#wlmc .rr_title{font-weight:bold;font-size:13px;margin:5px;}#wlmc .item{width:200px;float:left;margin:5px;}#wlmc .splt{clear:both;height:1px;overflow:hidden;border-bottom:1px solid #CDCDCD;margin:0 5px;} #wlmc .img{float:right;margin-left:5px;}#wlmc .nm a{font-size:13px;}#wlmc .rr_price{color:crimson;font-weight:bold;font-size:13px;text-align:right;}#wlmc .icn{text-align:right;margin:3px 0;}';
header_tag = '<table width="215px" id="wlmc" border="0" cellpadding="0" style="background:#F5F9FD;border:1px solid #A5C5E3;"><tr><td><p class="rr_title">楽天総合ランキング</p>';
footer_tag = '<p style="text-align:right;font-size:11px;margin:5px;">[!update]<br>[!wlmclink]</p></td></tr></table>';
item_tag = '<div class="item"><p class="img"><img src="[!img_s]" height="64"></p><p class="nm"><a href="[!url]" target="_blank">[!name]</a></p><div style="clear:both;"></div><p class="rr_price">￥[!price]</p><p class="icn">[!post][!cc][!oversea][!asrk]</p><p>レビュー[!revcnt]件（[!revavg]/5）</p><p>[!desc]</p><p align="right"><a href="[!scode]" target="_blank">[!sname]</a>[!soy]</p></div>';
</script>
<script type="text/javascript"
src="http://welmotch.jp/rr/disp.php?xm=g_0">
</script>

それでは、上から順にタグの意味を簡単にご説明します。

・設定セクション（２～5行目）

afid = 'affiliateId';
item_cnt = 5;
name_len = 30;
split_cnt = 1;

この部分では表示に関する全般的な設定を行います。
表示するアイテム数、アイテムタイトルの表示文字数、背景色などを設定します。

・テンプレートセクション（6～10行目）

split_tag = '<div class="splt"></div>';
style_tag = '#wlmc *{color:black;font-size:11px;letter-spacing:0;line-height:140%;}#wlmc p{margin:0;}#wlmc img{border:0;}#wlmc a{color:blue;text-decoration:underline;}#wlmc .rr_title{font-weight:bold;font-size:13px;margin:5px;}#wlmc .item{width:200px;float:left;margin:5px;}#wlmc .splt{clear:both;height:1px;overflow:hidden;border-bottom:1px solid #CDCDCD;margin:0 5px;} #wlmc .img{float:right;margin-left:5px;}#wlmc .nm a{font-size:13px;}#wlmc .rr_price{color:crimson;font-weight:bold;font-size:13px;text-align:right;}#wlmc .icn{text-align:right;margin:3px 0;}';
header_tag = '<table width="215px" id="wlmc" border="0" cellpadding="0" style="background:#F5F9FD;border:1px solid #A5C5E3;"><tr><td><p class="rr_title">楽天総合ランキング</p>';
footer_tag = '<p style="text-align:right;font-size:11px;margin:5px;">[!update]<br>[!wlmclink]</p></td></tr></table>';
item_tag = '<div class="item"><p class="img"><img src="[!img_s]" height="64"></p><p class="nm"><a href="[!url]" target="_blank">[!name]</a></p><div style="clear:both;"></div><p class="rr_price">￥[!price]</p><p class="icn">[!post][!cc][!oversea][!asrk]</p><p>レビュー[!revcnt]件（[!revavg]/5）</p><p>[!desc]</p><p align="right"><a href="[!scode]" target="_blank">[!sname]</a>[!soy]</p></div>';