【ボタンの色変更】もしもアフィリエイト「かんたんリンク」【カスタマイズ】

ブログ運営

【ボタンの色変更】もしもアフィリエイト「かんたんリンク」【カスタマイズ】

まず、はじめに

もしもアフィリエイトの公式機能である「かんたんリンク」。
現状のボタンの色だと味気ないですよね。
私もAmazon、楽天、Yahooのボタンの色が同色で変更出来ないかと困っていました。
ですが、私が調べたCSSをコピペすれは簡単変更できますので、ぜひカスタマイズして下さい。

目次

かんたんリンクのボタンをコピペでカスタマイズしよう

もしものかんたんリンクのボタンをカスタマイズするには、以下で紹介するCSSをコピペしてもらえばOKです。

注意
本記事の内容で生じたエラーなどの責任は一切負いかねます。カスタマイズは自己責任でお願いします。事前にバックアップ等を取っておくことをおすすめします。
カスタマイズするCSS
こちらのCSSをstyle.cssにコピペで追記してください。
コピペするCSS
/*--------------------------------------
  もしものかんたんリンクのカスタマイズ
--------------------------------------*/
.easyLink-box {
	margin: 0 0 1.5em!important;
}
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-btn a{
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: 100%!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	font-size: 1em!important;
}
.easyLink-info-btn-amazon{
	background:#ffb36b!important;
}
.easyLink-info-btn-rakuten{
	background:#ea7373!important;
}
.easyLink-info-btn-yahoo{
	background:#73c1ea!important;
}
.easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    padding-right: 3px;
}
@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;		
	}
}

かんたんリンク追加カスタマイズ

スマホでボタン幅いっぱいにし、アイコンを右寄せにする場合は、こちらのCSSも追記してください。
コピペするCSS
@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;		
	}
}
PCでもボタン幅をいっぱいにしたい場合は、「.easyLink-info-btn a」のwidthを100%!importantに変更してください。

かんたんリンクカスタマイズまとめ

もしもアフィリエイトのかんたんリンクのボタンをカスタマイズするCSSを紹介しました。
少しでも見やすく、ブログに馴染むデザインにして、CVRアップを狙っていきましょう。