WordPressなどでブログを運営し、アドセンス収益以外にアマゾンや楽天アフィリエイトなどのASPでも収益化を図っている場合、ついついクリックしたくなるボタンカスタマイズはこだわりたいですよね。
今回はamazonアソシエイトのリンクボタンをプラグインなしで簡単に色をつけたり、四角いボックス型にするなどおしゃれで洗練されたデザインへカスタマイズする方法を解説していきます!
amazonや楽天、Kindleやもしもなど、アフィリボタンをおしゃれにカスタマイズする方法は?
ASP(Application Service Provider)の定番、amazonアソシエイトや楽天アフィリエイト、A8ネットやもしもアフィリエイトなどを使ってブログ収益を得ている場合、クリック率の高さは収益の要ですよね。
ただ私の場合「おしゃれにできる所はとことんおしゃれに洗練させたいじゃん!」というのが正直な所でした。
何せアマゾンアフィリエイトってデフォルトだと・・・
こんな感じとか・・・
こんな感じとか・・・
ちょっと残念感、ありません???(涙)
ちなみに、この本は現時点(2017年10月4日)での売れ筋ランキング1位の本です。
ランキング1位がこのタイトルって何だか、ちょっとシミジミしてしまいました・・・。
兎にも角にも、まあこの本はランキング1位なだけあってキャッチーなタイトルなので、この様なあまりイケてないリンクボタンでもついついクリックしてしまいそうになりますが、もっと分かりやすいボタンの方が絶対いいですよね!
例えばこんな感じ。
ついついクリックしたくなりませんか!?
見やすいし、Amazonと楽天のID両方持っていて使い分けてる場合はかなり便利ですよね!
蛇足ですが、こちらはランキング2位の本でした笑。
ついクリックしたくなるのは、キングコング西野亮廣さんの本だからというのは否めませんが・・・。
デフォルトのアマゾンリンクボタンのままではタイトルや著者の情報も切れて分かりづらいですし、値段や出版社も分かりづらいのでユーザビリティがよろしくありません。
そして、購読者の中にはアマゾンだけじゃなく楽天や物を持ちたくないミニマリストに多いKindle派もいるので、値段を比較したりポイントを考慮したりと、より自分にお得な購入を選択したいもの。
この「ユーザビリティ」「複数媒体リンク」「おしゃれなデザイン」全て兼ね備えたツールを紹介します!
使い方もプラグイン設定などは一切必要ないのでとてもおすすめですよ!
ヨメレバ・カエレバの使い方は?プラグインなしで簡単にカスタマイズ可能!
今回紹介するツールは「ヨメレバ」という書籍紹介ブログパーツ。
先ほどのこちらのリンクボタンを作成する流れをここから解説していきます。
IDの調べ方に関しては、「調べ方」というリンクに飛ぶと詳細が記載されているので、そちらでご確認いただけます^^
私の場合はアマゾンアフィリエイト、楽天アフィリエイト、A8ネットの3サイト分のIDを登録しています。
全て入力したら一番下にある「保存」をクリック。
無事保存できたら準備完了です!それでは早速ASPボタンを作成する作業に入っていきましょう。
ヨメレバでASPリンクボタンを作成する方法
「ヨメレバ」トップ画面の最上位部分にある「書籍キーワード」から、自分がリンクボタンを作成したい書籍名を入力します。
先ほどのボタンの場合だと「革命のファンファーレ」と入力すれば出てくるはずです。

入力して「検索」をクリックすると、検索結果一覧の画面が出てきます。自分が表示させたいデザインのものを選択し、「ブログパーツを作る」をクリックします。

続いて表示された画面のプルダウンで、「amazlet風ー2」を選択します。

チェックボックスが自分が生成したいASPリンク先になっているかを確認したら、表示されているコードをコピーします。

あとはブログ本文のテキストエディタに貼り付ければ完了です!^^
「カエレバ 」「ヨメレバ」の違いは?
「ヨメレバ」と同様のツールとして、商品紹介用のブログパーツに「カエレバ」というものもあります。
使い方は「ヨメレバ」と全く同じ。商品商材が「ヨメレバ」では書籍専用だったのに対し、「カエレバ」ではamazonや楽天、yahooショッピングやベルメゾンなど、インターネット通販全般のボタン生成が可能です。
例えば検索ワードに、引退前のベストアルバムが話題となってる安室ちゃんで検索してみます。

「安室奈美恵」と入力すると、この様にベストアルバムからツアーDVDなどamazonに置いてある商品がズラリと表示されます。
商品アフィリエイトリンクはamazon以外のASPリンクで作成する、という棲み分けでも勿論いいと思いますが、書籍もその他商品も、一律この様なボタンに統一されたい場合は「ヨメレバ」「カエレバ」併用が便利ですね!
ヨメレバ・カエレバのボタンデザインカスタマイズ方法!カスタムCSSを使えば簡単!
「ヨメレバ」「カエレバ」で生成したリンクボタンコードをブログ本文に貼り付けると、デフォルトではこの様な表示になると思います。

このままでも勿論いいのですが、さらに見やすいデザインに編集するには、CSSでカスタマイズしていきましょう。
私が参考にしたのはこちらのYukihy Lifeさんのサイト。
非常に分かりやすく説明されています!
ブログをレスポンシブ対応にされている場合は、「カスタムCSS」で上記サイトの「レスポンシブ」コードを貼り付ければ完了です!
参考記事:カスタムCSSの使い方!テーマ編集をしないでCSSを簡単に変更する方法
サイトデザインはユーザビリティと生産性の高さが決め手
今回はブログアフィリエイトでASPボタンをおしゃれにカスタマイズする方法を紹介していきました。
この方法を知った時は、某名刺CMの松重豊さんの様に「早く言ってよ〜(涙)」となったものです・・。
デザインのカスタマイズは勿論個々により好みが分かれると思いますが、サイト比較できるユーザビリティの高さというのは侮れませんよね。
実際にこのデザインにしてからは、デザイン向上だけでなくASP収益も若干上がりましたし、何より各アフィリエイトサイトでリンク生成する手間も省けたので、サイト運営者・訪問者共に嬉しい機能だと思います。
是非参考にされてみてください^^