simplicityの子テーマにコピペする「カエレバ・ヨメレバ・トマレバ」ボタンリンク化CSS

私はwordpressでsimplicityというテンプレートを使ってこのサイトを作っています。碌な知識のない私にも優しいのでお気に入りです。そんな私のサイトですが、記事の合間にアフィリエイトリンクをはらせてもらって、見に来て下さるお客様から時々お小遣いを貰っています。

最近、そのアフィリエイトリンクを見やすくしてくれる「カエレバ」「ヨメレバ」というこれまた凄いブログパーツを見つけまして、私も利用させて貰う事にしました。で、その見た目を更に判りやすくボタンに出来るCSSが公開されていたので私もさっそく利用しました。が、「紀伊国屋」さんや「価格コム」など他のボタンも出せるようにしたくて、その分のソースも追加しました。

simplicityとは
Cocoonに変更（2018/8/8）
「カエレバ」「ヨメレバ」とは
CSSに張るコード
1. 改造履歴
2. CSSコード
CSSを張った結果
トマレバ追加
1. トマレバの表示
コピペして使えるリスト装飾CSSタグ
最後にひとこと

simplicityとは

わいひら氏の作られているとてつもなく素晴らしいwordpress用のテンプレートです。このテンプレートに出会うまでは色々と浮気を繰り返しましたが今は一筋です。気になる人はsimplicity公式サイトへどうぞ。

Cocoonに変更（2018/8/8）

わいひら氏の「Simplicity」を長年使い続けてきましたが、完全レスポンシブ、高速化で後継とされている「Cocoon」へ乗り換えました。気になる人はcocoon公式サイトへどうぞ。

それに伴い、大量に張っている「カエレバリンク」をどうしようかと思ったのですが、「Coccoon」にはアフィリエイトリンクを「カエレバ」と同じようなデザインでリンクを張れる機能が標準で付いており、このページで紹介しているCSSを張らなくてもレイアウト崩れが起こっていません。

恐らくカエレバリンクのタグをそのままで「Coccoon」にしても良いようにしてくれたのだと思います。わいひらさん、ありがとう！！神様です。

で、元々の「Simplicity」ですが、わいひら氏も使われているため、まだまだ使われるテンプレートです。なので、このページのCSSタグはそのまま置いておきます。

ただ、「Coccoon」でCSSタグを張っていないので見え方が違うので、「Simplicity」ではどう見えるのかを画像で張っておきます。

「カエレバ」「ヨメレバ」とは

アフィリエイトでお小遣いが欲しいなあと思っている私のような素人にも優しいアフィリエイトリンクのブログパーツです。見た目もよくなりますし、気に入っています。お小遣いが増えるかどうかはわかりませんが、今後使う予定です。

ちなみに「カエレバ」は物がメインで、「ヨメレバ」は書籍に特価したブログパーツです。

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
https://kaereba.com/

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
https://yomereba.com/

CSSに張るコード

参考にしたのは「下町メダカ日和」さんの情報です。こちらで公開されていたCSSコードを張るだけでボタンリンクに変更できました。感謝感謝です。

301 Moved Permanently

しかし、先述した通り、私は他のボタンも追加したかったので、「下町メダカ日和」さんで公開されているコードに「紀伊国屋」「honto」「価格コム」「ベルメゾン」「セシール」のタグもちらっと書き加えてみました。同じようにしたい方は以下のCSSコードを「simplicity」子テーマのCSS（外観→CSS編集）にコピペしてみてください。（本体ではなく子テーマに！でないと本体のバージョンアップで消えちゃうので）

改造履歴

2016/7/29
「e-hon」タグも追加しました。

2017/2/21
「楽天kobo」タグを追加しました。

2017/12/6
トマレバにも対応させました。

CSSコード

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ　１
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px #ddd;
	padding: 10px 15px;
}

.booklink-image, .kaerebalink-image, .tomarebalink-image {
	margin: 0 0 15px;
}

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

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

.booklink-name, .kaerebalink-name, .tomarebalink-name {
	font-size: 16px;
	margin-bottom: 14px;
	line-height: 1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
	font-size: 8pt;
	line-height: 120%;
}

.booklink-powered-detail, .kaerebalink-detail, .tomarebalink-detail {
	margin-bottom: 15px;
}

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

.shoplinkamazon, .shoplinkrakuten, .shoplinkrakukobo, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkbk1, .shoplinkkino, .shoplinkkakakucom, .shoplinkbellemaison, .shoplinkcecile, .shoplinkehon, .shoplinkjalan, .shoplinkjtb, .shoplinkikyu, .shoplinkrurubu {
	width: 90%;
	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: 0 auto 5px;
	padding: 10px 0;
	text-align: center;
}

