Amazon Associates Link Builderをカエレバ・ヨメレバ風にカスタマイズ！

読者の悩み

Amazon Associates Link Builderを綺麗に表示させたい
CSSコピペで終わるようなものを教えて欲しい

Amazon Associates Link Builderを綺麗に表示させたい！という人にオススメな記事です。

カエレバ・ヨメレバの仕様変更に伴い、Amazonのみで取り扱っている商品についてはカエレバ・ヨメレバで取得できなくなりました。

※追記:Rinkerというプラグインを使うのが一番いいかなと思います。
詳細はＣＳＳコピペでOK！Rinker(リンカー)のデザインをカスタマイズしよう！まで。

ですが、Amazonのみで取り扱っている商品はたくさんあります。
例えばKindleですと、レビュー記事を多く書く人はいると思いますが、カエレバ・ヨメレバで使えない・・・。

といった弊害が生じます。

カエレバ・ヨメレバの元のわかったブログさんの記事ではこう書かれています。

また、発送済み商品売上が過去30日以内に発生していない場合、PA-APIをご利用いただけなくなる恐れがございます。なお Amazon Link Builder（WordPressプラグイン）のご利用には影響はございません。

上記のアマゾン公式プラグインもPA-APIを利用していますが、こちらは売上がなくても利用停止の危険はありません。

初心者の方は、制限の危険がない、上記のカエレバ風か、アマゾン公式プラグイン「Amazon Associates Link Builder」の利用をおすすめします。

ということで、Amazon Associates Link Builderでのデザインをカエレバ・ヨメレバ風にカスタマイズしましょう。

Amazonアソシエイトに受かっていない人はできませんので、まずはそれに受かりましょう。難しくないです。

【2018年】Amazonアソシエイトの審査に8記事で通った方法とは？

2018年に書いた記事ですが、審査内容に大きな変化はないので、参考にできるかと思われます。

1.カエレバ・ヨメレバをカスタマイズ後の完成品

完成すると、以下のようなものになります。（画像です）

ちなみにデザインは以前書いた記事とほぼ同じにしております。

CSSコピペで完了！カエレバ・ヨメレバのデザインをカスタマイズ

その記事でのカエレバ・ヨメレバは以下のようなものでした。
同じ商品で、Amazonのみのリンクです。

ほぼ変わらないのが分かってもらえるかと思います。

posted with ヨメレバ→sold by ○○へと変更させています。
なくしたらなくしたで気持ち悪かったので・・・。

2.Amazon Associates Link Builderをインストール

プラグイン→新規追加にて、Amazon Associates Link Builderをインストール→有効化します。

アクセスキーとシークレットキーを取得

設定に必要になるアクセスキーとシークレットキーを取得します。

amazonアソシエイトにログイン。

『ツール』から『Amazon Product Advertising API』を選択。

認証キーの管理の欄で、キーを取得できます。

メモ帳などにコピペしておきましょう。

※直接記入欄へコピペではなぜかできませんでしたので、一旦メモ帳などの別の場所に移すことをオススメします。

Amazon Associates Link Builderの設定

WordPressの管理画面に戻ります。

左のメニューから、『Associates Link Builder』→『Settings』を選択。

『Add a Marketplace』をクリックすると、トラッキングIDの入力欄が出てきます。

①Select Marketplaceは『JP』を選択し、末尾が−22のトラッキングIDを入力します。
②メモ帳などにコピーしておいたアクセスキーとシークレットキーを入力。
③使用条件に承諾するにチェックし、『Save Changes』をクリックで設定を保存します。

一旦使えるようになったはずですので、試してみましょう。

3.Amazon Associates Link Builderをつかってみる

編集画面の所に、新しくAmazonの検索画面が出ていますので、好きな商品を入力して、好きな商品を選び『Add Short Code』をクリックでコードが出来上がります。

エラーが出るんだけど・・・という人は、過去の売り上げがないから、検索機能が使えない状態だと思われます。

