Amazonインスタントストアをブログ内にオープン

　ブログ内にAmazonインスタントストアをオープンしました。記事内にAmazonインスタントストアを埋め込んであるので、オススメ商品の参照から購入までをブログ内で行うことができます。

　『書くことなし日記：インスタントストア編 - 何かのヒント』を読んで面白いと思い、インスタントストアを作成しましたのですが、このブログでも商品を紹介する機会は多いですし、ひとつにまとまっている方が便利なので、雑貨やゲームなどを含めた自分なりのセレクトショップをブログ内のコンテンツとして常設したいと考えました。

アマゾンの「くるくるウィジェット」を作るのも少し飽きてきたので、今度は「インスタントストア」という形で、お勧めの本を並べる作業をやってみた。

ブログでもまとめサイトでも、毎日のように「おすすめ」される昨今だが、全体的に人がお勧めされたがっているような、昔は無かったような空気を感じる。

(中略)

おすすめの本 - 本

Amazonインスタントストアの作成

　『Amazonアソシエイト・プログラム インスタントストア』から作成可能です。このサービスを利用するにはアソシエイトIDが必要となります。作成自体は悩まずできると思われます。

テーマの設定

　作成したインスタントストアはブログ内に埋め込むには幅が大きすぎるため、CSSで幅を指定していきます。このブログで利用しているテーマを利用する場合には「カラーとデザインを編集する」画面の「共有されているテーマ」を押下します。

　「はてなブログ埋め込み用テーマ」で「このテーマを使う」を押下することで適用できます。

CSSの設定

　CSSの設定を行う場合には、「カラーとデザインを編集する」画面の「CSSを編集する」を押下します。

　タブごとに指定する場所があるので、以下のようなCSSをコピーしていきます。

• グローバル

#body {
      margin:0px;
      min-width:700px;
}

#wrap {
      width:690px;
}

#main {
      width:470px;
}

div#contentsubheader {
      width:100%;
}

div#footer {
      width:100%;
}

div#leftfoot {
      float:left;
      width:100%;
}

• カテゴリーページ

table.products {
      width:100%;
}

• 詳細ページ

table#detailheader {
    width:100%;
}

div#editorialReviews {
    width:100%;
}

• ショッピングカート

table#cart {
  width:100%;
}

はてなブログにインスタントストアを埋め込む

　ブログのエントリを作成するときに以下のHTMLを書きます。Amazonが生成するHTMLはフレームが高すぎたりするので、調整しています。

<iframe src="自分のストアURL" style="min-width:300px; width:100%; height:1050px; border-top: none; border-left:none; border-right:none; border-bottom: solid 1px #ccc"></iframe>

まとめ

　以上の作業を行うことで、オススメ本の参照から購入までをブログ内で行えるAmazonインスタントストアをブログ内にオープンできます。ブログでは「自分の好きな物」を中心に語る機会が多いため、結果としてセレクトショップ的になっていく側面があります。

　『kindleセールに縛られるプロブロガー達 - 法廷日記』なんてことも話題になりました。ブックガイドそのものについての需要はあると思うのですが、記事にもあるとおり、売れ筋に準拠していて「偏り」が見えない事に食傷気味なのだろうなと考えています。

　なので「その商品について語れるか？」をひとつの基準にして自分なりのお店を作っていければと考えています。お店屋さんごっこなう。