楽天アフィリエイトの広告がスマホの画面からはみ出ないようにする方法を解説します。
楽天アフィリエイトの広告をブログに貼ると、パソコン画面では気づかないのですが、
スマホで見てみるとはみ出ます。
楽天アフィリエイトの広告はレスポンシブではないので、サイズを調整しなければなりません。
最近はスマホでブログを読むユーザーが多いので、スマホで見てもはみ出さないように設定していく必要があります。
楽天アフィリエイトの広告をはみ出さないようにする方法
楽天アフィリエイトの広告をスマホで見たときに、はみ出さないような丁度いい大きさに設定する方法は２つあります。
１．画像広告とテキスト広告を別々に貼る
一番確実にスマホの画面に収めるには、画像リンクとテキストリンクを別々に貼るのが一番。
まずは画像のみのリンクを作成します。
出来上がったのがこちら↓↓↓
次に、テキストリンクを作ります。
出来上がったリンクがこちら↓↓↓
5×20 All the BEST!! CLIPS 1999-2019(初回限定盤 Blu-ray)【Blu-ray】 [ 嵐 ]
これを２つ合わせると
5×20 All the BEST!! CLIPS 1999-2019(初回限定盤 Blu-ray)【Blu-ray】 [ 嵐 ]
こんな感じのリンクになります。
これをスマホで見てみると・・・
スマホで見た画面
ちょうどいい大きさに収まっていますね！
２．カスタマイズで調整する
次に、カスタマイズで調整する方法をご紹介します。
カスタマイズは右下にあるレンチマークをクリックします。
カスタマイズできるのは以下の項目になります。
①商品名を移動
商品名の位置は上か下にします。
下の場合
②価格の表示
価格が表示されるとこんな感じになりますが、
アフィリエイトリンクの場合は、価格が無いほうがクリックしてリンクに飛んでくれる可能性があるので非表示した方がいいですね！
なのでここはチェックを外します。
③商品名を最小で表示
商品名を最小で表示というのは、商品名が途中で見切れて中途半端な状態になります。
ここはチェックを外します。
④テキストを画像幅に合わせる
テキストを画像幅に合わせる、にチェックを入れないと
タイトルが長いと横に広がってしまいます。
チェックを入れると
ここはチェックを入れます。
⑤枠を表示
枠が入っていると、広告の周りに黒い線が入ります。
枠をなくすと
こんな感じになります。
これはどちらでもOKなのですが、今回は枠ナシで広告を作成するのでチェックを外します。
⑥楽天で購入ボタンを表示する
チェックを入れます。
⑦コメント編集スペースを追加
コメントは追加しないのでチェックを外します。
⑧色の選択を有効にする
サイトのカラーに合わせたりすることもできますが、
ここは今回はデフォルトのままにします。
カスタマイズの設定は以下の通りになります。
こうなります。
では実際に貼ってみます。
これをスマホで見てみると・・・
スマホで見た画面
ちなみに、楽天で購入ボタンを無くしたバージョンがコレ。
どちらもスッキリ収まっていますね！
楽天アフィリエイトの広告がはみ出ないようにする方法まとめ
楽天アフィリエイトの広告がスマホではみ出るときにできる対策を2つご紹介しました。
スマホユーザーが多いので、スマホのサイズに合わせて広告を設置していくとユーザービリティがアップしていいですね！