【ブログの楽しみ方】Amazonのインスタントストアをブログに貼り付ける【cocolog】

はじめに

Amazonインスタントストアとはアフィリエイト（※）の一つの形態で、ブログのような体裁の自分専用のページを作成して、そこにAmazonの商品の広告を貼れるというものですが、百聞は一見にしかず、具体的には下記のような画面（サイト）を簡単に作れるサービスです。

インスタントストアは、ココログとは直接関係ありませんが、ココログにインスタントストアへのリンクを貼ってみたので、その方法も合わせてご紹介したいと思います。

※アフィリエイト（affiliate）とは単に「提携」という意味なので、正しくは「アフィリエイト広告」と呼ぶべきですが、企業など広告主が、インターネット上のウェブサイトと提携して掲載する広告を一般には単に「アフィリエイト」と呼びます。紹介した商品だけでなく、アフィリエイト広告を経由して購入した商品の金額に応じて手数料がサイト運営者に支払われることになっています。

Amazonアソシエイトアカウントの取得（IDの登録）

Amazonの場合、アフィリエイトの仕組みを「Amazonアソシエイト」（associate：提携者、共同事業者）と呼び、Amazonインスタントストアを作成する前提として、Amazonにアソシエイトになる登録をしてIDを発行してもらう（アソシエイトアカウントを取得する）必要があります。

ここでは詳しい説明は省略するので、登録の方法は下記を参照して下さい。

Amazon アソシエイト・プログラムの使い方／はじめての方へ：　https://affiliate.amazon.co.jp/gp/associates/join/getstarted

インスタントストアの活用方法

ブログ主がインスタントストアを使ってみようと思ったのは、商品（当然ですが、Amazonで扱っている商品に限定されます）を紹介するだけでなく、商品に関するコメント（レビューなど）を自由につけられるからです。

とりあえずはドールハウスやミニチュア工作に役立つアイテムというテーマでインスタントストアを作ってみましたが、ひとつのアソシエイトアカウントにつき100までのインスタントストアを作成することができるので、例えば「おすすめのビデオ」とか「おすすめの本」とか、様々なテーマでまとめることができます。不具合の多いBooklog（ブクログ）代わりに、読んだ本を一覧にすれば読書記録にもなりそうです。

記事にいちいち広告を貼る手間や、アフィリエイトリンクを貼ると画面の表示に時間がかかるというデメリットも解消されます。

ブログ主はアフィリエイトの利益はどうでもいいのですが（実際、紹介料はせいぜい「100円前後／月」程度です ）、ブログにいちいちリンクを貼ることでブログの容量を食うということも解消されるので、使ってみる価値があると思いました。（タグを貼り付けるだけなので、ブログの容量をそれほど消費するわけではありませんが、それでも塵も積もれば山となる。インスタントストアは完全にブログから独立したAmazonのサーバーにあります。）

作りながら画面キャプチャを撮ったので、簡単ですが、インスタントストアの作成方法をご紹介します。

インスタントストアの作成方法

インスタントストアの作成自体は指示に従って作ればよく、それほど説明は必要としないと思うので、ここでは処理の概略をご紹介します。

流れとしては、

1. Amazonにログインして、Amazonアソシエイトの管理画面に移動。
2. 任意のトラッキングID（AmazonアソシエイトのIDとは別のもので、インスタントストア毎につける名前のようなもの）を登録する。ここから、インスタントストアの作成が始まる。
3. インスタントストアの作成
   
   • カテゴリーの作成
   • カテゴリーに商品を追加し、必要ならコメントをつける
   • インスタントストアのデザインやカラーを設定する。（デフォルトのテンプレートが設定されているので、他のテンプレートを選択したり、必要なら色を変更したりする。）
   • サイドバーの位置（右か左か）を選択し、表示する項目を選択する。（例えば商品をクリックして表示される詳細ページにAmazonに書き込まれたレビューを表示するかどうか、など。これもデフォルトままでOK。）
   • 最後のステップでインスタントストアのURLが作成される
4. ココログの作業：インスタントストアのURLをココログのサイドバーに貼り付ける。
   
   • 「マイリスト」を「メモタイプ」で作成し、そこにリンクのHTMLタグを記述する。
   • 「デザイン」タブの「表示項目を選択」で作成したマイリストを表示するように設定し、「並べ方を変更」でマイリストの位置を変更する。

という感じです。

とりあえずデフォルトで作ればよいので、基本的にはカテゴリを作って商品を登録するだけでいいことになります。

各ステップへは、画面の下の方にある［次へ進む］ボタンで進むことができ、プレビューも都度見ることができます。（ブラウザでポップアップを禁止していると表示されないので、ポップアップを許可する必要がある。←ブラウザが許可するかどうか訊いてくるので、許可すればよい。）

1と2は省略しますが、インスタントストアを作成する画面を、以下、紹介します。

