mybestというサイトのボタンが素敵だったので、mybest風のもしもアフィリエイトかんたんリンクを作成しました。
仕上がりはこんな感じ。
PC版
スマホ版
この記事の通りにするだけで、このデザインと全く同じのもしもアフィリエイトリンクが作れます。
自分のWordPressサイトでボタンを作成する際の参考にしてください!
もしもかんたんリンクとは?
もしもかんたんリンクとは、もしもアフィリエイトというアフィリエイトサイトが提供している標準の機能で、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; } } /*ここまで*/
一見長くて難しいように見えますが、ほとんど繰り返しなので、少し勉強すれば簡単に理解できるかと思います。
少し手を加えたいという方は、勉強してみてください。
CSSをstyle.cssにペースト
上の画像を参考に、コピーしたCSSをstyle.cssまたは追加CSSにペーストします。
手順は以下の通りです。
外観をクリック
テーマエディタファイルをクリック
style.cssを選択
エディタに先ほどコピーしたCSSをペースト
ファイルを更新する
これで、もしもかんたんリンクのデザイン作成は終了です。
もしもアフィリエイトのかんたんリンク作成
かんたんリンクの作成に移ります。
好きな商品を選択します。
商品を選択し、プレビューが表示されたら、画像表示サイズ『大』を選択しましょう。
私が作成したCSSコードでは、画像『大』の時に1番それらしくなるようにしているためです。
ブログにhtmlをペースト
画像サイズが選択できたら、HTMLのソースコードが作成されるので、全文コピーをクリックしましょう。
その状態で、更新したい記事に戻り、いつもの要領でテキストエディタにペーストして完了です。
仕上がりはこんな感じ
ページの初めでも載せましたが、仕上がりはこんな感じになりました。
PC版
スマホ版
いかがでしょうか?我ながらなかなかの出来だと思い、気に入って使っています。
気に入って使ってもらえると嬉しいです。
以下のページで完成したリンクを使っているので、興味のある方は確認してみてください。

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

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

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

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

コメント