Amazon商品リンクを作成する方法/cocoon

アイキャッチに使われているマスコットの彼はダンボーです。
あずまきよひこの漫画『よつばと!』に登場するロボットで中に人（早坂みうら）が入って操作してます。
頭部右横にスイッチがありONに入れると目が光ります。また、胸に100円を入れる場所が付いており、お金を入れると遊園地やデパートの屋上にある乗り物みたいに動き出すとのことです。
頭部が大きい為、胴体、足、腕などはすべて空いた頭部の中にスッポリ収納できるように作られています。

前回に引き続き今回も、わいひら先生の書かれた
cocoon公式マニュアルを参考にして進めていきます。
Amazonの商品情報を参照するためには、Amazonアソシエイト・プログラムに参加する必要があります。

• トラッキングIDの設定方法

こちらでAmazonアソシエイトに登録できます。

[図_1]

① アソシエイトID
アソシエイトIDが、そのまま一つ目のトラッキングIDとなっています。

② トラッキングIDの管理
複数個のトラッキングIDを使い分けるようなヘビーな使い方をされる方は設定を行います。

[図_2]

② トラッキングIDの管理
複数個持っている場合は、画面下部に表示され、トラッキングIDをアカウントに紐づけることが出来ます。

[図_3]

・[Cocoon設定]より[API]のタブを開きます。
・トラッキングIDを入力して [変更をまとめて保存] します。
amazonのwebサーバーはこのトラッキングIDを認識することにより、当該webページと、先にamazonに開設したアソシエイトIDの持ち主が同じである事を確認しています。

[図_4]
Amazonアソシエイトプログラムの登録が済むと、ブラウザ上部赤枠の部分に、Amazonの商品リンクを作成するための、アソシエイトツールバーが追加されます。

ブラウザ上でツールのON/OFFを切り替えられます。

[図_5]
Amazon商品リンクを作成するには、まず、リンクを生成したい該当商品のページに移動します。

次に、
① テキストと画像をクリックする。

② 生成されたテキストと画像のリンクをマウスでコピーします。

[図_6]
・そのまま自身のブログ上にモリっと貼り付けます。

① ＜/＞HTMLに挿入ボタンを押す。

② コードをペーストします。

・最後に [ok] ボタンをクリックする

[図_7]
① テキストをクリックします。

② 通常URLを選択します。

② 生成されたテキストのリンクをマウスでコピーします。

[図_8]
・そのまま自身のブログ上にモリっと貼り付けます。

① ＜/＞HTMLに挿入ボタンを押す。

② コードをペーストします。

・最後に [ok] ボタンをクリックする

この方法では特大サイズのリンクが作成されます。

もともと本が縦長である事と、作成されるブログカードのサムネイル画像が大きすぎたり小さ過ぎたり画像のサイズに融通が利かない事が重なってアマゾンの新APIは人気がありません。

一家に一冊「赤の書」如何でしょうか？
私は気が付いてしまったのです。
人におすすめするならば、高額の本を薦めた方がリターンが大きいという事に…。

心理学者カール・グスタフ・ユングの著作。Liber Novus（ラテン語で『新しい書』）とも呼ばれる。第一次世界大戦を前にして精神状態が不安定になったユングはノートに自分がみた夢やヴィジョンを書き記した。イラストは豊かな色彩でもって描かれ、文章・文字も中世の写本を髣髴とさせる装飾的なカリグラフィーで綴られる。
via:Wikipedia_赤の書

ただ単に、Amazonの商品リンクを利用するにしても、ちょっと縦長すぎてブログには合わない感じもします。なので、以下ではこれを解消するためにブログカード形式でAmazon商品リンクを作成出来るようにしました。
via:PA-APIを使わずAmazon商品リンクを作成する方法_cocoon

amazon公式のブログカードは縦長で使い勝手が悪いので、横長サイズのカードをわいひら先生が作ってくれました。

[図_8]
① テキストをクリックします。

② 短縮URLを選択します。

② 生成されたテキストのリンクをマウスでコピーします。

[図_9]
・そのままクラッシクエディッタ上に貼り付けます。

① 短縮URLをペーストする。

Broken Link Checkerでリンク切れチェックをしたい場合は「リンクに変換」ボタンを押してください。