コピペでOK！カエレバ／ヨメレバのデザインをCSSでカスタマイズしたよ！

このブログは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介しています。

カエレバを使うことで、選択するネットショップリンクの幅が広がるので、アフィリエイト報酬の取りこぼしを減らすことが期待できるという訳ですね。

カエレバの初期デザインでも十分かもしれませんが、自分好みのおしゃれなデザインに変更するため、CSSをカスタマイズしてみましたので、参考までに掲載します。

Contents

カエレバの初期デザイン
CSSカスタマイズ後のデザイン
- PC・タブレット表示
- スマートフォン表示
CSSコード
- ちょっとだけ説明

カエレバの初期デザイン

カエレバのブログパーツをそのまま使用すると、以下のようなデザインになります。

CSSカスタマイズ後のデザイン

本記事で掲載するCSSをstyle.cssに記述することで、先ほどのデザインが以下のようなデザインになります。レスポンシブデザイン対応にしましたので、ブラウザの幅が狭くなると表示状態が変化しますよ。

PC・タブレット表示

パソコンやタブレットで表示した場合、以下のようなデザインになります。

画像が右寄せで表示されます。また、最大128pxになるように設定しています。ボタンは２つ横並びになります。３個以上あると、下にボタンが増えていきます。

スマートフォン表示

スマホ等の幅460px以下の画面で表示した場合は、以下のようなデザインになります。

画像がトップ中央に表示され、ボタンが縦並びになります。

CSSコード

ちょっと長いですが、こちらのCSSをstyle.cssに記述すると、カスタマイズされた表示になります。

コードを適用する際には、バックアップを取ることを忘れずにお願いします。

/* カエレバパーツ全体のデザインをカスタマイズ */
.kaerebalink-box,
.booklink-box
{
	width: 100%;
	margin-bottom: 1rem; /* 余白調整 */
	padding: 1rem;
	background: #ffffff; /* 背景白に */
	border: double 3px #d0d0d0; /* 外線を二重線に */
	box-sizing: border-box;
	border-radius: 5px; /* 角を丸く*/
	-webkit-border-radius: 5px;
}

/* 画像のデザインをカスタマイズ */
.kaerebalink-image,
.booklink-image
{
	float: left; /* 画像を左寄せに */
	margin: 0; /* 余白なし */
	text-align: center;
}
.kaerebalink-image img,
.booklink-image img
{
	max-width: 128px; /* 最大幅128pxに */
	height: auto; /* 高さ自由 */
}

/* 商品名等をカスタマイズ */
.kaerebalink-info,
.booklink-info
{
	margin-left: 140px; /* 文章は右寄せ */
	line-height: 1.6rem; /* 行高さの幅を調整 */
}
.kaerebalink-name,
.booklink-name
{
	font-weight: bold; /* 商品名太く */
	margin: 0; /* 余白調整 */
}
.kaerebalink-name a,
.booklink-name a
{
	color: #333333; /* 商品名色指定 */
}
.kaerebalink-name p,
.booklink-name p
{
	margin-bottom: 0; /* 余白調整 */
}
.kaerebalink-powered-date,
.booklink-powered-date
{
	font-size: 0.75rem; /* psted with ～ の大きさ指定 */
	font-weight: normal; /* 文字の太さを標準に */
	text-align: right; /* 右寄せ */
}
.kaerebalink-detail,
.booklink-detail
{
	font-size: 0.875rem; /* メーカー・作者の文字の大きさ指定 */
	margin-bottom: 0.5em; /* 余白調整 */
}

