アフィリエイト Wordpress stinger

Stinger6にヨメレバ・カエレバを導入してボタン風にかっこよくカスタマイズ

更新日:

どうもみなさんこんにちは

今まで書籍やグッズの紹介にアマゾンアソシエイトのみを使用していましたが、よくよく考えたら楽天ユーザーは楽天しか使わない事に気づきまして、みなさんに、当サイトで興味を持って頂いたものを楽天の検索窓から検索していただくなどという、紹介しておきながら大変なお手間をかけている事態にようやく気づきました(しかもご指摘頂いて)。

でも、いちいち両方のリンクを取って並べるのは面倒ですし、2つ並べるのは見栄えも悪いです。何とかしようとテンプレ作ってCSSでblockを組んで、リンクを2か所からとってと・・・結構な時間を使った挙句、Google先生に少々聞いたら「ヨメレバ」がとても便利だと先生がおっしゃていました。

既にご存知の方も多いとは思いますので、かなり恥ずかしいですが、「わかったブログ」の「かん吉さん」という方が開発された「ヨメレバ」「カエレバ」という、とてつもなく便利なツールがあるのを、今さらながら知りまして当サイトにも導入してみました。ブログパーツというらしいです。(恥ずかし)

今回は、ヨメレバ・カエレバを導入して、リンク部分をCSSでボタン風にカスタマイズしてみました。

スポンサーリンク

ヨメレバ・カエレバの導入

既にAmazonとか楽天との提携が済んでいる前提ですが、ヨメレバ・カエレバの導入は簡単です。私は今回の導入に伴いまして、Amazonと楽天の提携先を全て変えました。1つのASPでAmazonと楽天が同じ料率で管理出来て、しかも現金での報酬支払となるので「今までなんでしなかったんだろう?」という事なんですが、全てのリンクを貼りなおす事になるため二の足を踏んでいました。

しかし、このヨメレバ・カエレバでリンク作成が驚くほど楽になるのを見越して、全てもしもアフィリエイトに変更しました。もしどのASPにしよう?とか、ASPが多すぎる!など悩んでいる方がいらっしゃたら、ブログでアフィリエイトするならASPはこの5つだけで十分では?を参考にしてみてください。

さて、ヨメレバ・カエレバの導入ですが、下記のサイトで必要情報を入力して、あとは商品を検索すると自動的にこんな商品紹介パーツを作ってくれます。使い方はヨメレバ・カエレバそれぞれのサイトに詳しい説明があるので、そちらをご覧頂いた方が良いでしょう。本当に簡単になります。
ヨメレバはこちら
カエレバはこちら

yomereba-image

ヨメレバ・カエレバのCSSカスタマイズ

ヨメレバ・カエレバの導入は簡単ですし、記事にコピーペーストでこんなに綺麗な商品リンクが作れてしまうのですから、これで十分だとは思います。しかしもうちょっと目立たせたい!せっかく良いものを紹介しているのですから、せめてお店に見にいって欲しい!と思ってしまい、CSSでカッコよいボタンを作れないかと思案していたところ、とても素晴らしいサイトに出会いまして、こちらを参考に(ほぼそのまま・・)作らせて頂きました。

えむ氏さんの記事
ヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな[CSS紹介]

今回私が作成したCSSの前提は、

amazlet風-2(cssカスタマイズ用)のパーツ
ヨメレバは、Amazon、Kindle、楽天市場 のみ
カエレバは、Amazon、楽天市場、Yahoo のみ

となっています。その他、7netやベルメゾンなどのアフィリエイトリンクを追加したい方は、カスタマイズが必要です。
また、当サイトは、Stinger6を使用しておりますため、そのための対応をしています。もしかしたら他のテーマでは表示がおかしくなるかもしれませんのでご注意ください。

こんな感じになってボタンが目立つようになります。

スマホだとボタンが縦に並びます。
yomereba-mobile-css

これで、皆さんに直接お店にに見にいっていただけるかな?
リンク作成の作業スピードも上がって、写真のエージェントに怒られないで済みそうですし^^

CSSコード

Stinger6のstyle.cssの一番下に下記を追記します。

/************************************
** ヨメレバ amazlet風-2(cssカスタマイズ用) stinger6対応 上善如水
************************************/
 
.booklink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.booklink-image{float:left;
margin:0 15px 10px 0;
}
.booklink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.booklink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.booklink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{margin-bottom:5px;
}
.booklink-link2{margin-top:10px;
}
.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.shoplinkkindle{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#ff8000;
}
.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.shoplinkamazon a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.shoplinkkindle a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 3.0em;
}
.shoplinkamazon img,
.shoplinkkindle img,
.shoplinkrakuten img,
.shoplinkyahoo img
 {
       display: inline !important;
}
.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 1.6em;
}
.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.shoplinkkindle a:hover{color:#FFFFFF; background:#ffd5aa;}
.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.booklink-footer{clear:left;}

/************************************
**  カエレバ amazlet風-2(cssカスタマイズ用) stinger6対応 上善如水
************************************/
 
.kaerebalink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.kaerebalink-image{float:left;
margin:0 15px 10px 0;
}
.kaerebalink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.kaerebalink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.kaerebalink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.kaerebalink-detail{margin-bottom:5px;}
.kaerebalink-link1{margin-top:10px;}
.kaerebalink-box div.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.kaerebalink-box div.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.kaerebalink-box div.shoplinkyahoo{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#0000cc;
}
.kaerebalink-box div.shoplinkamazon a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkyahoo a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 0.3em;
}
.kaerebalink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.kaerebalink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.kaerebalink-box div.shoplinkyahoo a:hover{color:#FFFFFF; background:#aaaacc;}
.booklink-footer{clear: left;}

-アフィリエイト, Wordpress, stinger

Copyright© 上善如水 , 2019 All Rights Reserved.