mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

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


もしもアフィリエイトのかんたんリンク、使い勝手が良くて便利ですよね。

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

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



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

スマホ画面で見た時の広告サイズが大きい。

下の画像の様にスマホ画面を覆いつくしてしまう。


このスマホ表示そのままで使うにはちょっときびしい。

これだったらかんたんリンクはやめて、商品リンクから広告を作ろうと思ってしまう。

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



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

カスタマイズは二段階あるので興味のある方は下まで目を通して下さい。



縦幅、約25%減のスマホ表示

右側が修正を加えた結果です。

スマホから閲覧した時の特徴

メーカー名と型番の部分が自動的に非表示になります。更に余白の調整をしています。

商品名の所に「商品名:メーカー名」とテキストの編集をするのも良いと思います。広告コード取得時に簡単に出来ます。



広告コード取得画面での編集

ペンマークを押すとテキストの編集が可能になります。実際に貼り付けるコードからもテキストの編集は出来ますが、削除ミスを防ぐ為に広告コードを取得する画面での編集をオススメします。



広告サイズに関係する文章

 広告には商品名にプラスしてアピールテキストをふんだんに入れるのでテキスト全体が長いモノが多いです。行が増えると広告サイズは大きくなります

広告内の過剰に長いアピールテキストは不要だと思います。


かんたんリンクのサイズを小さくするコード

  • 以下のコードを適応させると横幅480px以下の端末からの表示が変化します。
  • スマホからの表示に影響がある場所に入れてください。
  • 何かしらの用途で@mediaが既に入っている場合、コードが干渉して変化が見られない時があります。その場合はコードの貼り付ける場所を変えてみてください。
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-name {
 margin-bottom: 5px;
 font-size: 15px;
 }
 }
@media screen and (max-width: 480px) {
div.easyLink-box {
 padding: 10px 20px;
 }
 }
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-img p.easyLink-img-box span > img {
 max-width: 45%;
 max-height: 100%;
 }
 }
@media screen and (max-width: 480px) {
 div.easyLink-box div.easyLink-img {
 margin-bottom: 5px;
 height: 100%;
 }
 }
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-img::before {
 padding-top: 60%;
 }
 }
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
 margin-top: 10px;
 text-align: center;
 }
 }
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
}
@media screen and (max-width: 480px) {
.easyLink-info-maker {
 display: none;
 }
 }
@media screen and (max-width: 480px) {
.easyLink-info-model {
 display: none;
 }
 }


「Amazon」「楽天市場」「Yahoo!」と「で見る」を省いた横並びリンクを作成する事も可能ですが、読み込みに不備があるとレイアウトの崩れが生じるので、そのやり方はしていません。



もう一工夫したかんたんリンクのカスタマイズ

Amazonと楽天市場の二つのみを使う場合では、下記のコードを入れ替える事によって横並びにすることが出来ます。

@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
}

下のコードを先程紹介したコード一覧の上の部分(35~40)に入れ替えます

@media screen and (max-width: 480px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
 margin: 6px 6px 12px 6px;
 padding: 6px 0;
 display: inline-block;
 width: 45%;
 }
 }



提携会社の入れ替えは広告コード取得画面から簡単に出来ます。



この場合はYahoo!を非表示にしてしまいますが、かなり小さくなったと思います。




三社そのままでコードを入れ替えると下の画像の様になります。




更に見やすくコンパクトになった広告

  • 「Amazon」「楽天市場」「Yahoo!」の三社のままでももう一工夫したカスタマイズを加えると縦幅およそ30%減が見込めます。
  • 「Amazon」「楽天市場」の二社のみの場合にもう一工夫したカスタマイズを加えた場合は縦幅およそ35%~40%減が見込めます。

下の画像で確認してください。デベロッパーツールのiPhone6/7/8Plusで実際に自分のブログで表示させた様子です。

デベロッパーツールでは画面サイズが414*736となってます。そしてカスタマイズした広告のサイズが388*318です。スマホの画面縦幅に対して広告の縦幅が43%ほど占有してることになります。

※Webサイト自体の左右余白設定の違いで若干変化します。

ここまでコンパクトになると、スマホからよく見るレクタングル広告同様な使い方が出来ると思います。

しかし、扱う広告によっては広告画像がより小さく表示されます。20広告ほど表示のテストをしましたが、max-width: 45%の数値が一番妥当ではありました。初期設定は100%です。あまり大きくすると画像によっては見切れてしまいます。



記事別に広告の設定をする場合

記事内に<style></style>で囲ったカスタマイズコードを貼り付ける事で記事別に設定が可能です。

ただし、記事別に設定を保存した状態で「新たな記事の記事別設定が面倒になり」Webサイト全体に効果を与える設定を実行すると、貼り付けたコードが干渉し合いレイアウト崩れが生じる事もあります。

  1. 最初に紹介したカスタマイズコード
  2. もう一工夫したカスタマイズコード

※どちらかの設定でカスタマイズを統一する事をオススメします。


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

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


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


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


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



スマホ表示サイズを小さくして扱いやすく

アフィリエイトの効果としては大きさではなく小さくても視覚に入れば十分だと思い、余計なカスタマイズはせずに何とか小さくならないかとカスタマイズしてみました。

元のデザイン性を残しつつぎゅっとシンプルに少し詰め込みたいそう思ったカスタマイズです



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



スマホ表示サイズのカスタマイズをよりシンプルに

下記のコードはメーカー名と型番の表示をスマホからの閲覧時自動的に非表示にするコードです。少しだけシンプルになれば良いという方はこちらでも良いかもしれませんね。

@media screen and (max-width: 480px) {
.easyLink-info-maker {
 display: none;
 }
 }
@media screen and (max-width: 480px) {
.easyLink-info-model {
 display: none;
 }
 }