アクアリウムのおすすめグッズはこちら!

もしもの「かんたんリンク」のボタンをカスタマイズ|スマホ表示もあり

もしもアフィリエイトの簡単リンクをカスタマイズ

TAGS:

AmazonのAPIの変更で、カエレバ等でAmazonの商品リンクが作成できなくなりました

そこで出番なのが、もしもアフィリエイトの公式機能である「簡単リンク」。

これを使えば、これまでと同じようなAmazonの商品リンクを簡単に作成可能です

ですが、デザインが味気ないものだったので、本ブログのテーマ(SANGO)に合うようにCSSでカスタマイズしました。

デザインはこんな感じ

もしもの簡単リンクのボタンをカスタマイズ例

スマホバージョン追加しました

もしものリンクモバイル

実際のリンクはこちら。

もしもの簡単リンクのボタンをカスタマイズ

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

注意
本記事の内容で生じたエラーなどの責任は一切負いかねます。カスタマイズは自己責任でお願いします。事前にバックアップ等を取っておくことをおすすめします。バックアップは「BackWPupのインストールと設定|WordPressの自動バックアップ」を参考にしてください。

カスタマイズする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;		
	}
}

スマホ表示の場合は、ボタン幅いっぱいの方がCVが高いらしいよ。

PCでもボタン幅をいっぱいにしたい場合は、「.easyLink-info-btn a」のwidthを100%!importantに変更してください。

今回のカスタマイズのPOINT

今回のカスタマイズのPOINTは3つです。

結構見やすくなったと思います。

ボタンの色を変更

それぞれのボタンに対して個別に色を設定しています。

ご自身のそのほかの色設定と合わせて設定してください。

ボタンの文字サイズをテーマのサイズに

ボタンの文字のサイズが指定されていましたが、少し小さく感じたので、テーマのデフォルト()の大きさに変更しています。

ボタンにアイコンを追加

ボタンの文字の前にFont Awesomeの記号を追加しています。

スマホ表示の場合は右端に変更。

最後に

もしもアフィリエイトの簡単リンクのボタンをカスタマイズするCSSを紹介しました。

少しでも見やすく、ブログに馴染むデザインにして、CVRアップを狙っていきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です