Amazon商品の一部分を選択して表示させるAdpartsです

Posted By: amanatu  //  Category: Adparts

アキバBlog(秋葉原ブログ)って有名なサイトがありますが、
そこの右の方で紹介されている感じのんを簡単に出来るようにしたいなぁって感じ考えたんですが
こんな感じ

FineScenery ToHeart2 小牧愛佳 ( 1/8スケール PVC塗装済み 完成品 )
あまなつ Shopあまなつで見る 同じレイアウトで作成

そこのは、画像をその部分だけ切り出して別に画像をupしてそれをAmazonへリンクするみたいな感じだと思うんですが
その切り出して、画像をupするってのが邪魔くさいので「切り出さない、画像をupしない」で同じようなことは出来ないかと思い、始めました。
Adpartsって名前にしたんですが、そのページを見てもらえればわかると思いますが
表示する枠サイズを決めて、その中に入るようにAmazonの画像を使ってドラッグして位置を決めたら表示されているタグを自分のページにコピペするだけで簡単に作成出来ます。
Amazonの画像をそのまま使いますんで、切り出す必要も、upする必要もありません。

表示方法は簡単に言えば、 div で枠サイズ決めて枠外は表示をhiddenにしてAmazonの画像をposition:absolute;top:**px; left:**px;で位置調整して表示するようにしているだけです。

作成の仕方はそのページを見ればだいたいわかると思いますが、また説明ページを別途作成しようと思います。
作成ページは、IE6とFirefox/1.5で動作確認しています。Firefox/1.5は赤枠内ではドラックできません。
ネスケの7.1は動作しません。
作成したイメージは、だいたいのブラウザで問題なく表示されると思いますがtableを使って表示する際は注意が必要です。ネスケの7.1だと横に並べたのが重なって表示されました。

注意点として、画像大を使うとドアップのイメージを作成出来ますが切り出しているわけではないので、いくら小さく表示させていてもその画像サイズ分読み込むので表示が重くなります。

あまなつの各商品の紹介場所に⇒Adpartsで作成するのリンクをつけましたのでAdassistのように検索して作成できます。

画像の左上にが表示されていますが、あまなつへのリンク(あまなつ画像の上あたり)とShopあまなつへのリンク(あまなつ画像の左下あたり)、そして同じレイアウトで作成出来るようにリンク(あまなつ画像の右下あたり)をつけてあります。消さずに使ってください。お願いします。

【表示例】
こんな感じの表示とか

Apple iPod 30GB ブラック [MA146J/A]
あまなつ Shopあまなつで見る 同じレイアウトで作成

TOSHIBA  gigabeatF21 MEGF21(XK) デジタルオーディオプレーヤー 1.8型HDD 20GB ブラック
あまなつ Shopあまなつで見る 同じレイアウトで作成

こんな感じとか

鈴木えみ写真集 Love・love
あまなつ Shopあまなつで見る 同じレイアウトで作成