はてなブログ【カエレバ ヨメレバ カスタマイズ】ブログ初心者成長記録

皆さんこんにちは。ともタカです。

今回はブログ初心者成長記録という事で

皆さんお使いだと思います

カエレバ、ヨメレバのカスタマイズを

やっと覚えましたので

書いていきたいと思います。

私が覚える際に

参考にさせて頂いた記事が

こちらになります。

happylife-tsubuyaki.hatenablog.com

とてもわかりやすくまとめて下さっているので

是非ご覧になって下さい。

本当に助かりました。

ありがとうございます。

では早速、このカスタマイズを

するとこのようになります。

はてなブログ Perfect GuideBook [改訂第2版]

posted with ヨメレバ

JOE AOTO ソーテック社 2020年07月21日頃

楽天ブックス

楽天kobo

Amazon

Kindle

 

 

凄く綺麗ですよね。

初めてできた時は感動しました。

このやり方なんですが

まずこちらをコピーして下さい。

/* カエレバ・ヨメレバ（レスポンシブver.1.1） */
.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, .shoplinkrakukobo, .shoplinkyahoo, .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;
	cursor:pointer;
	}
	
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkrakukobo: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, .shoplinkrakukobo: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, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a,  .shoplinktoshokan a{
	display:block;
	text-decoration:none;
	font-weight:800;
	text-shadow:1px 1px 1px #dcdcdc;
	font-size:12px;
}
	
.shoplinkamazon a{
	color:#ff9900;
}
 .shoplinkrakuten a{
	color:#bf0000;
}
.shoplinkkindle a{
	color:#1a8dcc;	
}
.shoplinkrakukobo a{
	color:#d50000;	
}
.shoplinkyahoo a{
	color:#ff0033;
	font-size:10px;
 } 
.shoplinkseven a{
	color:#ff6501;
}
.shoplinkbellemaison a{
	color:#84be24;
 } 
.shoplinkcecile a{
	color:#8d124b;
 } 
.shoplinkkakakucom a{
	color:#051D93;
 } 
.shoplinkbk1 a{
	color:#0786cb;
 }
.shoplinkehon a{
	color:#000066;
 }
.shoplinkkino a{
	color:#003e92;
 }
.shoplinktoshokan a{
	color:#212121;
 }
 
.booklink-footer{
	clear:left;
}

そうしましたら

デザイン→カスタマイズ→デザインCSS

にペーストして保存すれば終わりです。

簡単ですよね。

これからも色々勉強して

アウトプットしていきます。