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

私はwordpressでsimplicityというテンプレートを使ってこのサイトを作っています。碌な知識のない私にも優しいのでお気に入りです。そんな私のサイトですが、記事の合間にアフィリエイトリンクをはらせてもらって、見に来て下さるお客様から時々お小遣いを貰っています。最近、そのアフィリエイトリンクを見やすくしてくれる「カエレバ」「ヨメレバ」というこれまた凄いブログパーツを見つけまして、私も利用させて貰う事にしました。で、その見た目を更に判りやすくボタンに出来るCSSが公開されていたので私もさっそく利用しました。が、「紀伊国屋」さんや「価格コム」など他のボタンも出せるようにしたくて、その分のソースも追加しました。

Simplicity 改造

スポンサーリンク

simplicityとは

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

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

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

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

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

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

CSSに張るコード

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

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

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

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

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

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

.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: 16px;
	margin-bottom: 14px;
	line-height: 1.2em;
}

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

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

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

.shoplinkamazon, .shoplinkrakuten, .shoplinkrakukobo, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven,.shoplinkbk1,.shoplinkkino,.shoplinkkakakucom,.shoplinkbellemaison,.shoplinkcecile,.shoplinkehon {
	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 {
	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 {
	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 {
	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;
}

.booklink-footer {
	clear: left;
}

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

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

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

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

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

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

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

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

CSSを張った結果

上のCSSタグを貼付けた結果です。まずはカエレバ。アフィリエイト申請がまだ通ってないものや取り扱いがない商品の場合はリンク切れになります。取り扱いされていないものも中にはあります。そう言うときは「カエレバサイト」でチェックを外せば良いだけです。

見本なのでリンクボタンを全部出すようにしたらこんな風になりました。見やすいですね。

必要なリンクだけにした場合。

つづいてヨメレバ。全て表示させるとこんな感じです。

コピペして使えるリスト装飾CSSタグ

最近、リストの装飾用のCSSも作りました。良かったらどうぞ。詳細は当該の記事でご確認下さい。

Simplicityの追加CSSにコピペして使うリスト装飾タグ

最後にひとこと

リンクの見せ方を工夫するだけでこんなにも判りやすくなるんですね。テンプレートを作っちゃう人もブログパーツを作っちゃう人も改造できちゃう人も、皆様凄いです。そして使わせてもらえる私は幸せです。ありがとうございました!

ここまでお読み下さり、ありがとうございました。

スポンサーリンク

新しい記事を公開するとツイートしています。

フォローする

関連するかもしれない記事