【もしもアフィリエイト】かんたんリンクをオリジナル配色にする

こういうの買ったよ！

って書くときには、

もしもアフィリエイトのかんたんリンクを使用しています。

画像もきれいでほんとに”かんたん”に設置できるので、

助かりますね！

そのかんたんリンクの色をカスタマイズしてみました。

完成イメージ

主な(というかほとんどの)変更点は各ボタンのカラーです。

amazon　#EDC728

rakuten　#DD7237

yahoo　#1F5574

自分ではおしゃんな色使いだと思ってるんで、

よかったら使ってみてください。

かんたんリンクは結構大きめのデザインで、

スマホとか画面いっぱいになってしまうので、

コンパクトになるカスタマイズをされている方のCSSを使わせてもらっています！

↓こちらのサイトを参考にさせていただきました♪

div.easyLink-box {	
	border:3px double#CCC !important; 	
	box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);}
div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name  {
    margin:15px 2px 0 0!important;
    text-align:center !important;
	font-size: 14px !important;}
p.easyLink-info-model {
display: none !important;}
.easyLink-info-btn { 
	display: inline!important;} .easyLink-info-btn a{
		margin: 5px 10px 5px 0!important; 	padding: 0 12px!important;
		line-height: 40px!important; 	
		display: inline-block!important;
		width: 100%!important; 
		box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important; 	
		font-size: 0.9em!important; } .easyLink-info-btn-amazon{ 	
		background:#EDC728!important; } .easyLink-info-btn-rakuten{ 
		background:#DD7237!important; } .easyLink-info-btn-yahoo{ 	
		background:#1F5574!important; } 

div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img

div.easyLink-box div.easyLink-img
 img.easyLink-img-pht
easyLink-img-pht js-item-image
{
max-width: 300px !important;
max-height: 240px !important;}


#single-content .easyLink-info-btn a{color: white;}



@media screen and (max-width: 480px){ 
	div.easyLink-box div.easyLink-info p.easyLink-info-btn a { 	
		width: 100%!important; 	
      position: relative; 	} 	
	.easyLink-info-btn a:before { 		padding-right: 5px; 
		right: 5px; 	
position: absolute;		 
	} }

@media screen and (max-width: 480px){
div.easyLink-box.easyLink-size-s {
max-width: 340px !important;
}}

使いやすくて、収益化にもつながるので、ぜひ使ってみてください！