イロイロひとりごと

ブログのこと 日々のことをつぶやいています

カエレバ・ヨメレバのデザインをCSSコピペで簡単カスタマイズ!(レスポンシブver.1)

 当ブログには、広告・プロモーションが含まれています

ブログで商品を紹介するときに、Amazonや楽天のリンクを貼りたいときがありますよね。

そんなときは「わかったブログ」の かん吉さんが作った、Amazonも楽天も両方のリンクを同時に貼れちゃう便利なツール「カエレバ」と「ヨメレバ」を使いましょう!

すごく便利なので、私も愛用していますが、デザインをカスタマイズしてもっとおしゃれに商品を紹介しちゃいましょう(*´∀`*)

 

カエレバ・ヨメレバは下記サイトです。

商品紹介ブログパーツ カエレバ

書籍紹介ブログパーツ ヨメレバ

 

Amazonアソシエイトを登録しなくても、もしもアフィリエイトに登録すれば報酬も受け取りやすいのでオススメです。

はてなブログでレスポンシブデザインに対応させてあります。

他の環境の方はうまく調整してみてください!

 

 

カエレバ・ヨメレバのデザインをカスタマイズ(レスポンシブver.1)

CSSを追加すると、こんな表示にすることができます。

カエレバPC表示のスクショ

f:id:setuyakuhappylife:20160523112325p:plain

カエレバのスマホ表示のスクショ

f:id:setuyakuhappylife:20160523112312p:plain

 

元になっているのは、「主婦ライフ」さんが作ってくださったコードです。

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

 

そのまま使うと、スマホ表示でボタンの文字が崩れてしまいました。

あと、7netやベルメゾンは対応していませんでした。

f:id:setuyakuhappylife:20160523112139p:plain

 

 f:id:setuyakuhappylife:20160523114125p:plain

ときどきデザインが崩れてしまっているブログを見かけます。下記で紹介するコードに変えてみてください♪

改良点

・画像を中央表示に

・すべてのショップのボタン化に対応

・ショップリンクの色を変更

・ショップボタン微調整

・楽天koboに対応(2016.7.8)

・ヤフオクのアフィリは終了によりカエレバから廃止(2016.7.5)

・丸善&ジュンク堂もhontoと合併しているのでヨメレバから廃止(2016.7.5)

 

CSSをコピペでカスタマイズ

では、コードをご紹介しますね。

 

デザイン>カスタマイズ>デザインCSSにコードを追加します。

 

/* カエレバ・ヨメレバ(レスポンシブ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;
}

 

保存したら完了です。

ヨメレバのPC表示のスクショ

f:id:setuyakuhappylife:20160523121922p:plain

ヨメレバのスマホ表示のスクショ

f:id:setuyakuhappylife:20160523122027p:plain

 

カエレバ・ヨメレバの設定

f:id:setuyakuhappylife:20160523121125p:plain

カエレバ・ヨメレバのリンクを貼る際に、デザインを「amazlet風-2(CSSカスタマイズ用)」に設定してください!でないとうまく表示されません。

 

過去記事で、すでにカエレバ・ヨメレバのリンクを貼っていてCSSカスタマイズ用の設定にしていない場合は、うまく表示されませんので手直しが必要です。

 

追記 余白の調整

テーマによっては、ショップボタンと下の枠線と余白がほとんど無い状態になってしまうようです。

コードの上から4行目

padding:0 8%;

の0の部分を、0~5%の間で変更してみて、お好みの余白に調整してください。 

 

まとめ

こんなにショップリンクたくさん貼ることはないと思いますが、Amazonと楽天のリンクが同時に貼れるとっても便利なカエレバ・ヨメレバを、カスタマイズしてご活用ください(*´∀`*)

収益もアップしますよ~♪

PCとスマホのCSSを分けている場合でも、スマホのところに同じコードを入れることで同じデザインで表示できると思います。(保証はしませんが)

 

カエレバ・ヨメレバツールを作ってくださったかん吉さんに感謝しています。

 

もし不具合やアドバイス等ありましたら、コメント欄・サイドバーのメールフォーム 、TwitterのDMからご連絡ください!

 

↓これが商品リンクです。

PCでも、スマホでもスクリーンサイズに合わせて表示してくれている…ハズ(´・ω・`)

 

※ただいまver.2を表示中。

 

ver.2の記事はこちら↓

happylife-tsubuyaki.hatenablog.com

合わせてアプリーチのカスタマイズもいかが?

happylife-tsubuyaki.hatenablog.com

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。