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

設定セクション仕様

発行されたカスタマイズタグの先頭部分を設定セクションと呼びます。
設定セクションは下記の５行から成り、表示上の基本的な設定を行います。

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

一行ずつ仕様を解説します。

・アフィリエイトID

afid = 'affiliateId';

１行目はアフィリエイトIDが入ります。アフィリエイトIDが正確に入力されていないと成果となりませんのでご注意ください。
なお、アフィリエイトIDの確認方法についてはアフィリエイトID確認をご覧ください。

・表示件数

item_cnt = 5;

２行目には表示件数が入ります。ランキングから取得したデータを何件表示するかを設定します。最大値は「10」です。

・アイテム名長さ制限

name_len = 30;

３行目はアイテム名の最大長を指定します。

・スプリットカウント

split_cnt = 1;

スプリットは表示の列数を指定します。ここで指定した数値は一行あたりの列数となります。
この例の「1」の場合は、縦に一列で表示されます。

例えば３×３の正方形で９件表示したい場合、この値を「3」にします。
横に５件×２行の横長にしたい場合はこの値を「5」とします。

・例
タグカスタマイズ画面のレイアウトで「2×5（10件）」を選択し発行したタグを修正しました。
横２列で６件表示したい場合の例です。アイテム名の長さは10文字に指定しました。

afid = 'affiliateId';
item_cnt = 6;
name_len = 10;
split_cnt = 2;

実際の表示は下記のようになります。

ご質問・不具合報告

ご質問や不具合のご報告はこちらのコメント欄にお願いいたします。

タグの基本構造

楽天ランキングカスタマイズで発行されたタグを変更して、お好みの形式で表示させることができます。
　なおタグの変更にあたっては、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>';

この部分では実際の表示に関するテンプレートが記載されています。この部分を修正することによって、ほぼどんな形式にでも対応出来るようになっています。
（非常に長い行ですのでスクロール表示にしました）

・表示セクション（13行目）

src="http://welmotch.jp/rr/disp.php?xm=g_0">

この部分で実際の表示処理を行います。パラメータ(xm)で表示するランキング情報を設定します。

ご利用上の注意事項

楽天ランキングカスタマイズは、ホームページ上で基本的なデザインの設定が出来ますが、発行されたタグをご自身で変更することにより自由なデザインでの表示が可能です。
　ただしタグの内容を変更する場合、HTMLおよびスタイルシートの基本的な知識が必要です。
　ブログのスキン修正が出来る方なら問題ないかと思います。

　また楽天ランキングカスタマイズをご利用いただく際は規約に同意していただく必要があります。

利用規約

楽天アフィリエイトIDの確認方法

楽天ランキングカスタマイズを利用する際には楽天アフィリエイトIDが必要になります。
　まだ楽天アフィリエイトに登録されていない場合は下記リンクからご登録ください。

楽天アフィリエイト

　登録完了またはすでに登録されている方は、下記の手順で楽天アフィリエイトIDをご確認ください。

１．楽天ウェブサービスにアクセス

２．画面左上のほうにある「アフィリエイトIDの確認」をクリック

楽天ランキングカスタマイズとは

ウェルモッチでは簡単に楽天ランキングタグのカスタマイズができる機能をご提供しています。
　無料でご利用いただけますので、是非おためし下さい。タグが全てカスタマイズできるので、ＣＳＳやＨＴＭＬを使ってあらゆる表示形式に対応可能！もちろんそうした知識をお持ちでなくても、クリックだけで簡単にカスタマイズ可能です。
　通常の楽天ランキングのタグは画像、商品タイトルなど限られた情報しか表示できませんが、ウェルモッチのカスタマイズ機能を使うと商品説明、送料無料アイコン、価格など、いろいろな情報を表示させることが出来ます。
　商品リンクやショップリンクは全てアフィリエイトＩＤ付きですので、アフィリエイト報酬アップにお役立て下さい。

楽天ランキングタグ　カスタマイズはこちら

※当機能は２０１１年の「楽天ウェブサービスAPIコンテスト」の「アフィリエイトツール開発部門」にて銅賞を獲得しました。