CSSコピペでカエレバ・ヨメレバをカスタマイズ【CSSデザインサンプル】

2016-08-18Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

ブロガーにとって外せないツールとなっているカエレバヨメレバ
私も愛用しています。

スタイルシートで自分好みにデザインを変えられるので、自分のブログに合わせやすいですよね。

そんなカエレバ、ヨメレバですが・・・今回、わたしもデザインを作成してみました!

参考にしたサイトはこちら。
一から作成するのは大変なので、非常に助かりました。ありがとうございます。

スポンサーリンク

スクリーンショット

PC版

 

PC版だとカーソルを合わせた際に背景色がアニメーションで変化します。

 

モバイル版

 

もっちさんのコードを流用したので、全てのショップリンクに対応しています。
スクリーンショットでボタンが3つしかないのは、私がそのショップにしか対応していないためです・・・。あれこれ登録するのってめんどくさいよね。

カスタマイズ方法

カエレバ、ヨメレバのデザインでamazlet風-2(CSSカスタマイズ用)を選択します。

20160818_03

あとは下記のソースコードを自分のブログのスタイルシートにコピペすればOK!
WordPressなら ダッシュボード画面の外観 → テーマの編集 → style.css です。

ソースコード

.booklink-box, .kaerebalink-box{
	background-color: #fff;
	border: solid 1px #ccc;
	border-radius: 2px;
	font-size: small;
	margin: 10px auto;
	overflow: hidden;
	padding: 10px;
	width: 90%;
}

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

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

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

.booklink-powered-date, .kaerebalink-powered-date{
	font-size: 8pt;
	line-height: 120%;
	margin: 10px 0px;
	text-align: right;
}

.booklink-detail, .kaerebalink-detail{
	font-size: 8pt;
	margin-bottom: 3px;
}

.booklink-link2, .kaerebalink-link1{
	margin: 3px auto;
	text-align: left;
	width: 90%;
}

.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{
	background-position: 0 0;
	background-size: auto 200%;
	display: inline-block;
	font-weight: 800;
	font-size: 12px;
	margin: 5px auto;
	overflow: hidden;
	padding: 10px 0px;
	text-decoration: none;
	text-align: center;
	transition: .3s;
	width: 49%;
}
	
.shoplinkamazon a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,153,0,0.7) 50%);
	border-bottom: 1px solid #ff9900;
	color: #ff9900;
}
.shoplinkrakuten a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(191,0,0,0.7) 50%);
	border-bottom: 1px solid #bf0000;
	color: #bf0000;
}
.shoplinkkindle a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(26,141,204,0.7) 50%);
	border-bottom: 1px solid #1a8dcc;
	color: #1a8dcc;	
}
.shoplinkrakukobo a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(213,0,0,0.7) 50%);
	border-bottom: 1px solid #d50000;
	color: #d50000;
}
.shoplinkyahoo a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,0,51,0.7) 50%);
	border-bottom: 1px solid #ff0033;
	color: #ff0033;
	font-size: 10px;
} 
.shoplinkseven a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,101,1,0.7) 50%);
	border-bottom: 1px solid #ff6501;
	color: #ff6501;
}
.shoplinkbellemaison a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(132,190,36,0.7) 50%);
	border-bottom: 1px solid #84be24;
	color: #84be24;
} 
.shoplinkcecile a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(141,18,75,0.7) 50%);
	border-bottom: 1px solid #8d124b;
	color: #8d124b;
} 
.shoplinkkakakucom a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(5,29,147,0.7) 50%);
	border-bottom: 1px solid #051D93;
	color: #051D93;
} 
.shoplinkbk1 a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(7,134,203,0.7) 50%);
	border-bottom: 1px solid #0786cb;
	color: #0786cb;
}
.shoplinkehon a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,102,0.7) 50%);
	border-bottom: 1px solid #000066;
	color: #000066;
}
.shoplinkkino a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,62,146,0.7) 50%);
	border-bottom: 1px solid #003e92;
	color: #003e92;
}
.shoplinktoshokan a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(33,33,33,0.7) 50%);
	border-bottom: 1px solid #212121;
	color: #212121;
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkbellemaison a:hover, .shoplinkcecile a:hover, .shoplinkkakakucom a:hover, .shoplinkbk1 a:hover, .shoplinkehon a:hover, .shoplinkkino a:hover,  .shoplinktoshokan a:hover{
	background-position: 0 100%;
	color: #fff;
}
 
.booklink-footer{
	clear: both;
	height: 0px;
}

@media all and (min-width: 481px) {
	.booklink-image, .kaerebalink-image{
		float: left;
		margin: 0 10px 0 0;
	}

	.booklink-name, .kaerebalink-name{
		padding-left: 5px;
		text-align: left;
	}

	.booklink-detail, .kaerebalink-detail{
		padding-left: 5px;
		text-align: left;
	}

	.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
		display: inline;
	}
}

@media all and (max-width: 480px) {
	.booklink-image, .kaerebalink-image{
		float: none;
		margin-bottom: 15px;
	}

	.booklink-name, .kaerebalink-name{
		text-align: center;
	}

	.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
		display: inline;
		float: none;
	}
}

