のんビリブログ: Bloggerでカエレバのリンクの表示をカスタマイズする方法！

どうもエディです。

今回はカエレバの表示をカスタマイズする方法の話です。

ブログで商品を紹介する時に、アマゾン、楽天市場などのリンクを取得して貼り付けていました。

でも、アマゾンと楽天では表示される画像の大きさが微妙に違ったりしてました。
大きさを調整しても微妙に違ったりします。

それと横並びになったりとしていたのでカエレバというツールを使用する事にしたんです。

●カエレバとは？

アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することでアフィリエイト報酬の取りこぼしを減らすブログパーツです。

実際にカエレバを使用する事によってアマゾン、楽天市場、Yahoo!ショッピングなど一気に表示出来るので、すごく助かりました。

アマゾンのアフィリエイトリンクしか貼っていない場合、楽天派の人はスルーしていたはずですが楽天市場、Yahoo!ショッピングも一緒に貼っておけばOKですよね。

クリック率も上がりましたよ！

●カエレバのカスタマイズ

しかし、デフォルトだと見栄えがあまり良くないんですよ。

デフォルトだとこんな感じです。

リンクが文字だけでデザインも良くないし、押しずらいです。

これを良くある、こんな感じにしたいと思ってました。

ちなみに、これはここで僕が紹介している記事ですよ。

で、調べてみるとbloggerのカエレバのカスタマイズする方法は、ほとんど載っていません。
２つ位ですかね。

その２つのサイトを見て、カスタマイズしようとしたんですけど、どこにコードを挿入したらいいか、よく分からないんですよ。

書いてる通りにしているのに全然できなかったんです。

ある程度の知識がある事が前提で、書かれているんですかね？

CSS？
よく分からん！！

なので具体的にココに挿入！
ていうところを紹介します。

まずはbloggerのテーマの画面でHTMLの編集を選択して下さい。
　
そしたらCtrl＋Fボタンを押して

<b:skin> ... </b:skin>

を検索して下さい。

大体１０行前後位にあると思います。

次は
<b:skin> ... </b:skin>
の次の行から

“
/* モバイルからのアクセスで表示される内容 */
/*--------------------------------------
ヨメレバ・カエレバ（スマホ）

--------------------------------------*/
<b:if cond='data:blog.isMobile'>
<style>
.booklink-box, .kaerebalink-box{
padding:15px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
width: 100px;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{
margin-bottom:12px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:10px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{
font-size: 12px;
}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin: 2px 0px;
padding:10px 0px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active,
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.booklink-footer{clear:left;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
</style>
</b:if>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　”

を入力して下さい。

次は

<b:skin> ... </b:skin>

の間の「 ... 」をクリックすると隠れているコードが表示されます。

展開されたコードの終わりが

]]></b:skin>

になっているので、その前の行に

“
/* PCからのアクセスで表示される内容 */
/*--------------------------------------
ヨメレバ・カエレバ（PC）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
/*以下は、もしもアフィリエイトではレイアウトが崩れる場合は必要なコード*/
.kaerebalink-name img,
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
display:none;

}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　”

を入力して保存すればOKです。

※　ちなみに「　“　”　」の記号は引用しています。という事が分かるようにするための記号なので入力はしないで下さい。

これでリンクがボタンのように表示される様になります。

こんな感じです。