アマゾンのAssociates Link Builderを導入してカスタムしよう!

仕事

ブログを書いているYoshihiro(@yoshihiro_free)です。
Amazonアソシエイトでに申請を出し、無事に通過しました。

そこで効率よくバナーを貼り付けるために、
ワードプレスのプラグイン「Associates Link Builder」を導入しました。

サクっとバナーを作れて便利!
しかもアマゾンの公式プラグインですので、安心ですよ~!

しかーし!日本語対応されていない・・・。
表示は基本、全部英語です。

そんな英語だらけのプラグインですが、
高校英語で286人中の283位だった私でもできる、
そんなやり方をお伝えします。

Amazonのアソシエイトでがんばりたい人、必見ですよ!

Amazonアソシエイトとは

そもそもAmazonアソシエイトとは何ぞや。
ということで、公式サイトから引用します。

お客さまのホームページやブログ等で Amazon.co.jp の商品をご紹介いただきます。閲覧者が、あなたのサイトを経由して Amazon.co.jp でお買い物をした場合、各商品カテゴリーの紹介料率に基づき、発送済み商品に対して紹介料をお支払いします。 参加、ご利用は無料です。

引用元:Amazonアソシエイト:初めての方へ
要するに、Amazonで販売されている商品をブログに掲載し、
そのブログから商品を購入してもらえると、紹介料がもらえるサービスです。

商品紹介レビューを書いたりするのが得意な人には最高ですね!

何がいいのか

Amazonアソシエイトって何が良いのか。
公式サイトに書かれている8つの項目を紹介します。

  • 無料で簡単にはじめられる
  • 売上金額の最大10%の紹介料が獲得できる
  • 紹介料は毎月現金なら5,000円、ギフト券なら500円からお支払い
  • 1億種以上の Amazon 商品からお好きな商品が選べる
  • バナーや商品ウィジェットなど、多彩なリンク方法をご用意
  • アソシエイトツールバーを使って簡単リンク作成&SNS投稿
  • Amazon 商品だからこそ可能な高いコンバージョン率
  • PC・モバイル・スマートフォンにも対応

引用元:Amazonアソシエイト:初めての方へ
まず無料ではじめられるってのが良い。
初期投資ゼロって魅力的ですよね。

紹介料も最大10%ですし、1億以上の商品から選べるのも良い。

何でも紹介できますよ。

どうすれば始められるのか

どうやったらAmazonアソシエイトに参加できるのか。
公式サイトより引用し、紹介します。
本当に簡単です。

  • お客様が運営されているホームページやブログのURLを用意する
  • 申し込む(5分)
  • 好きな商品を紹介する(無料)

設置したAmazon.co.jpへのリンク経由で商品が購入されれば、購入金額に応じて紹介料をお支払い。

引用元:Amazonアソシエイト:初めての方へ

本当にこれだけで、私は申請作業に10分もかかってません。
本当に簡単。

Associates Link Builderを導入

ワードプレスの公式プラグインより、
Amazon Associates Link Builderをダウンロードし、
インストールしましょう。

管理画面の「プラグイン」から「新規追加」を選択。
「Amazon」で検索すると出てきます。

それをダウンロードして、インストールして有効化するだけです。
プラグインの公式サイトは、こちらです。
Amazon Associates Link Builder プラグイン

事前準備を

mazon Associates Link Builderを使用するためには、
いくつか事前に準備しないといけないものがございます。
それは、

  • アソシエイトID
  • アクセスキー
  • シークレットキー

この3つは事前に準備しておきましょう。

ではまず、Amazonアソシエイトにサインインし、
「利用をはじめる」をクリックしてください。

アソシエイトID

アソシエイトIDは、Amazonアソシエイトにサインインし、
サインインした後の画面の右上に表示されている、最後に「-22」が付いているコードです。

これをメモしておきましょう。

アクセスキー・シークレットキー

Amazonアソシエイトにサインインし、
「利用をはじめる」をクリックしたあとに表示される、
アクセスキーとシークレットキーをメモしておきましょう。

Associates Link Builderの初期設定

ワードプレスの管理画面の左側に出ているメニューに
「Associates Link Builder」があります。
その中の「Settings」をクリックしてください。

上の画像の画面が出ますので、
左上は「JP」を選び、その右側には「アソシエイトID」を入力してください。
その下に「アクセスキー」と「シークレットキー」を入力する場所があるので、
間違えないように注意して入力してください。

バナーの挿入方法

管理画面の投稿ボタンを押し、ブログを編集する画面を開きます。
そうすると、Amazonの検索バーが表示されていますので、
そこから紹介したい商品を検索します。

商品を検索すると、検索結果の一覧が画像と共に表示されます。
紹介したい商品が1つだけであれば1つだけ選択して、
画面下に表示されている「Add Shortcode」を押してください。

紹介したい商品が複数ある場合は、
検索結果で表示された商品画像を複数選んで、
画面下に表示されている「Add Shortcode」を押してください。

表示されたコードをブログに貼り付けたら完了です。

表示方法をカスタマイズ

実際にバナーを表示すると分かるんですが、
やたらと英語表記が目立ちます。

「価格」が「Price」だったり、
「Amazon.co.jpで買う」が「Products from Amazon.co.jp」だったり。
やたらと英語表記なんです。

