「Rinker」よりいい?プラグインを使わないAmazonアフィリンクをHTMLとCSSでブチ込む話

こんにちは、アマプラ歴9年のLeoです!

地元シアトルの最有力企業でもあるAmazonのエコシステムにがっつり捕まえられているわたくしですが、ブログを収益化する時にGoogle Adsenseの次に手を出しやすいのがAmazon associateだと思います。

この記事では、そんなAmazon associateプログラムに参加する上で使っている「Rinker」というプラグインと、それよりもいいかも?と思っているリンクの貼り付け方について紹介します。

  • 有力プラグイン「Rinker」のこと
  • プラグインを使わずリンクを貼っている話
  • 両者を比べてのLeoの考え

Amazon associateプログラムの概要

最初に、知らない方のために、めっちゃ基本的な説明で書きます!

  • 紹介する商品のリンクを取得
  • 画像や文字にくっつけて掲載
  • リンクを踏んだ上でAmazonから購入されると報酬発生

アフィリエイトの基本構造と特に差異はない構造ですね。

報酬の受け取り方は現金で欲しい場合は手数料等が発生しますが、指定口座で受け取れて、手数料を回避したい場合はAmazonギフトカードでもらうという方法もあります。

アフィリのお供に最適、「Rinker」というプラグイン

Amazonや楽天などのEC大手は、商品紹介をブロガーなどにさせることで宣伝を拡大させていて、ブロガーたちは広告者となって報酬を得ます。

Google Adsenseはクリック報酬なのでクリックされたらそれで完了ですが、Amazonなどはその後に商品が買われなければ報酬が発生しません

そのため、より、「買いたい」と思ってもらう記事を書く必要があり、また、そう思った際にすぐに商品ページに誘わなければならないわけですが、

例えばボクは、以下のようなボタンを作っていて、そういう方法で誘う手法や、単純にリンクを貼る方法もある中、

「Rinker」はかなり簡単にリンクを含めたボックスを作れる素晴らしいプラグインです。

Amazonでチェック

↑こちらがRinkerで生成したリンク。かなりカスタマイズ性があることと、一番好んでいるポイントは、見たときの値段が掲載されることです。

HTMLとCSSで近しいボックスを挿入する方法

さて、ここからはHTMLとCSSを使って、プラグインなしで似たようなボックスを挿入する方法です。

↑これがプラグインを使わない方法でAmazonのリンクを挿入した画面です。

「Rinker」では、簡単にAmazonや楽天、Yahoo!などのリンクを同時に貼れ、また、書籍の場合はKindleまで自動で挿入される、痒いところに手が届きまくるツールですが、

以上のボックスは、割と長いHTMLコードを直接挿入しているのでAddQuicktagを使わないと面倒です。

<div class=“amzlink-box" style="overflow: hidden; font-size: small; zoom: 1; margin: 15px 0; text-align: left;">
<div class=“amzlink-image" style="float: left; margin: 0px 15px 10px 0px; width: 100px; height: 100px; text-align: center;"><a href="■■ここに商品リンク■■" target="_blank" rel="nofollow noopener"><img src="■■ここに画像リンク■■"></a></div>
<div class=“amzlink-info" style="overflow: hidden; zoom: 1; line-height: 120%;">
<div class=“amzlink-title" style="margin-bottom: 2px; line-height: 120%;"><a href="■■ここに商品リンク■■" target="_blank" rel="nofollow noopener">■■ここに商品名■■</a></div>
<div class=“amzlink-manufacturer" style="margin-bottom: 5px;">■■販売者名■■</div>
<div class=“amzlink-description" style="margin-top: 7px;">■■ここに商品情報■■</div>
</div>
<div class="amzlink-footer" style="clear: left;">&nbsp;</div>
</div>

↑以上のようなタグをブチ込んで以上のAmazon広告を表示させています。

  • 貼れるリンクはAmazonのみ
  • ボタンは表示されない
  • 色々自分でコピペしなければならない
  • モバイルで見た時にコンパクト

Rinkerが機能内から商品検索までできるのに対し、このやり方では一回一回コピペで引っ張ってくる必要があります。

引っ張ってくる要素は「商品リンク」、「商品画像URL」、「商品名」、「販売元名」、「商品情報」で、結構面倒です。

両者の比較検証

以上の2つを比較してみました。

Rinker
  • 機能内で検索までできる
  • 一度掲載したリンクを再度載せるのが簡単
  • 複数ECサイトをリンクできる
独自タグ
  • リンクなどコピペで取りに行く
  • 再度載せる場合は過去の記事からコピペ
  • Amazonしか載せられない

こんな感じの比較だけを見るとやっぱりRinkerが有能な様に見えます。

そりゃ、大人気なプラグインですから有能で当然ですが、どんなツールも万能ではありません

Rinkerは商品検索をするだけリンクから画像から商品名、価格情報まで引っ張ってきてくれるのでめっちゃ楽です、しかし、1つ嫌なところがあって、それは、

モバイル時の表示がでかい

これなんですよね。

多分CSSをいじって調整できなくはないと思うのですが、「Amazon」や「楽天」などのリンクを挿入するスペースの分を含めて縦長に表記されてしまいます。

パソコンから見たRinker

ボクは今、縁をなくしているのでこんな感じで表記されますが、左に画像、右に情報、下部にリンクボタン、というレイアウトです。

モバイルから見たRinker

同じリンクをスマホから見たらこんな感じで、縦長になってしまうのです。

確かに、リンク先への誘導を考えるなら、表示域は広く、大きい方がいいし、ボタンもこれくらい主張している方がいいのですが、一方で、

興味ある人に一応リンク載せとくやで

というくらいの感覚で紹介する場合、この表記は主張しすぎなんですよね。

独自タグのモバイル表記

一方で、独自タグで作ったリンクの場合、

こんな感じでボタンがないことも含め、コンパクトに表示されます。

ボタンの色を変えたり、ボタンレイアウトを並列にするなどで対応できそうなんですが、やっぱりボタンがあると主張が強くなることを避けきれないため、

がっつり商品紹介記事で記事最後に入れるくらいならRinkerはいいなーって思う一方で、話題にちょろっと出てきた程度のリンクなら独自タグが主張薄くていいのかなって思いました。

まとめ・総括

以上、

超有能プラグインのRinkerと、独自タグで作るアフィリンクのお話でした!

どこからどう見てもアフィブログっていうブログならAdsenseであれアフィリンクであれ貼りまくってもいいと思いますが、

一方で、雑記ブログとか、企業のブログなど、あまり広告広告しまくっているのが微妙な場合はひっそり記事に溶け込ませるべきかなって思います。

LEOLOGは雑記ブログで、そんなに広告を入れたくない記事と、紹介記事として割と広告が目立ってもいい記事が混ざっているので、多分当面Rinkerと独自タグを共存させると思いますが、

Rinkerのカスタムに手を出すかも知れませんのでもしカスタムしたらまた報告します!

一応RinkerもCSSはでちょっといじっています!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!