/* ボタンのカスタマイズ */
.kaerebalink-link1,
.booklink-link2
{
	width:100%;
}
.kaerebalink-link1 div,
.booklink-link2 div
{
	float: left; /* ボタンを横並びに */
	width: 49%; /* ボタンの幅調整（2列にするので間の余白を考え49%を指定） */
	margin-bottom:0.2rem; /* 余白調整 */
	font-size: 0.875rem; /* 文字の大きさ */
	font-weight: bold; /* 文字を太く */
	text-align: center; /* 文字を中央寄せ */
	box-sizing: border-box;
}
.kaerebalink-link1 div:nth-child(even),
.booklink-link2 div:nth-child(even)
{
	margin-left: 1%; /* 左右ボタン間の余白を調整 */
}
.kaerebalink-link1 div a,
.booklink-link2 div a
{
	display:block;
	padding:3px 0; /* ボタンの上下幅指定 */
	margin-bottom:8px; /* 上下ボタン間の幅指定 */
	text-decoration:none;
	border-radius: 4px; /* 丸み調整 */
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */
}

/* ボタンにカーソルを当てた時の動きをカスタマイズ */
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover
{
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	color: #ffffff;
}

/* カエレバ・ヨメレバ共通 */
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkseven a,
/* カエレバ */
.shoplinkyahoo a,
.shoplinkbellemaison a,
.shoplinkcecile a,
.shoplinkkakakucom a,
/* ヨメレバ */
.shoplinkkindle a,
.shoplinkrakukobo a,
.shoplinkbk1 a,
.shoplinkehon a,
.shoplinkkino a,
.shoplinktoshokan a
{
	display:block;
	text-decoration:none;
}

