ブログで商品を紹介するときに、Amazonや楽天のリンクを貼りたいときがありますよね。
そんなときは「わかったブログ」の かん吉さんが作った、Amazonも楽天も両方のリンクを同時に貼れちゃう便利なツール「カエレバ」と「ヨメレバ」を使いましょう！
すごく便利なので、私も愛用していますが、デザインをカスタマイズしてもっとおしゃれに商品を紹介しちゃいましょう(*´∀｀*)
カエレバ・ヨメレバは下記サイトです。
Amazonアソシエイトを登録しなくても、もしもアフィリエイトに登録すれば報酬も受け取りやすいのでオススメです。
はてなブログでレスポンシブデザインに対応させてあります。
他の環境の方はうまく調整してみてください！
カエレバ・ヨメレバのデザインをカスタマイズ（レスポンシブver.1）
CSSを追加すると、こんな表示にすることができます。
カエレバPC表示のスクショ
カエレバのスマホ表示のスクショ
元になっているのは、「主婦ライフ」さんが作ってくださったコードです。
コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ - Shufulife
そのまま使うと、スマホ表示でボタンの文字が崩れてしまいました。
あと、７netやベルメゾンは対応していませんでした。
ときどきデザインが崩れてしまっているブログを見かけます。下記で紹介するコードに変えてみてください♪
改良点
・画像を中央表示に
・すべてのショップのボタン化に対応
・ショップリンクの色を変更
・ショップボタン微調整
・楽天koboに対応（2016.7.8）
・ヤフオクのアフィリは終了によりカエレバから廃止（2016.7.5）
・丸善＆ジュンク堂もhontoと合併しているのでヨメレバから廃止（2016.7.5）
CSSをコピペでカスタマイズ
では、コードをご紹介しますね。
デザイン＞カスタマイズ＞デザインCSSにコードを追加します。
/* カエレバ・ヨメレバ（レスポンシブver.1.1） */
.booklink-box, .kaerebalink-box{
width:78%;
margin: 1em 0 1em;
padding:0 8%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image{
margin:15px 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
font-size:15px;
margin-bottom:5px;
line-height:1.2em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
font-size:8pt;
margin-bottom:3px;
}
.booklink-link2, .kaerebalink-link1{
margin-top:3px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
float:left;
width:45%;
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
margin:5px 5px 0 5px;
padding:10px 0px;
text-align:center;
cursor:pointer;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkrakukobo:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkbellemaison:hover, .shoplinkcecile:hover, .shoplinkkakakucom:hover, .shoplinkbk1:hover, .shoplinkehon:hover, .shoplinkkino:hover, .shoplinktoshokan:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkrakukobo:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkbellemaison:active, .shoplinkcecile:active, .shoplinkkakakucom:active, .shoplinkbk1:active, .shoplinkehon:active, .shoplinkkino:active, .shoplinktoshokan:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a, .shoplinktoshokan a{
display:block;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}
.shoplinkamazon a{
color:#ff9900;
}
.shoplinkrakuten a{
color:#bf0000;
}
.shoplinkkindle a{
color:#1a8dcc;
}
.shoplinkrakukobo a{
color:#d50000;
}
.shoplinkyahoo a{
color:#ff0033;
font-size:10px;
}
.shoplinkseven a{
color:#ff6501;
}
.shoplinkbellemaison a{
color:#84be24;
}
.shoplinkcecile a{
color:#8d124b;
}
.shoplinkkakakucom a{
color:#051D93;
}
.shoplinkbk1 a{
color:#0786cb;
}
.shoplinkehon a{
color:#000066;
}
.shoplinkkino a{
color:#003e92;
}
.shoplinktoshokan a{
color:#212121;
}
.booklink-footer{
clear:left;
}
保存したら完了です。
ヨメレバのPC表示のスクショ
ヨメレバのスマホ表示のスクショ
カエレバ・ヨメレバの設定
カエレバ・ヨメレバのリンクを貼る際に、デザインを「amazlet風-２（CSSカスタマイズ用）」に設定してください！でないとうまく表示されません。
過去記事で、すでにカエレバ・ヨメレバのリンクを貼っていてCSSカスタマイズ用の設定にしていない場合は、うまく表示されませんので手直しが必要です。
追記 余白の調整
テーマによっては、ショップボタンと下の枠線と余白がほとんど無い状態になってしまうようです。
コードの上から４行目
padding:0 8%;
の0の部分を、0～5％の間で変更してみて、お好みの余白に調整してください。
まとめ
こんなにショップリンクたくさん貼ることはないと思いますが、Amazonと楽天のリンクが同時に貼れるとっても便利なカエレバ・ヨメレバを、カスタマイズしてご活用ください(*´∀｀*)
収益もアップしますよ～♪
PCとスマホのCSSを分けている場合でも、スマホのところに同じコードを入れることで同じデザインで表示できると思います。（保証はしませんが）
カエレバ・ヨメレバツールを作ってくださったかん吉さんに感謝しています。
もし不具合やアドバイス等ありましたら、コメント欄・サイドバーのメールフォーム 、TwitterのDMからご連絡ください！
↓これが商品リンクです。
PCでも、スマホでもスクリーンサイズに合わせて表示してくれている…ハズ(´・ω・｀)
※ただいまver.2を表示中。
ver.2の記事はこちら↓
happylife-tsubuyaki.hatenablog.com
合わせてアプリーチのカスタマイズもいかが？