【Rinker】リクエスト回数が多すぎます。エラーの回避方法は？問い合わせて解決！ Rinkerを使おうと思ったら「リクエスト回数が多すぎます。RequestThrottled」というエラーが。放置でも直らない。そんな状況を解決する方法を紹介します。根本原因を解決すると元通り使えるようになりますよ！

Rinkerの記事ですが、エラー原因は同じですので見てみてください。

今回の本題は、これで生成したリンクをカスタマイズしていきます。

Amazon Associates Link Builderをカスタマイズする

左のメニューにある『Associates Link Builder』から、『Templates』を選択します。

そのまま、以下の画像のように入力

テンプレート名には半角英数字しか使えないみたいなので、とりあえず「kaereba-yomereba」にしておきました。

そして、Add HTML for your templateに以下のコードを挿入

HTML

 {{#Items}}
<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;">
  {{#Item}}{{#aalb}}
  <div class="booklink-image" style="float:left;margin:0 15px 10px 0;">
    <a href="{{DetailPageURL}}" target="_blank" rel="nofollow noopener"><img alt="{{Title}}" src="{{MediumImageURL}}"></a></div>
  <div class="booklink-info" style="line-height: 120%; zoom: 1; overflow: hidden;">
    <div class="booklink-name" style="margin-bottom: 10px; line-height: 120%;">
      <p style="padding-bottom: 2rem;
    margin: 0px;"><a href="{{DetailPageURL}}" target="_blank" rel="nofollow noopener">{{Title}}</a></p>
      {{#Merchant}}
      <div class="amzn-product-seller" style="font-size: 8pt">sold by {{Merchant}}</div>{{/Merchant}}
    </div>
    {{#By}}
    <div class="booklink-detail" style="margin-bottom: 5px;">{{By}}</div>{{/By}}
    <div class="booklink-link2" style="margin-top: 10px">
      <div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="{{DetailPageURL}}" target="_blank" rel="nofollow noopener">Amazonで探す</a></div>
    </div>
    <div class="booklink-footer" style="clear: left"></div>
  </div>
  {{/aalb}}{{/Item}}
</div>
{{/Items}}

クラス名などは、ヨメレバで使用したものをそのまま使っています。

そのため、以前書いた記事【CSSコピペで完了！カエレバ・ヨメレバのデザインをカスタマイズ】と同じCSSを使えばOKです。

編集する箇所

外観

テーマエディター

style.css

いつも通りの場所に貼り付けるだけなので迷わないように。

CSS

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

.shoplinkamazon a {
  background: #FF9901;
  border-radius: 7px;
  color: #fff;
}

.shoplinkkindle a {
  background: #007dcd;
  border-radius: 7px;
  color: #fff;
}

.shoplinkrakuten a {
  background: #c20004;
  border-radius: 7px;
  color: #fff;
}

.shoplinkyahoo a {
  background: #7b0099;
  border-radius: 7px;
  color: #fff;
}

.booklink-image {
  zoom: 1.2;
}

.kaerebalink-box, .booklink-box {
  border: 1px #9C9996 solid;
  box-shadow: 2px 2px 4px gray;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-around;
}

@media screen and (max-width: 640px) {
  .kaerebalink-box, .booklink-box {
    display: block;
  }
}

.booklink-footer {
  display: none;
}

.kaerebalink-info, .booklink-info {
  width: 43%;
  font-size: 16px;
}

@media screen and (max-width: 640px) {
  .kaerebalink-info, .booklink-info {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .kaerebalink-image, .booklink-image {
    margin: 0 0 20px 0!important;
    text-align: center;
    float: none!important;
  }
}

こうすることで、カエレバ・ヨメレバで商品を取得したものと、Amazon Associates Link Builderで生成したコードが同じCSSから参照できるため、後でデザインを変更したいと思ったときでも1箇所変更すれば済みます。

既にカエレバ・ヨメレバのリンクのデザインを変更済みなんだけど・・・という人は、CSSについてはなにもしなくてOKです。