ども、ゴマメです。
もしもアフィリエイトのかんたんリンクはデザインがイマイチですよね。
今回は、見た目をカエレバ風にするカスタマイズを紹介します。コピペするだけなので、初心者の方でも簡単にできます。
ゴマメ
リンクデザインは収益にも直結しますので、ぜひお試しください。
カエレバ、Rinker、WPアソシエイトポストR2が使えなくなった！
2019/1/23にProduct Advertising API 利用ポリシーが変更されました。⇒詳細
過去30日間にPA-APIから取得した商品リンク経由で成果がないとPA-APIが使えなくなります。
シロクマ
PA-APIは、Product Advertising APIの略称です。アマゾンへのデータベースへの入り口の役目をしています。
リサーチツールや出品管理、在庫管理などさまざまなデータベースがありますが、アフィリエイターにとって重要なのは商品情報や在庫情報です。
ゴマメ
- WPアソシエイトポストは検索不能になります。
- RINKERでもWPアソシエイトポストと同じように検索ができなくなります。
- カエレバは、楽天経由の検索になるため、楽天にない商品は情報取得できません。
もしもアフィリエイトやASP経由でamazonの物販をしているとPA-API経由での売り上げにならないため、PA-APIの使用が制限（停止）されてしまいます。
それなら、いっそのことPA-APIを使わない方法でアフィリリンクを作りましょう！
いちばんおすすめなのが「もしもアフィリエイト」です。
もしもアフィリエイトのかんたんリンクでアフィリリンクを作る！
もしもアフィリエイトには、アマゾンや楽天の商品を検索して、商品リンクにできる「かんたんリンク」という機能があります。
しかし、広告のデザインがイマイチで人気がありませんでした。
かんたんリンクのデザインはイマイチ！
2019年3月26日にもしもアフィリエイトの「かんたんリンク」のデザインが変わりました。
以前のデザインと比べると、だいぶ良くなりました。
しかし、カエレバやRINKERなどのツールで作ったものと比べると以下の点で不満が残ります。
イマイチな点
- PC表示は、ボタンの色がオレンジ一色。全体的に枠が大きくて目立ちすぎる。
- モバイル表示は、ボタンの色がオレンジ一色。全体がムダに縦長でかっこ悪い。
かんたんリンクをカエレバ風に近づけるカスタマイズ
この2点を解決するために今回デザインをカスタマイズしました。
目指すのは、カエレバ風のデザインです。
ゴマメ
カスタマイズするとこうなります。
PCでの表示
もしもアフィリエイトオリジナルの場合
不満点：ボタンの色がオレンジのみ、商品説明が見づらい。行間が無駄に開いている
今回のカスタマイズ後だと色もフォントもGood !
枠を2重線で囲みました。画像を小さくして、商品説明を太字にして行間を狭くしました。MODEL名を非表示にすることで上下の幅を絞りました。
ボタンをオレンジと赤に変更。全体的にすっきりしました。
モバイル表示の場合（iPhone7で検証済み）
スマホ表示ですが、もしもアフィリエイトのオリジナルは、はっきり言ってダサいです。
今回のカスタマイズで、モバイル版がかなり良くなると思います。
もしもアフィリエイトオリジナルの場合大きすぎて不自然
不満点：とにかく縦に長すぎます。これだと本文に自然な形で挿入できません。スマホでこの広告でてきたら嫌ですよね・・・。
今回のカスタマイズ後だとコンパクトで記事になじむ
画像の大きさと余白の調整、Model名を非表示にして、できるだけ正方形になるようにしました。カエレバなどの別ツールで作ったみたいに、自然な形で設置できます。
コピペでできる「かんたんリンク」のカスタマイズ法
方法は簡単です。以下のCSSをStyle Sheetコピペするだけにコピペするだけです。
/* かんたんリンク カスタマイズ START */
/* 商品名タイトル文字 */
/* 商品名フォントサイズ */
div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name {
font-size: 16px !important;
line-height: 17px !important;
font-weight:bold;
}
/* 商品MODEL名非表示 */
p.easyLink-info-model {
display: none !important;
}
/* ボタンの縦幅 */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
padding:2px !important;
}
/* ボタンの間隔 704Px以上の画面*/
@media screen and (min-width: 704px) { div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
margin-bottom:10px !important;
}}
/* --- ボタン調整 --- */
div.easyLink-box{padding:10px;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 10 !important;
}
/* リンクボタン調整 */
.easyLink-info-btn {
display: inline!important;
}
/* リンクBOX調整 */
.easyLink-box {
margin: 0 0 1.5em! important;
}
/* リンクボタンのフォント */
.easyLink-info-btn a{
margin: 5px 10px 5px 0!important;
padding: 0 12px!important;
line-height: 35px!important;
width: 44%!important;
box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
font-size: 1em!important;
display: inline-block!important;
}
/* アマゾンリンクボタンの色 */
.easyLink-info-btn-amazon{
background:#ffb36b !important;
}
/* 楽天リンクボタンの色 */
.easyLink-info-btn-rakuten{
background:#ea7373 !important;
}
/* YAHOOリンクボタンの色 */
.easyLink-info-btn-yahoo{
background:#73c1ea !important;
}
/* ボタン内矢印アイコン */
.easyLink-info-btn a:before {
font-family: "Font Awesome 5 Free";
content: "\f0da";
padding-right: 3px;
}
/* 商品画像サイズ */
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img
p.easyLink-img-box,
div.easyLink-box div.easyLink-img
p.easyLink-img-box img.easyLink-img-pht{
max-width: 130px !important;
max-height: 130px !important;
}
/* スマホの広告幅 */
@media screen and (max-width: 480px){
div.easyLink-box.easyLink-size-s {
max-width: 340px !important;
}}
/* スマホのボタン調整 */
@media screen and (max-width: 480px){
.easyLink-info-btn a{
margin: 5px 10px 5px 0!important;
padding: 0 12px!important;
line-height: 35px!important;
display: inline-block!important;
width: 44%!important;
box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
font-size: 0.8em!important;
}}
div.easyLink-box {
border:double #CCC !important; /* ２重線 */
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* かんたんリンク カスタマイズ End */
このカスタマイズは「ネイネイの喜怒哀楽」様、「すもぐり」様を参考にさせて頂き、さらにカスタマイズしました。
これからは、もしもアフィリエイトで稼ごう！
アマゾンのPA-API制限に悩まないで、継続的に使うなら、もしもアフィリエイトのかんたんリンクがおすすめです。
自然な広告で収益アップを狙いましょう！
最後まで読んでいただきまして、ありがとうございました。（ゴマメ）
こんにちは。
ブログにかんたんアフィリエイトの「かんたんリンク」を
ほぼすべての記事に貼り付けた後になって、
スマホで見たらレイアウトが崩れていることに気付いて
泣きそうになっていた者です。
夜中、ベッドの中でレイアウトを直す方法を探していて
こちらのサイトに辿り着きました。
おかげさまで、コピペ一発でレイアウトが直った上に、
ボタンも分かりやすくなりました。
本当にありがとうございました！
ふにゃこふにゃお様
コメントありがとうございます。励みになります(^^)/ お役に立てて良かったです。
いつも「もしも簡単リンク」の表示が不満でした。ボタン感覚が大きすぎて、スマホだとめちゃくちゃ長さをとるんですよね。
たくさん商品を紹介したい時は特に目障りで。
それで検索したら、こちらの記事を発見し、一発でとてもスマートな見た目になり大満足です！本当にありがとうございます！！
3つのバナーを表示させた時、「YAHOOショッピング」のバナーが2行になってしまう現象も解決することはできるのでしょうか？
「YAHOOショッピング」は文字数が多いので、2行となってしまうのですが、2行→1行に減らせないかと思っております。