ブログのノウハウ

【限定公開】もしもアフィリエイト『かんたんリンク』のボタンをおしゃれにカスタマイズ【クリック率が上がる】

こんにちは、yujiです!
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

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

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

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

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

Amazaonアソシエイトに挑戦中の方へ
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめています。
【審査承認されたので解説】最新Amazonアソシエイト合格方法

Amazonアソシエイト審査に1発合格した話
【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説
【SEO】ブログのアクセス数が増える9個の方法
【厳選】アフィリエイトで登録すべきASP12社

sponser link

【コピペで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;
border-radius: 20px!important;
line-height:40px!important;
width:65%!important;
font-size:.9em!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 (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;
}
}
@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;
}
}
@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;
width:85%!important;
}
}
p.easyLink-info-maker{/*メーカー非表示*/
display:none;
}
p.easyLink-info-model{/*モデル非表示*/
display:none;
}

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

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

これで『もしもかんたんリンク』のカスタマイズは完了です。

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

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

Amazonアソシエイト審査に1発合格した話。
【稼げる】もしもアフィリエイトを実際に使ってみた感想
【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説
【SEO】ブログのアクセス数が増える9個の方法
【厳選】アフィリエイトで登録すべきASP12社

【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

コメント

  1. みふみ より:

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

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