ヨメレバ・カエレバというのは、Amazonや楽天、ヤフーショッピングなどへのリンクをきれいに貼ることができるブログパーツです。
今回は、このヨメレバ・カエレバのデザインのカスタマイズ方法を紹介します。
CSSのことが分からなくても、まずはコピペだけで実装することができます。
そして興味が湧いたら、自分でカスタマイズしてみて下さい。
記事後半でボタン、文字色などの変更方法も説明します。
当ブログのヨメレバ・カエレバのデザイン
僕は、Amazon、楽天市場はもしもアフィリエイト、ヤフーショッピングは
バリューコマースを利用しています。
もしもアフィリエイトはAmazon、楽天市場をまとめて管理できるのでおすすめです。
ここから下は画像で説明するので、最初に本物を貼っておきます。
ホバーなど動きを確認したい場合はこちらで確認して下さい。
カエレバ
当ブログでは、Amazon、楽天市場、ヤフーショッピングの3種類のリンクを貼っています。
セブンネットや価格.comのリンクを貼る方はアレンジして下さい。
【PC表示】
PC表示では、3つのボタンがきれいに収まるように作っています。
商品写真の横幅があまりにも広いと表示が崩れる場合がありますが、今のところ大きく崩れたことはありません。
【スマホ・タブレット表示】
スマホ・タブレットでは2段で表示しています。
ヨメレバ
当ブログでは、Amazon、Kindle、楽天ブックス、楽天Koboの4種類のリンクを貼っています。
こちらもカエレバと同様、セブンネットや紀伊国屋のリンクを貼る方はアレンジして下さい。
【PC表示】
カエレバと同様に、1段に3つのリンクを表示しています。
なので、Amazon、Kindle、楽天ブックス、楽天Koboの4種類すべてのリンクがある場合は楽天Koboだけ2段目に表示されます。
実際は、Amazon、Kindleしかなかったり、電子書籍（Kindle、楽天Kobo）のない本もあるのであまり気にしていません。
▼4種類
▼Amazon、Kindleのみ
【スマホ・タブレット表示】
スマホ・タブレットは2段表示です。2種類しかなければ1段表示になります。
CSSコード
僕はSimplicityというWordpressのテーマを利用していて、子テーマのスタイルシートを編集しています。
PC表示はスタイルシート（style.css）に、モバイル・タブレット表示はmobile.cssに、それぞれCSSコードを書いています。
PC表示：スタイルシート（style.css）
/************************************
** カエレバ、ヨメレバ
************************************/
.kaerebalink-box,
.booklink-box{
overflow: hidden; /* float解除用 */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px;
}
.kaerebalink-image,.booklink-image{
float: left;
margin-right: 15px;
}
.kaerebalink-info,.booklink-info{
margin:0;
overflow: hidden;
}
.kaerebalink-name,.booklink-name{
margin-bottom:24px;
line-height:1.5em;
}
.kaerebalink-name p,.booklink-name p{
margin:0;
}
.kaerebalink-powered-date,
.booklink-powered-date{
font-size:12px;
line-height:120%;
}
.kaerebalink-detail,
.booklink-detail{
font-size: 12px;
margin-top:-10px;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
margin:3px;
padding:4px 10px;
border-radius:3px;
width: 26%;
text-align: center;
font-size:13px;
display:inline-block;
}
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
color:#fff;
display:block;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
background-color:#ccc;
}
.shoplinkamazon:hover,
.shoplinkkindle:hover{
background-color:#516c8f;
}
.shoplinkrakuten:hover,
.shoplinkrakukobo:hover{
background-color:#cc7980;
}
.shoplinkyahoo:hover{
background-color:#ddb358;
}
.article .kaerebalink-link1 img, .article .booklink-link2 img{
display:block;
margin:0 auto !important;
text-align:center;
}モバイル・タブレット表示：mobile.css
/************************************
** ヨメレバカエレバ
************************************/
.kaerebalink-info,
.booklink-info{
overflow:visible;
}
.kaerebalink-link1,
.booklink-link2{
float:left;
width:100%;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
width: 48%;
margin: 1px;
padding: 5px 0;
}
.kaerebalink-detail,.booklink-detail {
line-height: normal;
}カスタマイズしたい方へ
僕も他の人が公開しているものを参考にさせていただいているので、ここに載せたコードはコピペで使ってもらってもちろんOKです。
ですが、ボタンの色などを変えたい人もいると思うので、どこを変更すればいいか書いておきます。
ボタンの背景色を変更する
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
background-color:#ccc;
}という部分の、「background-color:#ccc; 」を変更して下さい。
アマゾン、楽天、ヤフーそれぞれを別の色にしたい場合は、
.shoplinkamazon{
background-color:#516c8f;
}
.shoplinkrakuten{
background-color:#cc7980;
}のように個別に書きます。
ボタンの文字色を変更する
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
color:#fff;
display:block;
}という部分の、「color:#fff;」を変更して下さい。
アマゾン、楽天、ヤフーそれぞれを別の色にしたい場合は、
.shoplinkamazon a{
color:#808080;
}
.shoplinkrakuten a{
color:#cc7980;
}のように書きます。ボタン背景色と同じです。
ボタンのホバー色を変更する
.shoplinkamazon:hover,
.shoplinkkindle:hover{
background-color:#516c8f;
}
.shoplinkrakuten:hover,
.shoplinkrakukobo:hover{
background-color:#cc7980;
}
.shoplinkyahoo:hover{
background-color:#ddb358;
}という部分の、「background-color:#ddb358;」を変更して下さい。
色ではありませんが、
opacity:0.6;
と書くと、ホバー時にボタンの透明度が変わります（薄くなります）。
ヨメレバ・カエレバのボックスの枠線を消す・色を変える
.kaerebalink-box,
.booklink-box{
overflow: hidden; /* float解除用 */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px;
}という部分の「border: 1px solid #ccc;」、「border-radius: 3px;」を変更して下さい。
枠線を消したい場合は、この2行を削除します。
枠線の太さ・形・色を変更したい場合は、「border: 1px solid #ccc;」、「border-radius: 3px;」を編集します。
「border: 1px solid #ccc;」では線の太さ、形状、色を、「border-radius: 3px;」では線の角の丸みを設定しています。
▼上下点線バージョン
Comments