読者です 読者をやめる 読者になる 読者になる

ヨメレバのデザインをカスタマイズ

以前ポチレバのデザインをカスタマイズしたけど、App Work StyleAmazonアソシエイトを使うようになったので、ヨメレバも同じようにカスタマイズを行った。

参考にしたのは下記のサイト。


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

ヨメレバでは「amazlet風-2(cssカスタマイズ用)」を選択し、下記のコードを子テーマのstyle.cssに貼り付け

.booklink-box, .kaerebalink-box {
	background: #f2f2f2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1em;
	margin: 1em 0em;
	font-size: small;
	line-height: 1.5em;
}

.booklink-image, .kaerebalink-image{
	margin:0 1em 0 0;
	float:left;
}
 
.booklink-image image, .kaerebalink-image image{
	padding-bottom: 1em;
}
 
.booklink-info, .kaerebalink-info{
	margin:0;
	text-align:left;
}
 
.booklink-name, .kaerebalink-name{
	margin-bottom: 1em;
	line-height: 1.5em;
}
 
.booklink-link2, .kaerebalink-link1{
	margin-top:1em;
}
 
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	margin:0  auto 5px auto;
	padding:5px 10px;
	text-align:center;
}

.booklink-footer{
	clear:left;
}

素人なので不要なコードが残っているかもしれないが、思ったような表示になったのでよしとする。

出来上がりはこのような感じ。背景がグレーはイマイチなような気がしてきた。ショップのボタンももう少し工夫が必要かな。
f:id:aalto17:20141025093746p:plain