太陽がまぶしかったから

C'etait a cause du soleil.

オススメ本の参照から購入までをブログ内で完結できるAmazonインスタントストアをオープンしてセレクトショップ運営ごっこ

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>

サイドバーにウィジットを追加

 インスタントストアからAmazonウィジットが作成できるので、300x250で作成してサイドバーに貼り付けました。せっかくなので文言を「来店」にしてみる。

まとめ

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

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

 松岡正剛の松丸本舗は書店でありながら、ひとつの作品になっていました(現在は閉店)。このインスタントストアでも「その商品について語れるか?」をひとつの基準にして自分なりのお店を作っていければと考えています。お店屋さんごっこなう。

松丸本舗主義 奇蹟の本屋、3年間の挑戦。

松丸本舗主義 奇蹟の本屋、3年間の挑戦。