もしもアフィリエイトでは、Amazon、楽天、Yahoo!ショッピングの3つの商品リンクボタンを一度に生成してくれる「かんたんリンク」という便利なツールを提供しています。
Amazonアソシエイトや楽天アフィリエイトに個別で登録せずとも、もしもアフィリエイト上ですべてできてしまうので、手間が省けます。
ただし、3つのボタン全て使わなくていい、そんな時もありますよね。例えばYahoo!ショッピングだけを外して使いたいなんて時、どうすればいいのでしょうか。
カスタマイズ方法、おすすめCSS、Yahoo!ショッピングの表示が崩れる問題の対処法を掲載しています。
かんたんリンクのボタンを表示/非表示する方法
かんたんリンクのボタンを表示/非表示する方法は、設定の項目から「表示設定中のボタン」を選択するだけです。
ボタンをドラックして左右に移動させることで、表示させるかどうかを選択することができます。また、ボタンの順番を変更したり、画像のサイズを変更することも、この設定項目から行うことができます。
この設定欄は最初閉じているので、設定バーを開いてあげる必要があります。
私はこの設定バーに気が付かず、もしもアフィリエイトのお問い合わせから質問をしてしまいました。
これに気が付かない人が私以外にいるのか……とも思いましたが、もしも気が付かなかった人は、HTMLソースと対応プロモーションの間にある設定バーの右にある、三角矢印を押してあげてください。
そうすると、設定する画面が表示されるかと思います。
かんたんリンクのボタンの外観カスタマイズ（CSS）
こちらは画像ですこちらは自分用の備忘録となってしまいますが、もしもアフィリエイトのかんたんリンクのカスタマイズです。
CSSを変更してボタンの色変更し、より見やすくしています。また、余白の調節などをしています。
こちらのCSSはネイネイの喜怒哀楽さんのものを使用しています。
これだけでなく、超シンプル デザインも掲載してくださっています。ぜひ元サイト様をご覧ください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | /* ------------------------------------- */ /* かんたんリンク カスタマイズ */ /* ------------------------------------- */ /* --------- 外枠 --------- */ div.easyLink-box { border:double #CCC !important; /* ２重線 */ box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25); } /* --- 商品リンク タイトル --- */ p.easyLink-info-name a { color: #3296d2 !important; /* 文字色 */ } /* --------- ボタン色 --------- */ a.easyLink-info-btn-amazon { background: #f6a306 !important; /* 背景色 */ border: 2px solid #f6a306 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } a.easyLink-info-btn-rakuten { background: #cf4944 !important; /* 背景色 */ border: 2px solid #cf4944 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } a.easyLink-info-btn-yahoo { background: #51a7e8 !important; /* 背景色 */ border: 2px solid #51a7e8 !important; /* 外枠 */ box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */ } /* --- マウスオーバー時のボタン色 --- */ a:hover.easyLink-info-btn-amazon { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #f6a306 !important; /* 文字色 */ } a:hover.easyLink-info-btn-rakuten { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #cf4944 !important; /* 文字色 */ } a:hover.easyLink-info-btn-yahoo { opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */ background: #fff !important; /* 背景色 */ color: #51a7e8 !important; /* 文字色 */ } /* --- 最後のボタン下の空白を削除 --- */ div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child { margin-bottom: 0 !important; } /* --- PC以外の時の設定 --- */ @media screen and (max-width: 703px) { div.easyLink-box div.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht { max-height: 180px !important; /* 商品画像の大きさを調整 */ } } |
実際の表示は以下のようになっています。
Yahoo!ショッピングが2行になる（崩れる）問題
こちらは画像ですかんたんリンクで作成したものを見てみると、「Yahoo!ショッピングで見る」が2行になっており、非常に見づらいです。
使用しているテーマによって異なると思うのですが、当サイトで使用しているテーマでは、画像サイズを変更することで解決しました。
上で挙げたように、もしもアフィリエイトのかんたんリンクは「設定」項目で表示するボタンを変更できたり、画像のサイズを変更することができます。
最初は画像の大きさが「小」になっているのですが、これを「大」にしてあげるだけで、「Yahoo!ショッピングで見る」のボタンが2行になり崩れてしまう現象を解決することができます。
実査の表示を見てみましょう。
使用している商品は、オススメのライティング本です。
【小】
【大】
枠の大きさ自体は変わっていないので、画像大にしてもスペースはとりません。
特に理由がなければ、画像は常に大にしておくことをおすすめします。
