Amazonや楽天の商品や、Kindle本を紹介するときに便利なカエレバ・ヨメレバ。
すぐにリンクが生成できて便利ですが、「初期のままだとデザインが気に入らないな」「もうちょっと可愛くしたいな」なんて思ったことはありませんか？
自分のブログ用に改めてカスタマイズしたので、CSSを公開します。お役に立てれば嬉しいな。
カエレバ・ヨメレバをカスタマイズ
カエレバ
ヨメレバ
タイトルリンクの下線を少し離し、本のタイトルの前にアイコンフォントをつけました。また、ボタンにシャドウをつけて目立つように調整しました。
※リンクは「楽天」「Amazon」「Kindle」のみです。
※2/9 「Yahoo!ショッピング」追加しました。ヤフーショッピングのアフィリエイトへの提携方法は「カエレバにヤフーショッピングを追加する方法【画像手順つき】」を参考にしてください。
[colwrap]
[col2]
カエレバ（スマホ用）
[/col2]
[col2]
ヨメレバ（スマホ用）
[/col2]
[/colwrap]
横幅が639px以下（スマホやタブレット）の場合は、メーカー名や著者名・出版社・発行日が消えてコンパクトに。画像も小さく調整しました。
カエレバ・ヨメレバカスタマイズ用CSS
下記のコードをCSSに追加してお使いください。※カエレバ・ヨメレバ側の設定では「amazlet風-2(CSSカスタマイズ用)」をお選びください。画像サイズは小です。
[box class="blue_box"]
CSS
/* ヨメレバ・カエレバカスタマイズ */
.cstmreba {
margin-bottom:10px;
padding: 10px;
border-radius: 20px;
background: #eef4fb;
}
.kaerebalink-box, .booklink-box {
padding: 20px;
border: 2px dashed #FFF;
border-radius: 20px;
overflow: auto;
}
.kaerebalink-image, .booklink-image {
float: left;
margin-right: 20px;
}
.kaerebalink-name p, .booklink-name p {
margin: 0;
}
.kaerebalink-name a, .booklink-name a {
padding-bottom: 5px;
border-bottom: 1px solid #5f4339;
color: #5f4339;
text-decoration: none;
}
.booklink-name a:before {
margin-right: 5px;
color: #5f4339;
font-family: "FontAwesome";
content: '\f02d';
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: x-small;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
border: none;
}
.booklink-powered-date a:before{
display:none;
}
.booklink-powered-date a {
color: #5f4339;
text-decoration: none;
}
.kaerebalink-detail, .booklink-detail {
font-size: small;
}
.shoplinkkindle, .shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo {
padding: 5px 0px;
}
.kaerebalink-link1, .booklink-link2 {
float: left;
}
.kaerebalink-link1 a, .booklink-link2 a {
color: #fff;
text-decoration: none;
}
.kaerebalink-link1 a:hover,
.booklink-link2 a:hover {
color: #f0f0f0!important;
opacity:0.7;
filter: alpha(opacity=70);
}
.shoplinkkindle a {
padding: 5px 10px;
border-radius: 3px;
background: #448aff;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.shoplinkamazon a {
padding: 5px 10px;
border-radius: 3px;
background: #ffba00;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.shoplinkrakuten a {
padding: 5px 10px;
border-radius: 3px;
background: #ff445b;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.shoplinkyahoo a {
background: #445bff;
padding: 5px 10px;
border-radius: 3px;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
@media screen and (max-width: 639px){
.kaerebalink-image, .booklink-image {
width: 50px;
margin-right: 10px;
}
.kaerebalink-detail, .booklink-detail {
display: none;
}
}
[/box]
カエレバ・ヨメレバを自分好みの色にカスタマイズする方法
先ほどご紹介したコードをさらにカスタマイズして、自分のブログにあったものを作成してみましょう。
カエレバ・ヨメレバの背景色を変更する
[box class="blue_box"]CSS
.cstmreba {[/box]
padding: 10px;
border-radius: 20px;
background: #eef4fb;
}
赤い#eef4fbをお好きなカラーコードに変更すると、背景色が変わります。
カエレバ・ヨメレバの縁のデザインを変更する
[box class="blue_box"]CSS
.cstmreba {[/box]
padding: 10px;
border-radius: 20px;
background: #eef4fb;
}
.kaerebalink-box, .booklink-box {
padding: 20px;
border: 2px dashed #FFF;
border-radius: 20px;
overflow: auto;
}
ピンクの20pxの数字を変えると、角の丸みが変わります。サンプルは5pxで、若干丸みをもたせました。0pxにするか、この行を削除すると角ばります。
オレンジの2px dashed #FFFを変えると、破線のデザインが変更できます。
- ボーダーの太さを変えたい→
2pxの数字を変更 - ボーダーの種類を変えたい→
dashedを変更※ - ボーダーの色を変えたい→
#FFFを好きなカラーコードに変更
[aside type="normal"]※ボーダーの種類は下記を参考にしてください。
- 実線→
solid - 二重線→
bouble（ボーダーの太さが3px以上必要） - ドット→
dotted
[/aside]
カエレバ・ヨメレバの文字色を変更する
[box class="blue_box"]CSS
.kaerebalink-name a, .booklink-name a {[/box]
padding-bottom: 5px;
border-bottom: 1px solid #5f4339;
color: #5f4339;
text-decoration: none;
}
.booklink-name a:before {
margin-right: 5px;
color: #5f4339;
font-family: "FontAwesome";
content: '\f02d';
}
青の部分のカラーコードを変えることで、文字色などを変更できます。ただし2点違うところがあるので、上記のコードを見て解説していきます。
まず、はじめにでてくるカラーコードはタイトルの下線のカラーコードです。先頭にborder-bottomとある行のカラーコードは下線のものです。
最後のでてくるカラーコードは、本のアイコンのカラーコードです。先頭は他にもでてくるcolorですが、下に"FontAwesome"とあります。これが目印です。
残りの青色のカラーコードはボタン以外のリンクの色です。「リンクは青だろ！」とか「ブログのカラーは茶色じゃないんだよなぁ」って人は変えてください。
おわりに：コピペで簡単にカエレバ・ヨメレバのデザインをカスタマイズできる！
いかがでしたでしょうか？サンプルは可愛らしいデザインですが、さらにカスタマイズすることでいろんなブログに溶け込めるものになるかと思います。
「気に入るカエレバ・ヨメレバのデザインが見つからないよ……」って人は、ぜひ参考にしてみてください！
「サンプル画像で紹介されてたものが気になる」って人はこちらからどうぞ↓（笑）