Googleアドセンスを改変するとポリシー違反になってしまいますが、改変できる広告もあるって知ってました？
今回、その改変することができるというレスポンシブ広告ユニットをカスタマイズしてみようと思います。
▼目次
Googleアドセンスにはこのようにいくつか種類があります。
- 300×250
- 320×100
- 336×280
- 300×600
- 728×90
この中からWEBページに表示させたい広告を選ぶことができます。
これらの広告ユニットはパソコン・タブレット端末・スマホと表示されるデバイスが変わっても指定したサイズが表示されることとなります。
しかしこれだと4インチのスマホなど比較的小型の画面サイズの端末だと、336×280のレクタングル(大)では横幅がはみ出てしまうのです。
例えばめちゃログは記事中にレクタングル(大) を設置しているのですが、パソコンやタブレット端末、大きめの画面サイズのスマホならこれが問題ないのです。
これを4インチ画面のスマホで確認してみるとスマホなのに左右に少しだけスクロールできる空間ができてしまうのです。
レクタングル(大) だと4インチ画面でははみ出してしまうんです。
はみ出した分だけ横に余分な領域ができてしまいます。これって訪問ユーザーからしたら快適にスクロールできない事から見づらくて離脱の直接の原因となってしまいます。
試しにGoogleアナリティクスの「ユーザー」→「ユーザーの環境」→「ブラウザとOS」→「画面の解像度」で確認してみると当サイトでは「320×568」が上位にランクインしていました。
レクタングル(大)のサイズと確認してみると一目瞭然です。広告サイズがスマホ画面を16pxオーバーしているんです。
- 「レクタングル(大)」336(横)x280(縦) → 320(横)x568(縦)
このサイズはiPhone5のサイズのようです。iPhone SEもこのサイズですね。
これってかなり前から気づいていて、早く対処しなきゃと思っていたんですがなかなかできなかったのです。表示される端末によって出力コードを切り替えるには
https://mechalog.com/wpismobile-switch
https://mechalog.com/media-queries
このような方法があります。アドセンス広告だってこの方法を使えば何も問題なく解決するんですがショートコードで広告を表示している場合はかってが違います。
ショートコードは「function.php」というあまりいじりたくない特殊なファイルに記述するので「wp_is_mobile」のコードを記述しただけではうまくいかなかったんです。
「wp_is_mobile」のコードを応用するとか方法はあるみたいですが、だいぶ調べましたがパソコンとスマホ表示を切り替える位の方法しかないようなんです。
5.5インチなどのスマホ端末ではダブルレクタングル(大)を表示、4インチ程の端末ではそれ以下の広告サイズを表示させたかったので詰んでしまってそのまま放置している状態でした。
レスポンシブ広告を修正
それがレスポンシブ広告なら改変することができることを知ったので試してみることにしました。
レスポンシブ広告って端末によってサイズを変えてくれるので端末のサイズをはみ出るということはないのですが、自分が表示させたい広告サイズが思い通りに表示されないんです。特にパソコン表示がかなり小さい広告になってしまいます。
この場合アドセンスコードの「data-ad-format=”auto”」を「data-ad-format=”rectangle”」に変えるだけでレクタングルを表示させることができます。
data-ad-client=”ca-pub-0000000000″
data-ad-slot=”0000000000″
data-ad-format=”rectangle“></ins>
<script>
……
実際「rectangle」に変えたアドセンスコードを確認してみたところ、4インチの小型サイズスマホでレクタングル(中)、5.5インチのスマホでレクタングル(大)と広告表示分けすることができました。
しかし、パソコンの表示が680×280とかなり横長な広告になってしまいました。これでもいいという場合はこれでいいですが、できればパソコンでも効果的なレクタングル(大)を表示させたいところ。
▼これが理想 (記事中 / ショートコードの場合)
- 「スマホ(4インチ)」 → レクタングル(中) / 300(横)x250(縦)
- 「スマホ(5.5インチ程)」→ レクタングル(大) / 336(横)x280(縦)
- 「パソコン」→ レクタングル(大) / 336(横)x280(縦)
やはりメジャーなレクタングル(大)は広告種類も豊富だと予想できますからね。他の方法を模索してみました。
CSSに追記する
この場合、CSSに最大幅を追記したら解決できました。
例えばこんなコードを指定していたとします。この中に「max-width: 336px;」を追記すればOKです。
text-align: center;
margin-left: auto;
margin-right: auto;
}
このようにします。
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 336px; // 追記
}
まとめ
ある意味ずっと悩みの種であったショートコードの広告表示わけが、今回無事解決できました。めちゃスッキリです。
この調子で次回からも問題解決していきたいと思います。
コメント