2xup.org

amazon商品ページにアフィリエイト用リンクを表示するgreasemonkeyスクリプト

昨日amazon個別商品にG-Tools個別商品ページへのリンクを表示させるスクリプトを練習がてら作ってみたのだけれど、今度はもうちょい自分好みにしてみようといろいろいじくってみた。

greasemonkey自体、これまでウェブサイトを閲覧していてくぅ〜もうちょいこんなんやったら便利やのに〜。とかアフン、ここがこうやったら見やすいのにぃ〜!。などと思っていた部分を好みにカスタマイズできるエクステンションだけにとっても楽しいん。そんなこともあり、既にいつも見ているニュースサイトは余計なものを排除して表示できるようになったりしています。そう全ては自分自身の事を考えて作ることが可能っちうわけ。これは普段のウェブデザインやらと違って考える事も少ないのでどんどん作れてしまうのも魅力的だす。

preview_amazingmonkey.pngというわけで今度はamazon.co.jpの個別商品ページに常に自分のアソシエイトIDを含む商品リンク用URLが表示されるようにしてみた。名付けてamaz-in-g-monkey(チョットなげやり)。自分用(つまりニペケ用)からむりくそ公開用にしている部分もあるのでなかなか柔軟なタグの書き出しは叶っていないけれどどうか勘弁。

各々ctrl+クリック(右クリック)+ Install User Script...でインストールできます(要: Firefox & greasemonkey)

検索結果の所でもスクリプトが有効になってしまっていたのを修正

greasemonkeyはFirefoxのToolsメニューからManage User Scripts...を選択すると、インストールしてあるスクリプトの有効と無効の選択や、インストールされたスクリプトのカスタマイズができるので各々別のスクリプトとして用意し、テキストと画像の両方を備えたものに関しては背景色などの表示のカスタマイズも可能にした。この辺の詳しい解説はまたまたDive Into Greasemonkeyでビデオとやさしい音声で解説してくれているので、要チェキ。

試しに公開用でテスト

実際に表示されるHTMLタグを使ってサンプルを表示するとこんな感じです(カスタマイズ無し)

amaz-in-g-monkey_link.user.js

CSS完全ガイド 第2版—CSS2&CSS2.1対応

amaz-in-g-monkey_image.user.js
CSS完全ガイド 第2版—CSS2&CSS2.1対応
amaz-in-g-monkey.user.js
CSS完全ガイド 第2版—CSS2&CSS2.1対応CSS完全ガイド 第2版—CSS2&CSS2.1対応

amaz-in-g-monkeyのカスタマイズあれこれ

amaz-in-g-monkeyでは、書き出す商品画像とテキストリンクを囲むブロックの背景色や、そのブロックに設定したいスタイルの追加が一部簡単に可能です。モウチョイいじくりたい方は全体的にガシガシカスタマイズしてください。

背景色の指定
var bgcolor ='#ccc'; // Background Color

初期設定では背景色は#ccc;(薄めのグレイ)に設定されています。これを好きな色に書き換えてくださいな。

追加スタイル
var addstyle = 'border: 1px solid black;'; // Additional style

初期設定ではブロックに黒い1pxの実線を引くように設定しています。この部分の消したり、なにか追加したりでスタイルのカスタマイズが可能です。

うぉい!んで肝心のアソシエイトIDの設定はどこなんよ?

あさましくも初期設定では僕のアソシエイトIDなんぞを設定しています。3つのスクリプトに以下のような部分があるのでご自分のIDに書き直してください。

var id = '2xup-22'; // associate ID