ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1900-01-16草稿「アフィリエイト・プログラムに参加する

amazletツールでアソシエイトを楽に

amazletツール

「はまぞう」を制作したNaoya Itoさん提供の「amazletツール」は、前記事のような手作業を省略できるブックマークレットツールです。ブックマークレットというのはブラウザのお気に入り機能を利用して、他のことをさせるちょっとしたツールのことです。

amazletツールの「セットアップ」で自分のアソシエイトIDを記入すると、画面が移り『amazlet it!』というリンクが作られます。そのリンクをドラッグ&ドロップなどして、自分のブラウザの「お気に入り(ブックマーク)」に入れておきます。詳しくはamazletサイトをご覧ください。

その『amazlet it!』というお気に入りを選ぶと、「はまぞう」のような画面が立ち上がります。はまぞうと同じように検索していきますが、「セットアップした自分のアソシエイトIDで」リンクを作ることができるようになっています。

またアマゾンの商品ページを閲覧している時に『amazlet it!』すると、すぐにその商品のリンク作成ページが表示される機能があります。(2004年11月25日現在の仕様です)

amazletツールで作成したHTMLの見栄え

amazletツールで「商品情報リンク」を作ると次のようになります。

オバケのQ太郎―傑作選 (1)
藤子 不二雄
小学館 (1976/08)
在庫切れ

生成されたHTMLにいろんなstyle属性がついてくるのですが、はてなダイアリー上では無視されるので、見栄えはスタイルシートで指定できます。

そのままでは画像と文章が縦に並んでしまいます。テーマによって調整が必要かもしれませんが、設定画面のスタイルシート欄に以下の内容を追加すると、それなりに見えやすくなるかもしれません。(←MacOSXで確認しているので自信なし。指摘求む。)(HTML概略

div.amazlet-box {
	margin: 0;
	padding: 0.5em 1em;
}

div.amazlet-info {
	text-indent: 0em ! important;
	line-height: 1.5em;
	word-break: break-all;
}

div.amazlet-image img {
	float: left;
	border: 0;
	margin-right: 1em;
}

div.amazlet-name {
	font-weight: bold;
}

div.amazlet-image,div.amazlet-info,div.amazlet-name,div.amazlet-powered-date,div.amazlet-detail,div.amazlet-link {
	clear: none ! important; 
}

div.amazlet-box div {
	clear: left; 
}
  • 【注意】amazletツールはブラウザのjavascript設定がオフ、IEのポップアップブロック機能がオンだと稼働しません。
  • 【補足】amazletツールは生成されたHTMLコードを貼るものなので、情報は固定されたままです。ISBN/ASIN記法のように、アマゾンサイトの情報更新は反映されません。
  • 【関連ページ】Amazonアソシエイト支援ツールではG-Toolsもあります。こちらはHTMLで見栄えがガッチリ決まっているので、はてなダイアリーならスタイルシートが効く構造のamazletツールかな、と大きくとりあげませんでした。こういうツールはどんどん新しいものが出てくるかも。

sugiosugio2004/11/26 03:29このガイドを読んで疑問の残った方やご指摘のある方、こちらにコメントをお願いいたします。

sugiosugio2004/12/03 14:35http://d.hatena.ne.jp/hatenadiary/20041202#cのnobodyさんの指摘を受けて修正。ありがとうございます。

SoyDeJaponSoyDeJapon2004/12/11 12:31Google AdSenseの広告バナーを設置しているのですが、Googleの方で広告レイアウト用コードを指定しても、色とイメージ広告が反映されません。そういえばはてなで”あの青”以外みたことがありませんし、イメージ広告もしかりです。

sugiosugio2004/12/11 12:53はてなのGoogleアドセンスも色や形を変えられますよ。ヘルプのadsenseモジュール(http://d.hatena.ne.jp/help#adsense)でもさらっと触れられているのですが、adsenseモジュールを表示させるタグの中で色や形を指定していきます。これについては
http://d.hatena.ne.jp/keyword/はてなダイアリーガイド「CSSセレクタ - adsenseモジュール」
が少し詳しいです。

SoyDeJaponSoyDeJapon2004/12/11 16:20ありがとうございます、やっと変えられました!!まえに試みたときは色指定などをスタイルシートに書き込んでたのかもしれません。初心者はどこに書き込むのか指定が無い場合解かりません。ダイアリーガイド「CSSセレクタ-adsenseモジュール」を見てやったらできました。
初心者はgoogleのコードをコピーするだけでページに反映されると思ってしまいますね。その様に書かれていますから。。。

sugiosugio2004/12/11 22:32なるほど、googleの説明通りにやってしまいますよね。念を押した方が良いかも。「CSSセレクタ-adsenseモジュール」も紹介しておきたいと思います。ご質問ありがとございます。

SoyDeJaponSoyDeJapon2004/12/12 02:30上記のようだと親切だと思います。「CSSセレクタ-adsenseモジュール」にすぐに行き着けて便利ですね。

sugiosugio2004/12/12 02:38ありがとうございまーす。

 | 

ホームページ制作