楽天ランキングカスタマイズ　価格比較のウェルモッチ http://blog.welmotch.jp/ 好きなデザインで楽天ランキングを掲載できる楽天ランキングカスタマイズタグ。実際にカスタマイズを行う際のヘルプブログです。アフィリエイト報酬アップにお役立てください。 Sun, 06 May 2012 10:23:03 GMT ja © Ninja Tools Inc. 設定セクション仕様 設定セクションは下記の５行から成り、表示上の基本的な設定を行います。

  1. afid = 'affiliateId';
  2. item_cnt = 5;
  3. name_len = 30;
  4. 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;

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

]]> カスタマイズタグ仕様 http://blog.welmotch.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%82%BF%E3%82%B0%E4%BB%95%E6%A7%98/%E8%A8%AD%E5%AE%9A%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E4%BB%95%E6%A7%98 Sun, 06 May 2012 10:23:03 GMT blog.welmotch.jp://entry/6 ご質問・不具合報告 ]]> ご質問・ご連絡等 http://blog.welmotch.jp/%E3%81%94%E8%B3%AA%E5%95%8F%E3%83%BB%E3%81%94%E9%80%A3%E7%B5%A1%E7%AD%89/%E3%81%94%E8%B3%AA%E5%95%8F%E3%83%BB%E4%B8%8D%E5%85%B7%E5%90%88%E5%A0%B1%E5%91%8A Thu, 12 Apr 2012 03:03:46 GMT blog.welmotch.jp://entry/5 タグの基本構造 　なおタグの変更にあたっては、HTMLおよびスタイルシートの基礎的な知識が必要です。

　楽天ランキングカスタマイズでアフィリエイトIDを入力し、なにも変更せずにそのまま出力した場合、下記のようなタグが発行されます。
  1. <script type="text/javascript">
  2. afid = 'affiliateId';
  3. item_cnt = 5;
  4. name_len = 30;
  5. split_cnt = 1;
  6. split_tag = '<div class="splt"></div>';
  7. 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;}';
  8. 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>';
  9. footer_tag = '<p style="text-align:right;font-size:11px;margin:5px;">[!update]<br>[!wlmclink]</p></td></tr></table>';
  10. 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>';
  11. </script>
  12. <script type="text/javascript"
  13. src="http://welmotch.jp/rr/disp.php?xm=g_0">
  14. </script>

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

・設定セクション（２～5行目）
  1. afid = 'affiliateId';
  2. item_cnt = 5;
  3. name_len = 30;
  4. split_cnt = 1;

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

・テンプレートセクション（6～10行目）
  1. split_tag = '<div class="splt"></div>';
  2. 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;}';
  3. 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>';
  4. footer_tag = '<p style="text-align:right;font-size:11px;margin:5px;">[!update]<br>[!wlmclink]</p></td></tr></table>';
  5. 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行目）
  1. src="http://welmotch.jp/rr/disp.php?xm=g_0">

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



　]]> カスタマイズタグ仕様 http://blog.welmotch.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%82%BF%E3%82%B0%E4%BB%95%E6%A7%98/%E3%82%BF%E3%82%B0%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0 Wed, 11 Apr 2012 18:28:40 GMT blog.welmotch.jp://entry/4 ご利用上の注意事項 　ただしタグの内容を変更する場合、HTMLおよびスタイルシートの基本的な知識が必要です。
　ブログのスキン修正が出来る方なら問題ないかと思います。

　また楽天ランキングカスタマイズをご利用いただく際は規約に同意していただく必要があります。
]]> 機能紹介 http://blog.welmotch.jp/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B/%E3%81%94%E5%88%A9%E7%94%A8%E4%B8%8A%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85 Wed, 11 Apr 2012 16:31:06 GMT blog.welmotch.jp://entry/3 楽天アフィリエイトIDの確認方法 　まだ楽天アフィリエイトに登録されていない場合は下記リンクからご登録ください。

楽天アフィリエイト

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

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

２．画面左上のほうにある「アフィリエイトIDの確認」をクリック
]]> 機能紹介 http://blog.welmotch.jp/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B/%E6%A5%BD%E5%A4%A9%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88id%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95 Wed, 11 Apr 2012 16:12:23 GMT blog.welmotch.jp://entry/2 楽天ランキングカスタマイズとは ウェルモッチでは簡単に楽天ランキングタグのカスタマイズができる機能をご提供しています。
　無料でご利用いただけますので、是非おためし下さい。 タグが全てカスタマイズできるので、ＣＳＳやＨＴＭＬを使ってあらゆる表示形式に対応可能！ もちろんそうした知識をお持ちでなくても、クリックだけで簡単にカスタマイズ可能です。
　通常の楽天ランキングのタグは画像、商品タイトルなど限られた情報しか表示できませんが、ウェルモッチのカスタマイズ機能を使うと商品説明、送料無料アイコン、価格など、いろいろな情報を表示させることが出来ます。
　商品リンクやショップリンクは全てアフィリエイトＩＤ付きですので、アフィリエイト報酬アップにお役立て下さい。



※当機能は２０１１年の「楽天ウェブサービスAPIコンテスト」の「アフィリエイトツール開発部門」にて銅賞を獲得しました。]]> 機能紹介 http://blog.welmotch.jp/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B/%E6%A5%BD%E5%A4%A9%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%A8%E3%81%AF Wed, 11 Apr 2012 04:23:18 GMT blog.welmotch.jp://entry/1