もしもアフィリエイトをやっている人たちの中で、カエレバ・ヨメレバのブログパーツを利用している人は多いと思います。 私ももしもアフィリエイトを始めてすぐにこのブログパーツを使い始めました。
このブログパーツのカスタマイズCSSを提供してくれているサイトさんなどもあり、コピペしてそのままずっと使っていたのですが、久しぶりに見直す機会があり、カスタマイズし直しました。 それと同時に、ブログパーツのカスタマイズの記事を書いていなかったことにも気づいたので、今回は自分用のメモも兼ねて書いておこうと。（カスタマイズしている時って、夢中というか必死でやっているので、カスタマイズの過程をメモし忘れることが多く、後で、「はて、ここはどうやったかしら？？？」とか「どのサイトさんの記事を参考にしたのやら･･･」ということがままあります）
デザインCSSに貼り付けたコード
このサイトさんにあるCSSをコピペしました。
www.yukihy.com
当ブログはレスポンシブデザインを使用しているので、貼り付けたコードは次のものです。
*--------------------------------------ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------
*/.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;}
@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}
※２．このコードを使用した場合、カエレバ・ヨメレバでリンクを作成する時は「amazonlet風-2」というデザインを選択する必要があります。
リンクボタンの位置が崩れる問題
実際にコピペしてみると、リンクボタンの位置がずれてしまいました。
同じような問題が発生している方もいるのですね。 次のサイトさん（↓）がこの問題の解決方法を書いてくれています。
www.dame-ningen.com
上記コードの中ほどにある「/*ボタンを変えるときはここから*/」から下へ見ていくと「/*ここまでを変更*/」という箇所があります（↓）。
/
*ここまでを変更*/.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
この下に以下のコードを書き加えます。
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
赤文字が書き加えた箇所（↓）
/
*ここまでを変更*/.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
その他のカスタマイズ
リンクボタンの種類を増やした
7netもたまに含ませることがあるので、上記コードに7netのリンクボタンを追加しました。
/
*ボタンを変えるときはここから*/.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;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
/
*ボタンを変えるときはここから*/.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;}
.shoplinkseven a{color:#314995 !important;border: 2px solid #314995 !importnat;}
/
*ここまでを変更*/.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
.shoplinkseven img{display:none;}
リンクボタンの枠線の太さを変更
1px → 2pxに変更しました。
/
*ボタンを変えるときはここから*/.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;}
.shoplinkseven a{color:#314995 !important;border: 2px solid #314995 !importnat;}
デザイン
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:3px solid #fcf0f1;
overflow: hidden;
font-size:small;
border-radius:5px;
box-shadow:0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /
*ボーダーの周りの影*/}
border:double #CCC; → border:3px solid #fcf0f1;
本体の角に多少丸みをもたせる：
border-radius:5px;
本体に影をつけて、ちょっと浮き出た感じにする：
box-shadow:0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影*/
デザインの参考にさせて頂いたサイトさん（↓）
kanamii.jp
他にも、まだ少し変えたい部分はあるのですが、とりあえず、当ブログの雰囲気に多少合ったデザインに変えることができたかなと思っています。
（変更後↓）
