【コピペOK】mybestっぽいもしもかんたんリンクをCSSで作成する方法！【ブログデザイン】

mybestというサイトのボタンが素敵だったので、mybest風のもしもアフィリエイトかんたんリンクを作成しました。

仕上がりはこんな感じ。

PC版

スマホ版

この記事の通りにするだけで、このデザインと全く同じのもしもアフィリエイトリンクが作れます。

自分のWordPressサイトでボタンを作成する際の参考にしてください！

クリックできる目次

もしもかんたんリンクとは？
mybest風もしもかんたんリンクの作り方
仕上がりはこんな感じ
参考にしたサイト

もしもかんたんリンクとは？

もしもかんたんリンクとは、もしもアフィリエイトというアフィリエイトサイトが提供している標準の機能で、Amazonや楽天といったネットショッピングサイトのアフィリエイトリンクを自動で綺麗に作成してくれるツールです。

標準では、以下のようなデザインで作成されます。

デフォルトでも十分綺麗ですが、これを変更して以下のようにmybest風にしていきます。

変更する理由としては、そもそも私がmybestというサイトのデザインが気に入っているので、寄せたいというのが大きいのですが、もう一つ「緑色のボタンはクリック率が上がる」という調査データがあるためです。
（諸説ありますので、参考程度に）

もしもアフィリエイトに登録していない方で、「このデザインのアフィリエイトリンクが作りたい」と思われた方はもしもアフィリエイトに登録してみてください。

mybest風もしもかんたんリンクの作り方

mybest風ボタンを作る手順は以下の通りです。

CSSをコピー

CSSをstyle.cssにペースト

もしもアフィリエイトのかんたんリンク作成

ブログに作成されたhtmlをペースト

順に解説していきます。

CSSをコピー

以下のCSSをすべてコピーします。

/*mybest風ボタンCSS*/
/*--------------------------------------
  もしものかんたんリンクのカスタマイズ
--------------------------------------*/
/*参考リンク： https://zaco-engineers.com/2022/05/14/css-button-mybest/*/
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-name a { color: #000!important; /* 文字色 */ } 
.easyLink-info-btn a{
	margin: 12px 10px 5px 0!important;
	padding: 0 12px!important;
        line-height: 35px!important;
	display: inline-block!important;
	width: 100%!important;
	font-size: 0.9em!important;
}
/* リンクBOX */
.easyLink-box {
margin-top: -3.5em!important; /* 上の余白を削る。初期は0px */
margin-bottom: 1.5em!important; /* 下に余白を作る。初期は0px */
}
.easyLink-info-btn-amazon{
	background:#02bb80!important;/*ボタン背景色指定*/
		box-shadow: 0px 5px 0 #01a873;/*ボタン影色指定*/
    transition: 0.2s all ease 0s;
 overflow: hidden;
}
.easyLink-info-btn-rakuten{
	background:#02bb80!important;/*ボタン背景色指定*/
		box-shadow: 0px 5px 0 #01a873;/*ボタン影色指定*/
    transition: 0.2s all ease 0s;
 overflow: hidden;
}
.easyLink-info-btn-yahoo{
	background:#02bb80!important;/*ボタン背景色指定*/
		box-shadow: 0px 5px 0 #01a873;/*ボタン影色指定*/
    transition: 0.2s all ease 0s;
 overflow: hidden;
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-rakuten {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-yahoo {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

.easyLink-info-maker {
 display: none;
 }
.easyLink-info-model {
 display: none;
 }
 }

@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 div.easyLink-info p.easyLink-info-name {
 margin-bottom: 5px;
 font-size: 15px;
 }
div.easyLink-box {
 padding: 10px 20px;
 }
div.easyLink-box div.easyLink-img p.easyLink-img-box span > img {
 max-width: 45%;
 max-height: 100%;
 }
 div.easyLink-box div.easyLink-img {
 margin-bottom: 5px;
 height: 100%;
 }
div.easyLink-box div.easyLink-img::before {
 padding-top: 80%!important;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
 margin-top: 10px;
 text-align: center;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
 }
/*ここまで*/

一見長くて難しいように見えますが、ほとんど繰り返しなので、少し勉強すれば簡単に理解できるかと思います。

少し手を加えたいという方は、勉強してみてください。