Amazonアソシエイトをプラグインなしで綺麗に貼れるツールBabyLink

記事のシェアはこちらから。

WordPress使っている場合には、Amazonアソシエイトを綺麗に貼れるプラグインとして、Amazon JSが有名です。

が、Wordpressを使っていない方や、プラグインなしでAmazonアソシエイトを綺麗に貼りたい方には、BabyLinkというツールがおすすめです。

当サイトでも、AmazonアソシエイトのリンクにBabyLinkを使っています(^^)
→ 現在は、カエレバをメインに使っています。

スポンサーリンク

BabyLink

BabyLinkとは

BabyLinkサイト

BabyLinkは、小さな小さなアソシエイトリンクの作成ツールです。

ブログの文中で紹介すると効果的な、小さくて控え目な画像入りアソシエイトリンクを作成することができます。

例えば、このような感じにAmazonアソシエイトのリンクを綺麗に張ることができます。
(※CSSをいじっているので、見た目は少しカスタマイズされています。)

参考:Amazonアソシエイトのコードを直接貼った場合

amazon-assosiate-example

やはり、あまり綺麗じゃありませんよね(汗)

BabyLinkを選んだ理由

私がAmazonアソシエイトのリンクを綺麗に貼るために、BabyLinkを選んだ理由としては、

  • プラグインが増えることによって、サイトを重くしたくないから
  • プラグインを増やすと、更新が手間だから
  • プラグインで対応すると、プラグインの公開が停止されたら手詰まりだから(ショートコードを全て書き換える必要がある)

などなど、基本的にはプラグインを使いたくない、という理由です。

そのため、プラグインなしでAmazonアソシエイトを綺麗に貼れるものがないか探していたところ、当サイトのWordpressテーマSimplicityの作者様が作られているのを発見したため、BabyLinkを使うようになりました。

BabyLinkの使い方

BabyLinkの公式サイトの下の方にある「使い方」に詳しく記載されているので、そちらをご覧ください。

BabyLinkの見た目をカスタマイズする方法

ただ、このBabyLinkも初期状態で使うと少し見栄えが良くありません。

参考:BabyLinkの初期状態(上)とCSSカスタマイズ後(下)

babylink-default

なので、当サイトではCSSをカスタマイズして見栄えを少し良くしております。

特に隠すようなものではないので、CSSサンプルコードは公開させて頂きます。

/* BabyLinkのカスタマイズ設定 */
.babylink-box {
  border: 1px solid #ccc !important;
  padding: 15px 10px 0px 10px !important;
}
.babylink-image {
  width: 100px !important;
  height: 100px !important;
}
.babylink-title, .babylink-manufacturer, .babylink-description {
  font-size:16px !important;
  margin-bottom: 10px !important;
}

カスタマイズでやってることをご説明いたします。

.babylink-box

.babylink-box:BabyLinkの範囲の設定をする
border: 1px solid #ccc:1pxの実践を#CCCの色で書く
padding: 15px 10px 0px 10px:内側の余白を開ける(上右下左の順で設定)

.babylink-image

.babylink-image:サムネイル画像についての設定。100x100pxにしています。

.babylink-title, .babylink-manufacturer, .babylink-description

.babylink-title:タイトル部分の設定。Amazonへのリンク部分です。
.babylink-manufacturer:メーカー部分の設定
.babylink-description:説明部分の設定。商品説明入りverの【】の部分。
これらはフォントサイズ16px、外側下の余白を10px空けています。

!importantもそのまま書いてください
なぜなら、BabyLinkのリンクコードにスタイルが埋め込まれているため、単純にスタイルシートに記載しても反映されないからです。
そのため、!importantを付けて、CSSに記載した内容を反映するようにしています。

おまけ:書籍紹介ブログパーツ ヨメレバ

ブログでは書籍のみ紹介しているという方には、書籍紹介ブログパーツ ヨメレバもおすすめです。

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した本を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

ヨメレバを使うと、こんな感じになります。

見た目も十分綺麗だし、Amazonの本だけでなく、Kindle版や、楽天ブックスのリンクも同時に作成できるので、とても便利です♪

このヨメレバの商品バージョンで、カエレバというサービスもあります。
当サイトで、Simplicityユーザ向けのカスタマイズを解説しているので良ければどうぞ!

Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ方法を紹介しています。 カスタマイズと言ってもコピペのみなので、初心者でも簡単に行えます。

おわりに

今回は、プラグインなしで綺麗にAmazonアソシエイトを綺麗に貼れるツール「BabyLink」をご紹介させて頂きました。

ブロガーの皆様のお役に立てれば嬉しいです。

スポンサーリンク
スポンサーリンク

記事のシェアはこちらから。

フォローはこちら。お気軽にどうぞ!

このブログを応援する。

コメント

  1. MIKAN より:

    なぎそら様。初めまして。
    MIKANと申します。

    BABY LINKで検索していたところこのサイトにたどり着きました。
    カスタマイズ方法まで載せて頂きありがとうございます。
    ぜひ使わせて頂きます。

    そこで質問なのですが、なぎそら様のブログ4miraiでは最近カエレバを使っているようですが、やはりカエレバの方が使い勝手が良かったりしますでしょうか?

    BABY LINKは記事本文に溶け込みすぎるあまりクリックされない(スルーされる)ような気がなんとなくしています。

    その辺の感想を教えて頂きたいです。よろしくお願いいたします。
    突然のコメント失礼いたしました。

  2. なぎそら より:

    こんにちは。初めまして。
    たしかに、BabyLinkはシンプルすぎてあまり目立たないかもしれませんね。

    私も最初はBabyLinkを使っていましたが、カエレバの存在を知ってからはカエレバオンリーになりました。

    理由は2つあって、

    1. Amazon以外のリンクが貼れる
    2. BabyLinkの作者さんがカエレバを使っている

    からです。

    カエレバはAmazon以外の楽天などのリンクも同時に貼れるので、楽天オンリーユーザのクリックを回収することが出来ます。
    Amazonほどクリックは多くないですが、楽天もそれなりにクリックはあるので収益アップが見込めます。

    あと、これが私がカエレバを使う最大の理由なのですが、「BabyLinkの作者さんがカエレバを使っている」からです(笑)
    例えばこのページ、

    クラウド経理ソフトの「MFクラウド会計・確定申告」を利用するための公式ガイドブックです。イラストや、スクリーンショットが多用されており、青色申告をするための手順を一通り確認することができます。

    BabyLinkも1箇所だけ使われていますが、残りは全てカエレバです。

    私は結構「寝ログ」の真似をするのが好き(寝ログでやってることに間違いはない、と思ってる)なので、「作者さんがカエレバを使っているなら、そっちの方が良いはずだから私もカエレバ使おう」となりました。
    やはり、Amazon以外のユーザのクリックを回収できるのが大きいからだとと思います。

    また、カエレバとBabyLinkのどちらを使うか迷っているようなら、1週間~1ヶ月掛けてそれぞれを貼ってどちらのパフォーマンスが良いかテストするのが良いと思います。
    ずっと続けていくブログ生活のほんの1週間や1ヶ月をテストに使った所で、影響は微々たるものですからね~。

    テスト結果を見るのも楽しいですし(笑)