「もしもアフィリエイト」の「かんたんリンク」のデザインをカスタマイズ

商品管理に、ヨメレバ、カエレバ、Rinker etc. を一通り試してみましたが、

現在は利便性を優先し、「もしもアフィリエイト」の「かんたんリンク」を利用しています。

もしもアフィリエイトの「かんたんリンク」について

この「かんたんリンク」では、商品を検索し、選択して出てきたコードを貼り付けるだけで、

• Amazon
• 楽天
• Yahoo!

の3社のリンクを1つのブログカードとして表示させることが可能で、大変重宝しています。

基本この方法で簡単に商品リンクを作成し、CSSでボタンのデザインを変更しています。

CSS追記で、もしもリンクのデザインをカスタマイズ

ボタンの色と文字の大きさを変更

ボタンの色と文字の大きさを変更するためには、style.css もしくは 付随の CSS エディター に、下記コードを追記します。

/*--------------------------------------
  もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-box {
	margin-bottom: 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: auto!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	font-size: .8em!important;
}
.easyLink-info-btn-amazon{
	background:#EF858C!important;
}
.easyLink-info-btn-rakuten{
	background:#F9C270!important;
}
.easyLink-info-btn-yahoo{
	background:#A2D7D4!important;
}
.easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    padding-right: 3px;
}

できあがりはこんな感じ ▼

マウスオーバー時に色を変える

ボタンの上にマウスがのると、色が変わるようになっています。

同じくCSSに書きコードを追記します。

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}

/* --- 最後のボタン下の空白を削除 --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
    margin-bottom: 0 !important;
}

出来上がりはこんな感じ ▼

レスポンシブデザイン

スマホ等、小さなガジェットにも対応するデザイン。

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;		
	}

できあがりはこんな感じ ▼

「○○で見る」の部分の文章を変更

私は、ボタン内の文章はデフォルトにしていますが、

ボタン内の「○○で見る」の部分の文章を変更するには、

footer.php内の、</body>の直前に、下記コードを追加します。

<!--もしもアフィリエイトかんたんリンクのボタン名修正 ここから-->
<script>
	window.onload = function(){
		amazon_obj  = document.getElementsByClassName("easyLink-info-btn-amazon");
		rakuten_obj = document.getElementsByClassName("easyLink-info-btn-rakuten");
		yahoo_obj   = document.getElementsByClassName("easyLink-info-btn-yahoo");

		for (let i = 0; i < amazon_obj.length; ++i) {
		    amazon_obj[i].innerHTML = "Amazon";
		}

		for (let i = 0; i < rakuten_obj.length; ++i) {
		    rakuten_obj[i].innerHTML = "楽天";
		}

		for (let i = 0; i < yahoo_obj.length; ++i) {
		    yahoo_obj[i].innerHTML = "Yahoo!";
		}
	}
</script>
<!--もしもアフィリエイトかんたんリンクのボタン名修正 ここまで-->

できあがりはこんな感じ▼

 

References

参考にさせていただいたサイトはこちら ▼

ボタンの色と文字の大きさの変更とレスポンシブデザイン

色の配色

マウスオーバー時の色の変更

ボタン内の文章の変更

皆様、ありがとうございます。