(cache) カエレバ・ヨメレバのデザインをCSSコピペで簡単カスタマイズ！（レスポンシブ修正版）

以前、カエレバ・ヨメレバのツールをカスタマイズして、CSSも公開しました。

ですが、Amazon、楽天、Yahoo!ショッピングしか対応していなかったので、他のショップも対応させました(*´ω｀*)

合わせてリンクの色も少し変えています。

以前導入してくださった方、今後カスタマイズしたい方は、こちらのコードをコピペしてくださいね！

はてなブログでレスポンシブデザインに対応させてありますので、他の環境の方は責任持てませんのであしからず。

かん吉さんの作ったカエレバ・ヨメレバは下記サイトです。

⇒商品紹介ブログパーツカエレバ

⇒書籍紹介ブログパーツヨメレバ

カエレバ・ヨメレバのデザインをカスタマイズ（レスポンシブ修正版）

CSSを追加すると、こんな表示にすることができます。

カエレバPC表示のスクショ

f:id:setuyakuhappylife:20160523112325p:plain

カエレバのスマホ表示のスクショ

f:id:setuyakuhappylife:20160523112312p:plain

元になっているのは、「主婦ライフ」さんが作ってくださったコードです。

コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ - Shufulife

そのまま使うと、スマホ表示でボタンの文字が崩れてしまいました。

あと、７netやベルメゾンは対応していませんでした。

f:id:setuyakuhappylife:20160523112139p:plain

ときどきデザインが崩れてしまっているブログを見かけます。下記で紹介するコードに変えてみてください♪

修正点

以前弄ったところ

・画像を中央表示に

・ショップボタン微調整

今回の修正点

・Amazon、楽天、Yahoo!ショッピング以外もボタン化に対応

・ショップリンクの色を変更

f:id:setuyakuhappylife:20160523114125p:plain

以前は対応していないショップがありましたが、今回すべてに対応できたハズ。

（ヤフオクのアフィリは終了してる？ようで非対応。丸善＆ジュンク堂もhontoと合併しているので非対応）

CSSをコピペでカスタマイズ

では、やり方をご説明しますね。

デザイン＞カスタマイズ＞デザインCSSにコードを追加します。

/* ヨメレバ・カエレバ （レスポンシブ修正版） */
.booklink-box, .kaerebalink-box{
	width:78%;
	margin: 1em 0 1em;
	padding:0 8%;
	border:double #d2d7e6;
	overflow: hidden;
	font-size:small;
	border-radius:2px;
}

.booklink-image, .kaerebalink-image{
	margin:15px 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
	display:block;
	margin:0 auto;
	text-align:center;
}

.booklink-info, .kaerebalink-info{
	text-align:center;
	line-height:120%;
	overflow: hidden;
}

.booklink-name, .kaerebalink-name{
	font-size:15px;
	margin-bottom:5px;
	line-height:1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date{
	font-size:8pt;
　　　　 margin-top:10px;
	line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
    	font-size:8pt;
	margin-bottom:3px;
}

.booklink-link2, .kaerebalink-link1{
	margin-top:3px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo,shop, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino,  .shoplinktoshokan{
    float:left;
    width:45%;
	height:15px;
	overflow:hidden;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	margin:5px  5px 0 5px;
	padding:10px 0px;
	text-align:center;
	}
	
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkbellemaison:hover, .shoplinkcecile:hover, .shoplinkkakakucom:hover, .shoplinkbk1:hover, .shoplinkehon:hover, .shoplinkkino:hover,  .shoplinktoshokan:hover{
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkbellemaison:active, .shoplinkcecile:active, .shoplinkkakakucom:active, .shoplinkbk1:active, .shoplinkehon:active, .shoplinkkino:active,  .shoplinktoshokan:active{
	position:relative;
	top:1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a,  .shoplinktoshokan a{
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-weight:800;
	text-shadow:1px 1px 1px #dcdcdc;
	font-size:12px;
}
	
.shoplinkamazon a{
	color:#FFB300;
}
 .shoplinkrakuten a{
	color:#b71c1c;
}
.shoplinkkindle a{
	color:#03A9F4;	
}
.shoplinkyahoo a{
	color:#f44336;
	font-size:10px;
 } 
 .shoplinkseven a{
	color:#F4511E;
}
 .shoplinkbellemaison a{
	color:#64DD17;
 } 
 .shoplinkcecile a{
	color:#455A64;
 } 
 .shoplinkkakakucom a{
	color:#283593;
 } 
 .shoplinkbk1 a{
	color:#1565C0;
 }
 .shoplinkehon a{
	color:#FDD835;
 }
 .shoplinkkino a{
	color:#1A237E;
 }
 .shoplinktoshokan a{
	color:#212121;
 }
 
.booklink-footer{
	clear:left;
}

保存したら完了です。

ヨメレバのPC表示のスクショ

f:id:setuyakuhappylife:20160523121922p:plain