読者です 読者をやめる 読者になる 読者になる

イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

カエレバ・ヨメレバのカスタマイズ!ホバーで色が付くver.2ができました!

サイトデザイン・設定

カエレバ・ヨメレバをお使いのみなさん!

お待たせしました!!(←イヤ、誰も待ってないし)

ついにカエレバ・ヨメレバのカスタマイズ第二弾が完成しました~(*´∀`*)

 

カエレバ・ヨメレバはいろんなカスタマイズが考えられています。

いままで私もコードを公開していましたが、元は主婦ライフさんのコードを弄らせてもらったものです。

ver.1はこちら

happylife-tsubuyaki.hatenablog.com

 

「ホバーした(カーソルを合わせた)ときに色が付いたらいいかも」と思いつき、ちょこちょこ弄ってver.2ができました♪

 

このデザインが気にいっていただけたら、コードをコピペしてご活用ください(*´艸`*)

  

他のデザインはかん吉さんがまとめてくれています。

www.wakatta-blog.com

 

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

 

目次

カエレバ・ヨメレバのカスタマイズ!

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

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

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

 

ほぼすべてのショップに対応しています。

 

カスタマイズ後のスクショ

PC表示

f:id:setuyakuhappylife:20160712132129p:plain

スマホ表示

f:id:setuyakuhappylife:20160712175330p:plain

このように表示されます。
PC表示を縮小させただけで、同じデザインにしてあります。

 

カエレバ・ヨメレバのリンクを貼る

カエレバ・ヨメレバのリンクを貼る際は、amazlet風-2(CSSカスタマイズ用)を選択してください。

f:id:setuyakuhappylife:20160523121125p:plain

過去記事に貼ってあるリンクはデザインが崩れる可能性があるので、貼り直すようにしましょう!

これ地味に大変です(´・ω・`)

 

CSSをコピペ

下記コードをCSS記述欄に入れてください。

 はてなブログなら、デザイン>カスタマイズ>デザインCSSの一番下にいれましょう!

/* カエレバ・ヨメレバ (レスポンシブver.2) */
.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-bottom:3px;
}

.kaerebalink-link1 img, .booklink-link2 img{
display:none;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
    width:100%;	
	}
	
.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:inline-block;
    float:left;
    width:45%;	
    height:15px;
    overflow:hidden;
    border-radius:6px;
	border:1px solid #dcdcdc;
	margin:5px  5px 0 5px;
	padding:10px 0px;
	text-align:center;
	cursor:pointer;
	text-decoration:none;
	font-weight:800;
	text-shadow:1px 1px 1px #dcdcdc;
	font-size:12px;   
	background-color:#ffffff;
}

.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{
	color:#fff;
}
	
.shoplinkamazon a{
	color:#ff9900;
}
.shoplinkamazon a:hover{
	background-color:#ff9900;
}

.shoplinkrakuten a{
	color:#bf0000;
}
.shoplinkrakuten a:hover{
	background-color:#bf0000;
}

.shoplinkkindle a{
	color:#1a8dcc;	
}
.shoplinkkindle a:hover{
	background-color:#1a8dcc;	
}

.shoplinkrakukobo a{
	color:#d50000;	
}
.shoplinkrakukobo a:hover{
	background-color:#d50000;	
}

.shoplinkyahoo a{
	color:#ff0033;
	font-size:10px;
 } 
.shoplinkyahoo a:hover{
	background-color:#ff0033;
 }  

.shoplinkseven a{
	color:#ff6501;
}
.shoplinkseven a:hover{
	background-color:#ff6501;
}

.shoplinkbellemaison a{
	color:#84be24;
 } 
.shoplinkbellemaison a:hover{
	background-color:#84be24;
 } 
 
.shoplinkcecile a{
	color:#8d124b;
 } 
.shoplinkcecile a:hover{
	background-color:#8d124b;
 }
 
.shoplinkkakakucom a{
	color:#051D93;
 } 
.shoplinkkakakucom a:hover{
	background-color:#051D93;
 } 
 
.shoplinkbk1 a{
	color:#0786cb;
 }
.shoplinkbk1 a:hover{
	background-color:#0786cb;
 }
 
.shoplinkehon a{
	color:#000066;
 }
.shoplinkehon a:hover{
	background-color:#000066;
 }
 
.shoplinkkino a{
	color:#003e92;
 }
.shoplinkkino a:hover{
	background-color:#003e92;
 }
 
.shoplinktoshokan a{
	color:#212121;
 }
.shoplinktoshokan a:hover{
	background-color:#212121;
 }
  
.booklink-footer{
	clear:left;
}

はてなブログでレスポンシブデザインにしている場合はこれでOK!

CSSをスマホ表示と分けている方は、スマホの方にも記述すれば対応できるかと思います。

他の環境で動作確認していないので、もしデザインが崩れる場合は調整してみてください。

 

まとめ

カエレバ・ヨメレバをカスタマイズしてボタンにしてあげると、デザインがおしゃれになるだけでなく、収益もアップしました(*´艸`*)

コピペで簡単なので、ぜひカスタマイズしてみてください。

 

カエレバ・ヨメレバのツールを作ってくださったかん吉さんに感謝しています(*´ω`*)

 

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

 

めっちゃいいのできたー♪と思って夫に見せたら、「色が邪魔」と不評でした(´・ω・`)

色付きも、いいよね?ね??

 

実際のカエレバです↓

 

実際のヨメレバです↓