もしもアフィリエイトかんたんリンクのスマホ表示サイズをカスタマイズ

公開日:2019/07/17　最終更新日:2020/1/29

---

もしもアフィリエイトのかんたんリンクは使い勝手がよく、広告をとても手軽に、そして簡単に扱うことができます。

しかし、僕はほとんど使っていません。

便利なのに何故使わないのか。

もしもアフィリエイトかんたんリンクのスマホ表示は大きすぎる

大きすぎる！縦に長い！スマホ画面で見た時の広告サイズが大きい！と、そんなことを思った方は結構いるのではないでしょうか。

現在、もしもアフィリエイトのかんたんリンクは運営が表示の改良をしてくれたおかげで、広告内の商品画像の大きさを大小と切り替える事ができるようになりました。

ですが、実際に確認してみると商品画像を小さくしても下の画像のようになる。テスト表示したスマホの画面に収まりきらず。

この状況を気にする人はいると思います。広告を扱う側も、閲覧する側も。
このスマホ表示そのままで使うにはちょっときびしい。これだったら、かんたんリンクは止めて、商品リンクから広告を作ろうと思う人も出てくるはず。

 Amazonの商品リンクの広告なら画像とテキスト付きで半分のサイズで済みます。

しかし、工夫次第でもしもアフィリエイトかんたんリンクのスマホ表示のサイズを少し小さくする事が出来ます。

その工夫をデザインを変更するコードに関して苦手な人でも小技として扱えるようになって頂けたらと思います。

かんたんリンク広告内の文字列三点の見直し

かんたんリンクの広告内の文字列には、メーカー・商品説明・型番の三点が存在しています。広告によっては、商品の説明文しか存在しない物もありますが、先ほどの上の画像を見るとしっかりと文字列三点が存在しています。

この文字列三点の存在がスマホ表示になると広告自体を縦に大きくしてしまいます。ここを見直すと簡単に変化を感じられると思います。

HTMLソース（サイト掲載用）内の文字列削除・調整

メーカー・型番。この二点は商品によっては存在したり、しなかったりとする部分です。ここを完全に非表示にするとスッキリします。実際にかんたんリンクの広告コード内の文字列を削除しましょう。

また、長いと感じる商品説明文も調整しましょう。しかし、過度の商品説明文の変更はお勧めできません。元からある商品説明文内の商品アピールには不必要だと感じる所だけ取り除くことをお勧めします。

商品説明文の変更

商品説明文の変更だけはコード内を触らずとも、コード取得画面の商品説明文にマウスカーソルを乗せるとペンマークが現れ編集できるようになります。

非表示にしてくれるコード

とりあえずメーカーと型番の部分を非表示にしたい。しかし、コード内を自分で削除するのはちょっと…なんて思われている方には、その部分だけ非表示にしてくれるコードがあります。

p.easyLink-info-maker {
 display: none;
 }
p.easyLink-info-model {
 display: none;
 }

広告内の文字列に手を加えた物と比較するとこれだけ違いが出てきます。

中をスッキリさせた見栄え…そんなパターンとなります。

商品説明文の文字色・文字サイズの変更も可能です。文章を太字にすることもできます。color・sizeの数値を好きに変更できます。太字を止めたい場合はfont-weight: bold;の部分を消してください。

p.easyLink-info-name a {
 color: #000;
 text-decoration: none;
 font-size: 17px;
 font-weight: bold;
}

はてなブログでこのコードを使っていますが、はてな記法で記事を作成し、広告を貼りつけた記事内の最下部にコードを<style></style>で囲って記事単発でカスタマイズを完了させています。

他の方法では動作確認をしていないので、試される方はプレビュー画面の記事以外の所の確認もしてください。

ボタンの色を変更

ボタンの色も変更できます。ちょっとした変化もたまには良いかもしれません。

div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
 background: linear-gradient(45deg, #f70f0f, #f79821);
 }

下記はタグの書き換えの問い合わせについて【もしもアフィリエイトサポートデスク】からの返答。

この度はお問い合わせいただき、誠にありがとうございます。
【もしもアフィリエイト】サポートデスク担当です。

お問い合わせ下さいました件、下記に回答させていただきます。

原則、タグの書き換えは推奨しておりませんが、
知識がおありになるのであれば、ご自身の責任の下、
書き換えていただいても特に違反とはしていません。

ただし、書き換えミスなどで
成果が発生しないなどの事象が発生しても
サポートの対象外となります。

まとめ

以前、この記事ではかんたんリンク内の余白の調整などにも触れていたのですが、そのあたりを今回はカットしました。

300*250のレクタングルに近づける様なカスタマイズを行っていたのですが、かんたんリンクのはずが手を加えることで全く簡単ではなくなってしまったからです。
その事を踏まえて、今回の記事更新ではかんたんリンクの手引きみたいな感じになったかもしれません。

全てのWebサイトで問題無く適応されるかまでは確認できていません。ご利用の際は元のコードのバックアップをお忘れなく。

リンク

※この記事内で紹介したコードを全て使った実際の広告表示がコレ↑。まあ、これでもスマホで見るとデカい。