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

cat-1074657_640

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

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

当サイトでも、AmazonアソシエイトのリンクにBabyLinkを使っています(^^)

スポンサーリンク

BabyLink

BabyLinkとは

BabyLinkサイト

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

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

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

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

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

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版や、楽天ブックスのリンクも同時に作成できるので、とても便利です♪

このヨメレバの商品バージョンで、カエレバというサービスもあるみたいです。
時間のある時に詳しく見てみようと思います(^^)/

おわりに

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

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

(ソースコードの記載もプラグインなしでやりたいけど、いいツールないかなあ~)