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

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

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

仕上がりはこんな感じ。

PC版

mybest風もしもかんたんリンクデザイン例

スマホ版

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

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

スポンサーリンク

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

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

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

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

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;
}
 }
/*ここまで*/

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

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

CSSをstyle.cssにペースト

CSSの更新方法

上の画像を参考に、コピーしたCSSをstyle.cssまたは追加CSSにペーストします。

手順は以下の通りです。

 外観をクリック

 テーマエディタファイルをクリック

 style.cssを選択

 エディタに先ほどコピーしたCSSをペースト

 ファイルを更新する

これで、もしもかんたんリンクのデザイン作成は終了です。

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

かんたんリンクの作成に移ります。

もしもかんたんリンクの作成

好きな商品を選択します。

商品を選択し、プレビューが表示されたら、画像表示サイズ『大』を選択しましょう。

私が作成したCSSコードでは、画像『大』の時に1番それらしくなるようにしているためです。

ブログにhtmlをペースト

もしもかんたんリンクのhtmlをコピー

画像サイズが選択できたら、HTMLのソースコードが作成されるので、全文コピーをクリックしましょう。

その状態で、更新したい記事に戻り、いつもの要領でテキストエディタにペーストして完了です。

スポンサーリンク

仕上がりはこんな感じ

ページの初めでも載せましたが、仕上がりはこんな感じになりました。

PC版

mybest風もしもかんたんリンクデザイン例

スマホ版

いかがでしょうか?我ながらなかなかの出来だと思い、気に入って使っています。

気に入って使ってもらえると嬉しいです。

以下のページで完成したリンクを使っているので、興味のある方は確認してみてください。

【LUPICIA】ルピシア2022年冬の福袋「竹5」の中身・お値段全公開【紅茶】
「香り」で有名なお茶屋さんルピシア(LUPICIA)の2022年冬の福袋「竹5」について紹介しています。ルピシアの福袋はちょっと良い紅茶が半額以下で手に入るまたとないチャンスです。また、竹5の福袋紅茶以外にも煎茶や烏龍茶が満遍なく入っており、紅茶初心者さんでも十分楽しめる内容になっているので、年2回の福袋チャンスでぜひ...
スポンサーリンク

参考にしたサイト

ボタンの配色など、デザインの参考にしたサイト
シンプルなカラーでセンスよく仕上がっているので、ボタン以外もかなり参考にしています。

mybest - おすすめ情報サービス
mybestは「おすすめ情報サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介して、あなたの「選ぶ」をお手伝いします。

ボタンデザインのCSSの参考にしたページ

CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説! | JAJAAAN
CSSで作れるボタンについて120個以上サンプルを作成してみました。どこよりも詳しく、どこよりもサンプル多く解説しています。どれもHTMLとCSSで実現できるものであり、PC用ボタンはすべてホバーアクション付きです。また、CSSボタンを作る際の重要なポイントについても解説しています。

CSSの表示の参考にしたページ(ブログテーマcocoon限定)

【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】
この記事では「Cocoon」の記事内にソースコードを埋め込む方法をまとめました。コピペして使えるテンプレも作ったので、ぜひ使ってくださいね。「HTML/CSS/Javascript」については、ブログ内でデモを見せるのに「CodePen」が便利なので、その使い方も解説します。

もしもアフィリエイトかんたんリンクの参考にしたサイト

もしもの「かんたんリンク」のボタンをカスタマイズ|スマホ表示もあり
AmazonのAPIの変更がありましたが、もしもアフィリエイトの公式機能である「簡単リンク」を使えば、Amazonの商品リンクを簡単に作成可能です。CSSでカスタマイズしましたので紹介します。

コメント

タイトルとURLをコピーしました