それを「日本語」にカスタマイズ。
HTMLやCSSの知識がまったくない私でもできたんで安心してください。

事前の準備

カスタマイズするために、事前準備をしましょう。

ワードプレスの管理画面の左側に出ているメニューに
「Associates Link Builder」があります。
その中の「Templates」をクリックしてください。

そして「Select Template」の項目で「ProductCarousel」 を選択してください。
次に右側にある「Clone」と書かれたボタンを押して作っていきます。

では、Templates画面の上側のHTMLを変更していきますね。

「Products from Amazon.co.jp」を「Amazon.co.jpで買う」に変える


上の画像でも表示しましたが、HTMLコードの4行目。
赤マルの部分「{{Produ・・・・Label}}」を消してください。
そして、その消した部分に「Amazon.co.jpで買う」と入力しましょう。

それだけです。
簡単でしょ?

「Price」を「価格」に、「Was」を「参考価格」に変える


上の画像でも表示しましたが、HTMLコードの31行目と36行目。

31行目の赤マルの部分「{{PriceLabel}}」を消してください。
そして、その消した部分に「価格」と入力しましょう。

36行目の赤マルの部分「{{StrikePriceLabel}}」を消してください。
そして、その消した部分に「参考価格」と入力しましょう。

それだけです。
簡単でしょ?

見出しのタグを解除する


見にくくて申し訳ないんですが、
4行目のコードが「h2」タグで始まっているんですね。

勘の良いブロガーさんならお気づきでしょう。
このままですと「見出し」として取り扱われてしまうんです。
せっかくのブログが見にくくなりますよね。

これを解除します。

やることは簡単です。
「h2」を「div」に。
「/h2」を「/div」に変更するだけです。

これで見出しから解除されましたよ。

CSSを編集する

ちょっと突っ込んだカスタマイズしていきますね。

商品名を全部表示

商品名が長いと途中で「・・・」となったりします。
それを省略せずに全部表示するようにしましょう。
143行目と144行目を修正します。

.aalb-697-product-carousel-unit .aalb-697-pc-product-title a {
display: block;
width: 100%;
overflow: hidden;
/* white-space: nowrap; */←ココ
/* text-overflow: ellipsis; */←ココ
font-size: 13px;
color: #111111;
text-decoration: none;
}

背景を付けて文字サイズを変更

見出し部分に背景を付けて、文字のサイズを変更します。
Templates画面の下側のCSSを変更していきますね。

51行目から57行目の.aalb-◯◯◯-product-carousel-unit .aalb-◯◯◯-pc-ad-header のCSSを一部変更します。
ここでの「◯◯◯」は数字が違うので注意です。

.aalb-◯◯◯-product-carousel-unit .aalb-◯◯◯-pc-ad-header {
padding-left: 3px;
padding-top: 2px;
padding-bottom: 3px;
font-size: 14px;
font-weight: normal;
color: #111111;
background: #EEE8AA;
border-top: 1px solid #7f7f75;
border-left: 1px solid #7f7f75;
border-right: 1px solid #7f7f75;
}

バナーに枠を付けてみる

.aalb-678-pc-wrapper{
border: 1px solid #7f7f75;
}

このコードはCSSの1番最後に記載してください。

スライダーの色を変えてみる

商品を複数選んだ時のスライダーを少し変更。
CSSコードの208行目あたりを変更します。

.aalb-678-product-carousel-unit .aalb-697-pc-btn-prev,
.aalb-678-product-carousel-unit .aalb-697-pc-btn-next {
position: absolute;
top: 50%;
margin-top: -52px;
display: block;
visibility: hidden;
width: 43px;
height: 105px;
z-index: 2;
line-height: 105px;
background: #ffffff;
color: #D0D0D0;
font-size: 35px;
text-align: center;
text-decoration: none;
border: 1px solid #8b8b8b;
-webkit-box-shadow: 0 0 4px #8b8b8b;
box-shadow: 0 0 4px #8b8b8b;
}

忘れてはいけないこと

これ忘れがちになるんですが、
編集が終わったら必ず「Save」を押してくださいね。

これを押さないと修正されませんから。

デフォルトのテンプレートにしよう

ワードプレスの管理画面の左側に出ているメニューに
「Associates Link Builder」があります。
その中の「Settings」をクリックしてください。

Default Templateの項目を、さっき編集したテンプレートにします。
テンプレート名を付けずに編集した場合は「CopyOf-ProductCarousel」になっていると思います。
この部分を、お好きな名前に変更してあげてください。

そして、チェックボックスにチェックをして、
「Save Change」を押して保存します。

さいごに

実際のバナーがこちらになります。


いかがでしょうか。

アマゾンのAssociates Link Builderを導入して
紹介したい商品の記事を書き、マネタイズしてみませんか?

グーグルアドセンスとはひと味違うマネタイズ方法です。
私もがんばって取り組んでいますので、
あなたもがんばりましょう!!

以上、Yoshihiro(@yoshihiro_free)でした。

なお、この記事に掲載されていますCSSコードは、
デフよん様のAmazon Associates Link Builder プラグインでアソシエイトリンクを出す
参考にさせていただきました。

本当に詳しく掲載されていたので、
皆さまもぜひアクセスしてみてください。

コメント