【簡単】もしもアフィリエイト「かんたんリンク」のボタンをおしゃれにカスタマイズ【クリック率が上がる】

こんにちは、yujiです!
このブログではアフィリエイトについて、初心者の方向けに詳しく解説しています。

もしもアフィリエイトのかんたんリンクを、サイトに合ったデザインにカスタマイズしたいです。

以上のような、もしもアフィリエイト利用者のリクエストにお応えします。

かんたんリンクのアレンジ完成形はコチラです。
こちらのデザインはstyle.cssにコピペで完成なので、是非使ってみてください。

画像のスライドやそれぞれのボタンも、きちんと機能しています。
また、レスポンシブデザインにも対応してますので確認してみてください。

Amazaonアソシエイトに挑戦中の方へ
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。
【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!

【年収7ケタ突破】僕のブログの収益化方法まとめ【初心者が稼げる仕組みとは?】
【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話。
【本を聞くアプリ】僕はオーディオブックで、年間100冊聞いてます。

【コピペでOK】かんたんリンクのカスタマイズ

もしもアフィリエイトのかんたんリンクがリニューアルされ、手軽にAmazon・楽天・ヤフーショッピングへのリンクを作成できるようになりました。

かんたんリンクのデザインは以下の通り。

デフォルトではこのような感じです。
少し角ばっていて、ページ全体の雰囲気と合わない印象です。

コードはこちらです。

「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。
(※メモ書きも残しておいたので、参考にしていただけたらと思います。)

style.cssにコピペするコード
/********************************
もしもかんたんリンク
*********************************/
/*====================== box */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 2px;
box-sizing: border-box;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
height:auto;
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Helvetica, Meiryo, sans-serif;
line-height: 1.5;
max-height:none!important;
width:100%;
max-width:630px!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box{
display:block!important;
}
}
/*====================== name */
div.easyLink-box div.easyLink-info p.easyLink-info-name{
text-align:center;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
color: #545454!important;
text-decoration: none;
transition: 0.3s ;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a:hover {
color:#FFCA28!important; /* テキストリンクカラー(マウスオーバー時) */
text-decoration: none !important;
}@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
@media screen and (max-width: 480px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
/*=========================================================================== image */
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-img p.easyLink-img-box {
align-items: start!important;
}}div.easyLink-img{
height: 200px!important;
}
.easyLink-img-box {
height: 200px!important;
}
.easyLink-img-box span > img {
max-height: 200px!important;
}
@media screen and (min-width:481px) and (max-width: 620px){
div.easyLink-box div.easyLink-img{
margin-right: 0px!important;
display:inline-block!important;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
display:inline-block!important;
}
}
div.easyLink-box div.easyLink-img a.easyLink-arrow-left img, div.easyLink-box div.easyLink-img a.easyLink-arrow-right img {/*左右矢印の影非表示*/
box-shadow:none;
}
/*====================== btn */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
transition: 0.4s ease-out!important;
padding:.3em 0!important;
border-radius: 20px!important;
}@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .5em!important;
justify-content: center!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin: .5em 0 0 0 !important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon {background: #ff9901;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon:hover{background: #FEBD69;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten {background: rgb(191,0,0);}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten:hover{background: #FA5858;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo {background: #FF0033;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo:hover{background: #F7819F;}@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .2em!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .5em!important;
margin-bottom: 0!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}
@media screen and (max-width: 620px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .3em!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:85%!important;
}
}
p.easyLink-info-model{/*モデル非表示*/
display:none;
}

ごらんの通り、初心者ながらデザイン変更に挑戦したので、〈!important〉で優先順を上げて対応している箇所が多いです。

コピペができたら「ファイルを更新」をクリックします。

これでもしもかんたんリンクのカスタマイズは完了です。
お疲れ様でした!

【注意】もしもアフィリエイトは危ない!?実際に使ってわかったデメリットを公開

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました!

【年収7ケタ突破】僕のブログの収益化方法まとめ【初心者が稼げる仕組みとは?】
【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話。
【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!

【その画像の著作権、大丈夫?】僕がおすすめする『安心のフリー素材サイト』9選
【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

コメント

  1. みふみ より:

    初めまして!
    かんたんリンクのコードありがとうございます。シンプルすぎていまいち(笑)だなと思っていたので、早速取り入れてみました。感謝です!!

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