カエレバやヨメレバのCSSをカスタマイズする方法

ブログパーツの「カエレバ」や「ヨメレバ」は、Amazonや楽天、ヤフーショッピングなどのアフェリエイトを一つにまとめて表示できるツールです。

同じ商品でもAmazonで購入する人もいれば、楽天で購入する人もいるので一つにまとめられると収入アップに繋がって良いと思いました。

カエレバやヨメレバはデフォルトの設定で設置するとデザインも味気ないので、CSSを使ってカスタマイズして見ました。

このページで３種類のデザインの作成方法を紹介します。

参考記事：寝ログ

設定方法

カエレバのデザインを変えずに記事に設置すると以下のような感じになります。

少し飾り気も無く寂しいですし、cssを使ってカスタマイズしていきます。

なお、カエレバやヨメレバのhtmlテンプレートは「amazlet風-3(改)」を使用しています。

デザイン１

さりげない点線のボーダーで囲ってみました。特に違和感無く、見た目も普通で記事に馴染むと思います。

以下のコードをstyle.cssに記述します。

/* ヨメレバ・カエレバ */
.booklink-box, .kaerebalink-box {
	margin:20px auto;
	padding:20px;
	border-radius: 5px;
	border: 1px dashed #ccc;
	overflow: hidden;
}
.booklink-image, .kaerebalink-image {
	margin:0 15px 0 0 !important;
	float:left;
}
.booklink-image img, .kaerebalink-image img {
	margin:0 auto;
	text-align:center;
}
.booklink-info, .kaerebalink-info {
	margin:0;
	text-align:left;
	line-height:120%;
	overflow: hidden;
}
.booklink-name, .kaerebalink-name {
	font-size:16px;
	margin-bottom:24px;
	line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size:8pt;
	margin-top:10px !important;
	font-family:verdana;
	line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail {
	font-size: 16px;
	margin-bottom:15px;
}
.booklink-link2, .kaerebalink-link1 {
	margin-top:10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
	position: relative;	
	width:30%;
	font-family: Meiryo;
	border-radius:6px;
	border:1px solid #ddd;
	display:inline-block;
	cursor:pointer;
	margin:15px 2px 0 auto !important;
	padding: 0 !important;
	text-align:center;
	float:left;
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkkakakucom:hover {
	background-color:#f6f6f6;
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkkakakucom:active {
	position:relative;
	top:1px;
	margin-bottom: 1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a {
	display: block;
	padding: 12px 1px;
	text-decoration:none;
	font-weight:800;
	font-size:12px;
	text-shadow:1px 1px 1px #dcdcdc;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkkindle a:hover, .shoplinkkakakucom a:hover {
	text-decoration:none;
}
.shoplinkamazon a {
	color:#FF9901;
}
.shoplinkrakuten a {
	color:#c20004;
}
.shoplinkkindle a {
	color:#007dcd;
}
.shoplinkkakakucom a {
	color:#314995;
}
.shoplinkyahoo a {
	color:#7b0099;
	font-size:10px;
}
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkkindle img, .shoplinkyahoo img, .shoplinkkakakucom img {
	position: absolute;
	left: 0px;
	top: 0px;
}
.booklink-footer {
	clear:left;
}
 @media screen and (max-width: 767px) {
.booklink-box, .kaerebalink-box {
	font-size:small;
}
.booklink-image, .kaerebalink-image {
	float: none !important;
}
.booklink-info, .kaerebalink-info {
	text-align:center;
}
.booklink-name, .kaerebalink-name {
	margin-bottom:14px;
	line-height:1.2em;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
	cursor:pointer;
	margin:0 auto 5px auto !important;
	padding:10px 2px;
}
}
 @media (max-width: 599px) {
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
	width:100%;
}
}

デザイン２

シルバーの縁を使って、目立ちやすい＋高級感を出してみました。

カエレバの商品が目立つため、もしかすると購入アップに繋がるかも知れませんね。

先程のCSSの「.booklink-box, .kaerebalink-box」の部分を以下のコードに変えます。

.booklink-box, .kaerebalink-box {
	margin:20px auto;
	padding:20px;
	border-radius: 5px;
	border: 5px solid #e0e0e0;
	overflow: hidden;
}

デザイン３

このデザインは、「寝ログ」さんで使われているデザインを参考にしました。シンプルで見た目も自然で凄く良いと思います。

先程のCSSの「.booklink-box, .kaerebalink-box」の部分を以下のコードに変えます。

.booklink-box, .kaerebalink-box {
	margin:20px auto;
	padding:20px;
	border-radius: 5px;
	border: medium double #ccc;
	overflow: hidden;
}

注意事項

３つのカスタマイズデザインを紹介しましたが、実際に使う際は１種類のみを使用してください。

カエレバの設計の都合上CSSは１種類しか設定できません。もちろん、カエレバのコードを<div>タグで囲ってclassを設定すればできます。実際に私も３種類を使っていましたが、マークアップに手間が掛かりますのでやめました。

また、カエレバのソースコードは長く複雑です。

そのまま記事内に設置しても良いですが、<article>の中に入れるなら<aside>でカエレバのコードを囲って置く方が良いかも知れません。

<article>は記事など重要な情報を入れて置く場所です。<aside>は重要度の低い情報を入れて置く場所です。<article>に内容の無い複雑な広告コードを入れるなら、<aside>で囲って置く方が良いと思います。

なお、記事文書の冒頭はSEO上重要な位置を締めています。そこに広告コードを貼付けるのは好ましくありません。しっかりと500文字程度は概要を述べてから広告コードを貼付けてください。

一番良いのは、文書の冒頭で500文字程概要を述べて、広告コード。文書の最後にも広告コードを貼付けるのが、収益として一番良いと思います。

まとめ

今回は、カエレバのデザインをカスタマイズする方法を紹介しました。

広告も記事同様にサイトのコンテンツでもあります。さりげなく飾るのが一番です。

広告も大事ですが、記事の方が何倍も大切です。広告主体の記事になると、サイト滞在時間も再訪率も下がってしまいます。

大切なことは、サイトを訪問して下さった方に、役に立つ情報を伝えることだと思います。それがアクセスアップに繋がり、収益の向上になると思います。