わかりやすい「カエレバ」の設定方法のまとめ【図解あり！】

こんにちはユレオです！

ブログを巡回していてこんなことを思ったことはありませんか？

「この商品紹介のリンクがかっこよくてレイアウトがきれいだ。Amazonと楽天とボタンが二つあるけど、どうやっているんだろ？」

今回はそんなお悩みを解消する「カエレバ」ブログパーツと設定方法をご紹介したいと思います。

kaereba.com

商品紹介ブログパーツカエレバ

https://kaereba.com/#rakuten

ありそうで無かった、商品紹介用のブログパーツあります!

●スポンサーリンク

◆記事の目次◆

商品紹介用のブログパーツ「カエレバ」を使うとどんなことができるの？
はじめに
設定手順１　はてなブログ画面　デザインCSSの設定
設定手順２　カエレバ画面
設定手順３　はてなブログ画面

商品紹介用のブログパーツ「カエレバ」を使うとどんなことができるの？

カエレバを使用して複数のネットショッピングモールへのリンクをまとめて表示することで、アフィリエイト報酬のとりこぼしを減らしたり、ネットショッピングモールごとに商品紹介をせずに済むので、レイアウトが見やすく整理できます。

例えば、炭酸水の商品紹介でAmazonと楽天と別々に用意していたとします。

このように異なるネットショッピングモールの商品紹介をまとめれるので見やすくレイアウトも統一できます。

はじめに

前提としてAmazonや楽天のアフェリエイトを使用するための登録が終了しているものとします。

また、今回はメジャーなAmazonと楽天の設定のみ解説いたします。

設定手順１　はてなブログ画面　デザインCSSの設定

この設定方法は以下のサイトを参考にさせていただきました。

いつ俺〜いつから俺ができないと錯覚していた…

コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ – いつ…

https://www.ituore.com/entry/kaereba-yomereba

今回はカエレバ・ヨメレバのカスタマイズです。カエレバ・ヨメレバはわかったブログのかん吉さんが運営されているブログパーツで、Amazon、楽天などのリンクを載せるのに非常に便利です！カエレバはこちらで、ヨメレバはこちらになります。そんなカエレバ・ヨメレ…

1：PC版の設定を行います。

＊完成イメージ

はてなブログの　デザイン→カスタマイズ→デザインCSS　を開きます。

2:デザインCSSに以下のコードをコピーします。

/*カエレバ・ヨメレバ（PC版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}

３：スマホ版の設定を行います

＊完成イメージ

はてなブログの　デザイン→スマートフォン→記事→記事下　を開きます。

４:記事下に以下のコードをコピーします。

<style type=text/css>
/*カエレバ・ヨメレバ（スマホ版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 80%;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
margin:0 auto;
text-align:center;
}
.kaerebalink-info, .booklink-info {
margin:10px auto;
padding-top:10px;
border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin:5px auto;
text-align: center;
width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
}
.shoplinkkindle {
background: #0079BA;
}
.shoplinkrakuten {
background: #BF0000;
}
.shoplinkkakakucom {
background: #25388E;
}
.shoplinkyahoo {
background: #750992;
}
.booklink-footer {
height:0;
clear: left;
}
</style>