イロイロひとりごと。

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

カエレバ・ヨメレバのカスタマイズ!ホバーで色が付くver.2のCSS公開

2018.2.10  ver.2.3に更新しました

カエレバ・ヨメレバのカスタマイズ第二弾です(*´∀`*)

 

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

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

 

元は主婦ライフさんのコードを弄らせてもらったもの。

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

他のデザインはかん吉さんが下記記事にまとめてくれていますよ!

www.wakatta-blog.com

 

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

 

 

コードが知りたい方は「CSSをコピペ」まで飛んでください

 

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

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

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

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

 

Amazonアソシエイトや楽天アフィリエイトにそれぞれ登録するよりも、もしもアフィリエイトに登録しておくと報酬をまとめて受け取れて便利です。

 

ver.2の特徴

・カーソルに合わせると色変わる

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

・画像を中央表示に

・楽天koboに対応(2016.7.8)

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

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

・スマホ表示のボタンを大きくしました(2018.2.2)

・ショップボタン微調整(2018.2.10)

 

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

PC表示

f:id:setuyakuhappylife:20170316104205p:plain

スマホ表示

f:id:setuyakuhappylife:20180202134620p:plain

このように表示されます。

スマホ表示の場合はボタンが縦に並び、タブレット・PC(600px以上の画面)だとボタンが2列に並ぶようになっています。

 

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

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

f:id:setuyakuhappylife:20160523121125p:plain

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

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

 

CSSをコピペ

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

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

/* カエレバ・ヨメレバ (レスポンシブver.2.3) */
.booklink-box, .kaerebalink-box{
	width:78%;
	margin: 1em 0 1em;
	padding:3% 8%;
	border: 1px dashed #BDBDBD;
	overflow: hidden;
	font-size:small;
}
.booklink-image, .kaerebalink-image{
	margin:15px 0 15px 0;
    text-align: center;	
}
.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:95%;	
    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:bold;
	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{
	display: none;
	}
@media screen and (min-width: 600px) {
.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%;	
    overflow:hidden;
}
    }

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

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

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

 

 

まとめ

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

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

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

 

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

 

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

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

 

実際のカエレバです↓

 

実際のヨメレバです↓

 

ver.1はこちら

happylife-tsubuyaki.hatenablog.com

合わせてアプリーチのカスタマイズもどうぞ(*´∀`*)

happylife-tsubuyaki.hatenablog.com

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