.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkrakukobo:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkbk1:hover, .shoplinkkino:hover, .shoplinkkakakucom:hover, .shoplinkbellemaison:hover, .shoplinkcecile:hover, .shoplinkehon:hover, .shoplinkjalan:hover, .shoplinkjtb:hover, .shoplinkikyu:hover, .shoplinkrurubu:hover {
	background: linear-gradient(to bottom,#f6f6f6 5%,#ffffff 100%);
	background-color: #f6f6f6;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkrakukobo:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkbk1:active, .shoplinkkino:active, .shoplinkkakakucom:active, .shoplinkbellemaison:active, .shoplinkcecile:active,.shoplinkehon:active, .shoplinkjalan:active, .shoplinkjtb:active, .shoplinkikyu:active, .shoplinkrurubu:active {
	position: relative;
	top: 1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkseven a, .shoplinkbk1 a, .shoplinkkino a, .shoplinkkakakucom a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkehon a, .shoplinkjalan a, .shoplinkjtb a, .shoplinkikyu a, .shoplinkrurubu a {
	display: block;
	cursor: pointer;
	text-decoration: none;
	font-weight: 800;
	text-shadow: 1px 1px 1px #dcdcdc;
	font-size: 12px;
}

.shoplinkamazon a {
	color: #FF9901;
}

.shoplinkrakuten a {
	color: #c20004;
}

.shoplinkrakukobo a {
	color: #c20004;
}

.shoplinkkindle a {
	color: #007dcd;
}

.shoplinkyahoo a {
	color: #7b0099;
}

.shoplinkseven a {
	color: #32CD32;
}

.shoplinkkino a {
	color: #827448;
}

.shoplinkkakakucom a {
	color: #1B1C80;
}

.shoplinkbellemaison a {
	color: #8FC31F;
}

.shoplinkcecile a {
	color: #920783;
}

.shoplinkehon a {
	color: #000030;
}

.shoplinkjalan a {
	color: #FF7011;
}

.shoplinkjtb a {
	color: #CC1429;
}

.shoplinkikyu a {
	color: #1C4678;
}

.shoplinkrurubu a {
	color: #000066;
}

.booklink-footer {
	clear: left;
}

/*--------------------------------------
 ヨメレバ・カエレバ・トマレバ　２
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	width: 80%;
	margin: 20px auto;
	padding: 20px;
}

.booklink-image, .kaerebalink-image, .tomarebalink-image {
	margin: 0 15px 0 0;
	float: left;
}

.booklink-info, .kaerebalink-info, .tomarebalink-info {
	margin: 0;
	text-align: left;
}

.booklink-name, .kaerebalink-name, .tomarebalink-name {
	margin-bottom: 24px;
	line-height: 1.5;
}

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

.shoplinkamazon, .shoplinkrakuten, .shoplinkrakukobo, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven,.shoplinkbk1,.shoplinkkino,.shoplinkkakakucom, .shoplinkbellemaison, .shoplinkcecile,.shoplinkehon, .shoplinkjalan, .shoplinkjtb, .shoplinkikyu, .shoplinkrurubu {
	float: left;
	width: 30%;
	margin: 15px 1% 0 auto;
	padding: 10px 0;
}

.shoplinkyahoo a {
	font-size: 10px;
}

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ　３
--------------------------------------*/
@media only screen and (max-width: 480px) {
	.booklink-box, .kaerebalink-box, .tomarebalink-box {
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 1px 1px 3px 1px #ddd;
		padding: 10px 15px;
}
	
.booklink-image, .kaerebalink-image, .tomarebalink-iamge {
		margin: 0 0 10px;
		float: none;
}
	
.booklink-image img, .kaerebalink-image img, .tomarebalink-box img {
		margin: 0 auto;
}
	
.booklink-info, .kaerebalink-info, .tomarebalink-info {
		font-size: 12px;
		margin: 0;
}
	
.booklink-name, .kaerebalink-name, .tomarebalink-name {
		font-size: 15px;
		margin-top: 2px;
}
	
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
		margin-top: 5px;
}
	
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
		font-size: 11px;
		margin-top: 5px;
}
	
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1 {
		font-size: 14px;
}
	
.shoplinkamazon, .shoplinkrakuten, .shoplinkrakukobo, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven,.shoplinkbk1,.shoplinkkino,.shoplinkkakakucom,.shoplinkbellemaison,.shoplinkcecile,.shoplinkehon, .shoplinkjalan, .shoplinkjtb, .shoplinkikyu, .shoplinkrurubu {
		float: none;
		width: 96%;
		margin: 5px 0;
		padding: 10px 0;
}
}