/* カエレバ・ヨメレバ共通 色の指定 */
.shoplinkamazon a { color:#ffffff; background:#ff9901; }
.shoplinkrakuten a { color:#ffffff; background:#c20004; }
.shoplinkseven a { color:#ffffff; background:#225496; }
/* カエレバ  色の指定 */
.shoplinkyahoo a { color:#ffffff; background:#ff0033; }
.shoplinkbellemaison a { color:#ffffff; background:#84be24 ; }
.shoplinkcecile a { color:#ffffff; background:#8d124b; }
.shoplinkkakakucom a { color:#ffffff; background:#314995; }
/* ヨメレバ 色の指定 */
.shoplinkkindle a { color:#ffffff; background:#007dcd; }
.shoplinkrakukobo a { color:#ffffff; background:#d50000; }
.shoplinkbk1 a { color:#ffffff; background:#0085cd; }
.shoplinkehon a { color:#ffffff; background:#2a2c6d; }
.shoplinkkino a { color:#ffffff; background:#003e92; }
.shoplinktoshokan a { color:#ffffff; background:#333333; }
.booklink-footer
{
	clear:both;
}

/* もしもアフィリエイトの場合不要な画像を削除 */
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],
.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkbellemaison img,
.shoplinkcecile img,
.shoplinkkakakucom img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkbk1 img,
.shoplinkehon img,
.shoplinkkino img,
.shoplinktoshokan img
{
	display:none;
}

/* スマホ表示の設定 */
@media only screen and (max-width:460px){
	
	/* 画像の設定 */
	.kaerebalink-image,
	.booklink-image
	{
		float:none; /* 画像を中央寄せに */
		margin:0;
		text-align:center;
	}
	/* 画像サイズを最大180pxに */
	.kaerebalink-image img,
	.booklink-image img
	{
		max-width:180px;
		height:auto;
	}
	 /* 商品名等をカスタマイズ */
	.kaerebalink-info,
	.booklink-info
	{
		margin: 0; /* 余白調整 */
	}
	/* ボタンのカスタマイズ */
	.kaerebalink-link1 div,
	.booklink-link2 div
	{
		float: none;
		width: 100%;
	}
	.kaerebalink-link1 div:nth-child(even),
	.booklink-link2 div:nth-child(even)
	{
		margin-left: 0; /* 余白を調整（ボタン縦並びにするため） */
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

/* カエレバパーツ全体のデザインをカスタマイズ */

.kaerebalink-box,

.booklink-box

{

width: 100%;

margin-bottom: 1rem; /* 余白調整 */

padding: 1rem;

background: #ffffff; /* 背景白に */

border: double 3px #d0d0d0; /* 外線を二重線に */

box-sizing: border-box;

border-radius: 5px; /* 角を丸く*/

-webkit-border-radius: 5px;

}

/* 画像のデザインをカスタマイズ */

.kaerebalink-image,

.booklink-image

{

float: left; /* 画像を左寄せに */

margin: 0; /* 余白なし */

text-align: center;

}

.kaerebalink-image img,

.booklink-image img

{

max-width: 128px; /* 最大幅128pxに */

height: auto; /* 高さ自由 */

}

/* 商品名等をカスタマイズ */

.kaerebalink-info,

.booklink-info

{

margin-left: 140px; /* 文章は右寄せ */

line-height: 1.6rem; /* 行高さの幅を調整 */

}

.kaerebalink-name,

.booklink-name

{

font-weight: bold; /* 商品名太く */

margin: 0; /* 余白調整 */

}

.kaerebalink-name a,

.booklink-name a

{

color: #333333; /* 商品名色指定 */

}

.kaerebalink-name p,

.booklink-name p

{

margin-bottom: 0; /* 余白調整 */

}

.kaerebalink-powered-date,

.booklink-powered-date

{

font-size: 0.75rem; /* psted with ～の大きさ指定 */

font-weight: normal; /* 文字の太さを標準に */

text-align: right; /* 右寄せ */

}

.kaerebalink-detail,

.booklink-detail

{

font-size: 0.875rem; /* メーカー・作者の文字の大きさ指定 */

margin-bottom: 0.5em; /* 余白調整 */

}

/* ボタンのカスタマイズ */

.kaerebalink-link1,

.booklink-link2

{

width:100%;

}

.kaerebalink-link1 div,

.booklink-link2 div

{

float: left; /* ボタンを横並びに */

width: 49%; /* ボタンの幅調整（2列にするので間の余白を考え49%を指定） */

margin-bottom:0.2rem; /* 余白調整 */

font-size: 0.875rem; /* 文字の大きさ */

font-weight: bold; /* 文字を太く */

text-align: center; /* 文字を中央寄せ */

box-sizing: border-box;

}

.kaerebalink-link1 div:nth-child(even),

.booklink-link2 div:nth-child(even)

{

margin-left: 1%; /* 左右ボタン間の余白を調整 */

}

.kaerebalink-link1 div a,

.booklink-link2 div a

{

display:block;

padding:3px 0; /* ボタンの上下幅指定 */

margin-bottom:8px; /* 上下ボタン間の幅指定 */

text-decoration:none;

border-radius: 4px; /* 丸み調整 */

box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */

}

/* ボタンにカーソルを当てた時の動きをカスタマイズ */

.kaerebalink-link1 div a:hover,

.booklink-link2 div a:hover

{

-ms-transform: translateY(4px);

-webkit-transform: translateY(4px);

transform: translateY(4px);

color: #ffffff;

}

/* カエレバ・ヨメレバ共通 */

.shoplinkamazon a,

.shoplinkrakuten a,

.shoplinkseven a,

/* カエレバ */

.shoplinkyahoo a,

.shoplinkbellemaison a,

.shoplinkcecile a,

.shoplinkkakakucom a,

/* ヨメレバ */

.shoplinkkindle a,

.shoplinkrakukobo a,

.shoplinkbk1 a,

.shoplinkehon a,

.shoplinkkino a,

.shoplinktoshokan a

{

display:block;

text-decoration:none;

}

/* カエレバ・ヨメレバ共通色の指定 */

.shoplinkamazon a { color:#ffffff; background:#ff9901; }

.shoplinkrakuten a { color:#ffffff; background:#c20004; }

.shoplinkseven a { color:#ffffff; background:#225496; }

/* カエレバ色の指定 */

.shoplinkyahoo a { color:#ffffff; background:#ff0033; }

.shoplinkbellemaison a { color:#ffffff; background:#84be24 ; }

.shoplinkcecile a { color:#ffffff; background:#8d124b; }

.shoplinkkakakucom a { color:#ffffff; background:#314995; }

/* ヨメレバ色の指定 */

.shoplinkkindle a { color:#ffffff; background:#007dcd; }

.shoplinkrakukobo a { color:#ffffff; background:#d50000; }

.shoplinkbk1 a { color:#ffffff; background:#0085cd; }

.shoplinkehon a { color:#ffffff; background:#2a2c6d; }

.shoplinkkino a { color:#ffffff; background:#003e92; }

.shoplinktoshokan a { color:#ffffff; background:#333333; }

.booklink-footer

{

clear:both;

}

/* もしもアフィリエイトの場合不要な画像を削除 */

.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],

.booklink-image img[src^="//i.moshimo.com/af/i/impression"],

.shoplinkamazon img,

.shoplinkrakuten img,

.shoplinkseven img,

.shoplinkyahoo img,

.shoplinkbellemaison img,

.shoplinkcecile img,

.shoplinkkakakucom img,

.shoplinkkindle img,

.shoplinkrakukobo img,

.shoplinkbk1 img,

.shoplinkehon img,

.shoplinkkino img,

.shoplinktoshokan img

{

display:none;

}

/* スマホ表示の設定 */

@media only screen and (max-width:460px){

/* 画像の設定 */

.kaerebalink-image,

.booklink-image

{

float:none; /* 画像を中央寄せに */

margin:0;

text-align:center;

}

/* 画像サイズを最大180pxに */

.kaerebalink-image img,

.booklink-image img

{

max-width:180px;

height:auto;

}

/* 商品名等をカスタマイズ */

.kaerebalink-info,

.booklink-info

{

margin: 0; /* 余白調整 */

}

/* ボタンのカスタマイズ */

.kaerebalink-link1 div,

.booklink-link2 div

{

float: none;

width: 100%;

}

.kaerebalink-link1 div:nth-child(even),

.booklink-link2 div:nth-child(even)

{

margin-left: 0; /* 余白を調整（ボタン縦並びにするため） */

}

ちょっとだけ説明

カエレバ・ヨメレバのみカスタマイズ

他にポチレバ、トマレバといったブログパーツがありますが、私にとって使用頻度が高くないので、今回はカエレバとヨメレバのみカスタマイズしました。

なお、ボタンは以下のネットショップに対応しており、それぞれ色が異なります。

カエレバ

Amazon
楽天市場
Yahoo!ショッピング
7net
ベルメゾン
セシール
価格コム

ヨメレバ

Amazon
Kindle
楽天市場
楽天kobo
7net
honto
ehon
紀伊國屋書店
図書館

ボタンを押すと沈むようにした

押したくなるようなボタンにしたかったので、ボタンは沈み込むようにしました。

PCでは、ボタンにカーソルを合わせたタイミングで沈むようにしました。スマホでは、そもそもカーソルを合わせることができないので、ボタンを押したタイミングでボタンが沈むようにしました。

ボタンが沈み込むタイミングを変更したい場合は、「:hover」と「:active」を変更してみてください。

ボタンデザインのカスタマイズに当たっては、サルワカさんのサイトを参考にさせていただきました。

初心者でもわかりやすく説明されているので、重宝しています。

CHECKサルワカ　CSSで作る！押したくなるボタンデザイン100（Web用）

もしもアフィリエイト使用時の余計な画像を削除

もしもアフィリエイトを使用すると、余計な画像が表示され、変な余白ができてしまう場合があるので、152行目から170行目で削除しています。

ブログパーツ生成時の注意点

ブログパーツを生成する時は、デザインを「amazlet-2（cssカスタマイズ用）」に設定してください。他のデザインだと、デザインが崩れてしまいます。

いかがでしたか？今回は、カエレバのデザインのカスタマイズ方法について書いてみました。どのようにカスタマイズしたら良いか悩んでいる方がいましたら、参考にしてみてください。

カエレバカスタマイズ