Adhover

Adhoverって？ †

最終更新日：2007-01-22 (月) 16:50:38

Amazon商品をテキストリンクで紹介するためのサービスです。
特徴として
１．テキストリンクの前に小さなAmazon商品画像を表示させることが出来ます。
２．テキストリンク上にマウスを乗せるとAmazon商品の画像が大きく表示されます。

Amazon商品画像をレイアウトしたAmanatuAdassistと違い、文中にテキストでAmazon商品を紹介するのに適しています。

単純なテキストだけのリンクではインパクトが無い為、テキストリンクの前に小さな画像を表示させ、テキストリンク上にマウスが乗った時に大きな画像を表示することでインパクトを与え紹介したAmazon商品の購入を促す効果が高まります。


テキストリンク及びAmazon商品画像はあなたのアマゾンアソシエイトIDでアマゾンへリンクされますのでそこを経由して商品が購入されるとあなたにアマゾンより紹介料が支払われます。

↑

表示例 †

今大人気の商品Apple iPod nano 4GB ブラック [MA107J/A]Apple iPod nano 4GB ブラック [MA107J/A]Apple iPod nano 4GB ブラック [MA107J/A]あまなつAdhover Apple iPod nano 4GB ブラック [MA107J/A]、やっぱり黒がかっこいい〜ですね〜。指紋の痕が目立つらしいですが・・・
正統派の人ならもちろんiPod nano 4GB ホワイトiPod nano 4GB ホワイトiPod nano 4GB ホワイトあまなつAdhover iPod nano 4GB ホワイトが絶対オススメです。
やっぱりiPodiPodあまなつAdhover iPodは白ですね〜


・・・と、こんな感じで商品紹介が出来ます。
※テキストリンクの上にマウスを乗せてみてください。

2006.3.15追記
価格が表示出来るようになりました。
こんな感じ
Apple iPod nano 4GB ブラック [MA107J/A]Apple iPod nano 4GB ブラック [MA107J/A]Apple iPod nano 4GB ブラック [MA107J/A]あまなつAdhover Apple iPod nano 4GB ブラック [MA107J/A]

2006.9.6追記
ユーザーレビューが表示出来るようになりました。
こんな感じ
Apple iPod 30GB ブラック [MA146J/A]Apple iPod 30GB ブラック [MA146J/A]価格:
大容量の魅力

iTunesが使いやすい、本体が薄い、バッテリーが持たない、なども感じたのですが、何より考えさせられたのが大容量の魅力。「何千曲も入れないよ」という理由だけでHDDタイプを早々に購入検討対象からはずす、というのはあまりにもったいないです。なぜなら、「どうせあるんだったら入れてみようか」という気になるからです。自分も、iPodを買って以降、どれだけ聞くアーティストが、ジャンルが広がったか。この体験のみをとっても、３万円オーバーの価値は十分あったように思います。そういう点を考慮してもフラッシュメモリタイプを買う、というのであれば、それもまたいい判断でしょうが、そんなメリットがあることを知らずにフラッシュメモリタイプに決めてしまう、というのははっきり言ってもったいないです。Apple iPod 30GB ブラック [MA146J/A]あまなつAdhover Apple iPod 30GB ブラック [MA146J/A]

↑

設定 †

マウスを乗せた時に画像を表示されるのにスタイルシートのa:hoverを利用している為
まず最初にスタイルを設定する必要があります。

◆htmlに直接スタイルを指定する場合
下記の内容を利用したいページの<head>・・・</head>間に追加して下さい。

<style type="text/css">
<!--
.img_adhover{
 top:-5000px; left:-5000px;position:absolute;
}
a.a_adhover:hover {
 z-index:1000;position:relative;
}
a.a_adhover:hover .img_adhover{
 top:16px; left:0px;
}
-->
</style>


◆スタイルシートのファイルに追加する場合(style.cssのファイル等)
下記の内容をそのファイルに追加して下さい。

.img_adhover{
 top:-5000px; left:-5000px;position:absolute;
}
a.a_adhover:hover {
 z-index:1000;position:relative;
}
a.a_adhover:hover .img_adhover{
 top:16px; left:0px;
}

2006.2.15追記
　a.a_adhover:hoverのbackground-color:#FFFFFF;は必要ありませんでした。
　背景が白以外の場合にリンクにマウスを合わせるとリンクの背景が白色になります。それが気にならない場合はそのままでも特に問題はありません。気になる方は削除してください。

【参考】
a.a_adhover:hover .img_adhoverの
top:16px; left:0px;を変更すればマウスを乗せた時に表示される画像の位置を変更することが出来ます。

↑

作成方法 &dagger;

１．あまなつAmazon検索で商品を検索して⇒Adhoverで作成をクリック
　↓

２．ID:を自分のアソシエイトIDに変更します。
　↓

３．必要に応じて「商品名」を変更します。
　　（入力した内容が画像のタイトルにもなります。）
　↓

４．必要に応じて「商品名の前の小さな画像サイズ高さ」を変更します。
　　（表示したくない場合は0を入力します。）
　↓

５．価格を表示する場合は、価格表示をチェックします。
　　（2006.3.15機能追加）
　↓

６．出力されるタグをコピペすれば完了です。