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

　このブログ内にAmazonインスタントストアを『ikedakana.書店 - このブログで紹介した書籍』にオープンしました。記事内にAmazonインスタントストアを埋め込んであるので、オススメ商品の参照から購入までをブログ内で完結させることができます。書店なのにゲームや雑貨を置くのはヴィレヴァンのリスペクト。

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

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

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

(中略)

おすすめの本 - 本

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

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

テーマの設定

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

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

CSSの設定

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

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

グローバル(2014/11/04 直接参照時に中央寄せに修正)

body {
      margin:0px;
      min-width:718px;
}

#wrap {
      width:685px;
      margin-left:auto;
      margin-right:auto;
}

#main {
      width:475px;
}

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はフレームが高すぎたりするので、調整しています。またスマートフォンの場合はフレームで表示すると崩れるため、直接表示URLに転送させます。

<script type="text/javascript">
if( window.parent.screen.width < 500) {
  location.href='自分のストアURL';
}
</script>
<iframe src="自分のストアURL" style="min-width:300px; width:100%; height:1100px; border-top: none; border-left:none; border-right:none; border-bottom: solid 1px #ccc"></iframe>