改変点

  • レスポンシブ対応
  • ボックス全体が左寄りになっていたのを中央に(レスポンシブ対応にしたのでスマホ表示の場合のみとなります)
  • ショップリンクボタンも出来るだけ中央になるように調整(完全に中央ではないけれど、パッと見分からない程度にはなってます)

主にこの3点を重点に調整しました。

更にカスタマイズ

ショップリンクは下線じゃなくて全体を囲みたい! という方はこちらのソースコードをどうぞ。

PC表示ではこんな感じになります。

.booklink-box, .kaerebalink-box{
	background-color: #fff;
	border: solid 1px #ccc;
	border-radius: 2px;
	font-size: small;
	margin: 10px auto;
	overflow: hidden;
	padding: 10px;
	width: 90%;
}

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

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

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

.booklink-powered-date, .kaerebalink-powered-date{
	font-size: 8pt;
	line-height: 120%;
	margin: 10px 0px;
	text-align: right;
}

.booklink-detail, .kaerebalink-detail{
	font-size: 8pt;
	margin-bottom: 3px;
}

.booklink-link2, .kaerebalink-link1{
	margin: 3px auto;
	text-align: left;
	width: 90%;
}

.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{
	background-position: 0 0;
	background-size: auto 200%;
	display: inline-block;
	font-weight: 800;
	font-size: 12px;
	margin: 5px auto;
	overflow: hidden;
	padding: 10px 0px;
	text-decoration: none;
	text-align: center;
	transition: .3s;
	width: 49%;
}
	
.shoplinkamazon a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,153,0,0.7) 50%);
	border: 1px solid #ff9900;
	color: #ff9900;
}
.shoplinkrakuten a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(191,0,0,0.7) 50%);
	border: 1px solid #bf0000;
	color: #bf0000;
}
.shoplinkkindle a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(26,141,204,0.7) 50%);
	border: 1px solid #1a8dcc;
	color: #1a8dcc;	
}
.shoplinkrakukobo a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(213,0,0,0.7) 50%);
	border: 1px solid #d50000;
	color: #d50000;
}
.shoplinkyahoo a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,0,51,0.7) 50%);
	border: 1px solid #ff0033;
	color: #ff0033;
	font-size: 10px;
} 
.shoplinkseven a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,101,1,0.7) 50%);
	border: 1px solid #ff6501;
	color: #ff6501;
}
.shoplinkbellemaison a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(132,190,36,0.7) 50%);
	border: 1px solid #84be24;
	color: #84be24;
} 
.shoplinkcecile a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(141,18,75,0.7) 50%);
	border: 1px solid #8d124b;
	color: #8d124b;
} 
.shoplinkkakakucom a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(5,29,147,0.7) 50%);
	border: 1px solid #051D93;
	color: #051D93;
} 
.shoplinkbk1 a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(7,134,203,0.7) 50%);
	border: 1px solid #0786cb;
	color: #0786cb;
}
.shoplinkehon a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,102,0.7) 50%);
	border: 1px solid #000066;
	color: #000066;
}
.shoplinkkino a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,62,146,0.7) 50%);
	border: 1px solid #003e92;
	color: #003e92;
}
.shoplinktoshokan a{
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(33,33,33,0.7) 50%);
	border: 1px solid #212121;
	color: #212121;
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkbellemaison a:hover, .shoplinkcecile a:hover, .shoplinkkakakucom a:hover, .shoplinkbk1 a:hover, .shoplinkehon a:hover, .shoplinkkino a:hover,  .shoplinktoshokan a:hover{
	background-position: 0 100%;
	color: #fff;
}
 
.booklink-footer{
	clear: both;
	height: 0px;
}

@media all and (min-width: 481px) {
	.booklink-image, .kaerebalink-image{
		float: left;
		margin: 0 10px 0 0;
	}

	.booklink-name, .kaerebalink-name{
		padding-left: 5px;
		text-align: left;
	}

	.booklink-detail, .kaerebalink-detail{
		padding-left: 5px;
		text-align: left;
	}

	.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
		display: inline;
	}
}

@media all and (max-width: 480px) {
	.booklink-image, .kaerebalink-image{
		float: none;
		margin-bottom: 15px;
	}

	.booklink-name, .kaerebalink-name{
		text-align: center;
	}

	.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
		display: inline;
		float: none;
	}
}

あとがき

すっごいすっごいシンプルなのが作りたかったんです!

けれど、シンプルすぎるのも味気ないと思い、マウスオンでちょっとオシャレに背景色を変化させてみました。
前々から、にゅっと出てくる背景色がやりたかったので今回心血注ぎました。笑

でも、どのブログサイトでも大半のユーザーがモバイルユーザーのため、あまり日の目を浴びません(´・ω・)
自己満足の世界です。笑

ちなみにマウスオンの背景色はブランドカラーそのままだとキツイ色味なため、少し透過させて色味を抑えています。
rgba()の0.7の数値を1に変更すれば元の色になりますので、お好きにカスタマイズしてくださいね!

こちらの記事もおすすめです