■インスタントストアのページを作成する

図-1

上の図に示したとおり、4つのステップで構成されています。図-1の右端に表示されているイメージで、自分が今どの部分を設定しているのかも分かります。

■カテゴリを追加する

最初はカテゴリが全くない状態なので、ここにカテゴリを追加します。

図-2

カテゴリーページを追加する画面では自分のwebサイト（ココログのトップページなど）へのリンクを設定することができますが、「サイト名の指定」欄は全角文字を入力すると文字化けするようです。ここではしかたがないので「Return to my blog」と入力しました。

また、「概要ページを有効にする」にチェックを入れると、そのインスタントストアの紹介文を書くことができるのですが、これもまた文字化けします。（半角文字でも文字化けしました。）

カテゴリの追加は［カテゴリーページを追加］ボタンを押し、「新しいカテゴリー」が追加されたら、右側でタイトルを入力するだけです。（「あなたのインスタントストアの設定」をクリックした状態で［カテゴリーページを追加］ボタンを押すと、その下にカテゴリが作られますが、任意のカテゴリを選択した状態でボタンを押すと、そのカテゴリの下にサブカテゴリが作成できます。

図-3

■商品の登録

［商品を追加］ボタンを押すと商品を登録する画面に移動します。ここで、商品を検索し、［追加］ボタンでリストに追加します。（図-4）リストの商品をクリックすると、説明文を追加したり、リストでの順番を変更することができます。（図-5）

図-4

図-5

説明文は後からでも書けるので、とりあえずはどんどん商品を追加しましょう。

■カラーとデザインを編集する

次のステップでは画面デザイン（テンプレート）を変更したり、背景色などを変更することができます。（図-6）

図-6

ここではこのブログと雰囲気を合わせるよう、色を設定しました。

また、この画面ではヘッダー部分に表示するロゴ（画像／横200ピクセル、縦75ピクセル以内のサイズ）を指定することができます。

注意しなくてはならないのは、画像はAmazonのサーバーにアップロードするのではなく、既にどこかにアップロードされた画像のURLを指定するということです。

ココログの場合、記事に関係なく、ファイルマネージャーを使用すれば画像をアップロードできるので、この機能を使えばいいでしょう。

■サイドバーの設定

サイドバーを右に置くか左に置くかを選択する程度なので、画面は省略します。

■リンクを取得

最後のステップにたどり着くとインスタントストアのURLが作成されます。これをコピーして、ブログにリンクを貼ります。

図-7

■【追記】カスタムテキスト（商品説明文〕の改行

編集画面（下図・左）での改行（Enter）は、商品一覧画面では無視されるようです。（下図・右）。

しかし、その商品をクリックして詳細を表示すると改行されています。

■【追記】カスタムテキストの文字化け

一度登録したカスタムテキストを再度編集したところ、何かの拍子に文字化けを起こしました。（保存前）　幸い、別タブで商品詳細画面を表示していたので、その全文をメモ帳にコピペして退避させ、メモ帳の全文を再度カスタムテキスト欄にコピペして保存し直したら修復できました。

1度しか起きていませんが、再編集の前には上記のような対策を予め取っておく方がいいかも知れません。

ココログのサイドバーにリンクを貼る

この記事を書いている時点では、下のように設定しています。

図-8

<a href="http://astore.amazon.co.jp/juli00-22" target="_blank" ><img src="http://daishi100.cocolog-nifty.com/banner_Amazon_my_store.png" /></a>
<br />
このブログでご紹介したツールなどのまとめページです。
使い方や使ってみての感想など、ブログ主の体験を踏まえたコメントを添えています。
100均物で十分なものはその旨書いてありますので、道具や材料選びの参考にして下さい。（現在作成途中）

ここでは、画像（バナー）を「ファイルマネージャー」を使用してココログにアップロードし（赤い下線を引いた部分は画像＝バナーのURL）、その画像にリンクを貼っていますが、文字列（ex. 「ドールハウスやミニチュア工作お役立ちツール」）にリンクを貼る場合は、

<a href="http://astore.amazon.co.jp/juli00-22" target="_blank" >ドールハウスやミニチュア工作お役立ちツール</a>

と、文字列を、リンクを指定するHTMLタグ「<a href="インスタントストアのURL" target="_blank" >」と「</a>」で囲みます。

以下、HTMLタグをもう少し補足します。

• 「http://astore.amazon.co.jp/juli00-22」の部分は自分のインスタントストアのURLを指定します。
• 「target="_blank"」はクリックしたら別のウィンドウ（別のタブ）で開くという指定です。記述しなければ、同じウィンドウでインスタントストアが表示されます。
• 「<br />」は改行を指示するHTMLタグです。

（拍手は記事を読んで下さった方とのコミュニケーションツールとして設置しています。面白かった、役に立った、等々、「(・∀・)ｲｲﾈ」と思われたらクリックしてください。）

---