自動広告を使っていたのですが、配置やサイズが気になって一旦すべての自動広告をオフにしました。
そこでタイトル下に自動広告の代替としてレスポンシブ広告を設置しました。
しかし、PCやタブレットで大きく表示される広告は好きなのですが、スマホで見た場合に肥大したサイズのレクタングルが表示されてしまう事には納得できない。
今一度、現状を確認して少しでも改善したいと思う。
- 横長タイプのレスポンシブ広告がスマホ画面ではレクタングルの広告になってしまう
- タイトル下でレクタングルになった広告がスマホ画面を大きく覆っている
- スマホ画面ではタイトル下の広告をせめて300×250くらいの広告を表示させたい
- 今回試したコードのまとめ
横長タイプのレスポンシブ広告がスマホ画面ではレクタングルの広告になってしまう
タイトル下に設置した横長タイプのレスポンシブ広告がPCで表示した場合、縦280pxと少し厚くて気に入っているのですが、スマホ画面で確認すると横長を特徴としないレクタングルの広告になってしまう。縦に印象を与えない横長という特徴がスマートに見せることが出来る。それが横長タイプの広告の良さだと思うのですが、レスポンシブを扱うとスマホではレクタングルになってしまう。
レスポンシブの広告は、コードを作成してそのまま設置するだけ。後は閲覧する端末次第で勝手にサイズ変化してくれるのですから楽で良い。
しかし、そんなレスポンシブ広告も思い通りのサイズになってくれない事がよくあるので、広告関連での悩みの原因の一つになっていたりします。
タイトル下でレクタングルになった広告がスマホ画面を大きく覆っている
スマートに見せたく設置した横長タイプの広告が、スマホからの閲覧では画面を大きく覆うようなレクタングルの広告になってしまう。この件はアドセンスの設定でディスプレイ広告を横長タイプに設定し、広告サイズをレスポンシブで作成しても、スマホ画面ではレクタングルをレスポンシブで表示してしまう。
つまり、縦が厚すぎる、縦に広すぎる、スクエアタイプと言っても良いくらいの大きな広告が表示されてしまう。
広告コードをホリゾンタルに設定しても結果はいまいちだった
レスポンシブ広告のコードにはdata-ad-format="auto"があり、このautoの部分をdata-ad-format="horizontal"に変更したらスマホでも横長タイプになるのではと思い出し、試してみたけど結果はいまいちだった。
しかし、縦が狭い横長タイプのレスポンシブ広告を使いたい方にはオススメかもしれない。デメリットとしてはスマホ表示では広告の種類が少ないのか非表示になることもしばしある。
スマホ画面ではタイトル下の広告をせめて300×250くらいの広告を表示させたい
ここからが本題、スマホ画面の広告サイズを最適化。- スマホ画面から閲覧すると画面を大きく覆うような広告のレクタングル化を防ぎたい。
- 広告の設定画面で横長タイプにしてもこの件は無効化され、広告コードにホリゾンタルを指示するとPC側の表示に納得がいかない。
結局レスポンシブを捨て、広告コードにサイズ指定をした方が手っ取り早い。
レスポンシブの設定をもう少しアドセンスの設定画面から調節できたら良いのに…とはいつも思う。
スマホ画面へのサイズ指示を横width100%にし、縦height250pxにする
スマホ画面への広告サイズを指示する為には他の画面へのサイズ指示もしなくてはなりません。※コード改変例
.mihon-codeは仮。広告ユニットの名前をそのまま添付すると分かりやすい。
7番目の広告ユニット名を、2・3・4・8段目に添付。
<style> .mihon-code { width: 100%; height: 250px; } @media screen and (min-width: 768px) { .mihon-code { width: 768px; height: 280px; } } @media screen and (min-width: 1024px) { .mihon-code { width: 1024px; height: 280px; } } </style> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- mihon-code --> <ins class="adsbygoogle mihon-code" style="display:inline-block" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"</ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
widthに100%とサイズ指示するとheight: 250px;に合わせたレクタングルの広告だけではなく、指示サイズ内にテキストのみの広告も表示されるようになる
仮に.mihon-code { width: 100%; height: 250px; }と指示すると、300×250のレクタングル広告だけではなく、縦250pxに合わせた指示サイズ内にテキストのみの広告も表示されるようになり、広告の非表示が激減する。また、縦250px以内をきちんと保持しつつ、768px未満の横サイズに合わせて広告を表示してくれるので、指示した範囲内でレスポンシブの動作をしてくれる。もちろん表示される広告の中には300×250サイズのレクタングルタイプの広告も含まれる。
表示確認
デベロッパーツールを使い、試しにwidth600pxという中途半端な画面サイズで確認したところ、縦250pxを保持しつつ横に対しての占有率100%の広告が表示された。
レクタングル化した場合は下の画像の様に表示される。この場合も縦250pxを確認できた。横のサイズが大きい画面ほど、300×250のレクタングル広告ではなく、横に少し拡がったレクタングルタイプの広告が表示されるようです。
補足
@media screen and (min-width: 768px) { .mihon-code { width: 768px; height: 280px; } }コード内の上記のコード部分の動作は、下の画像の様な768×280以内の広告が表示される場合もある。
@media screen and (min-width: 1024px) { .mihon-code { width: 1024px; height: 280px; } }
また、上記のコード（PC画面を想定したサイズ）では、下の画像のような現象は確認できていない。
ダブルレクタングルとの代替
ダブルレクタングルをそのまま設置し、スマホで表示するとレクタングルが縦に二個並んでいるのをよく見かけます。スペースが余っているためにダブルレクタングルを設置している場合、今回試したコードのサイズ数値を工夫すると、広告を二個並べることなく空いたスペースを活用できると思う。
また縦長タイプの広告も同じような事が言える。PC画面で表示する300×600の様な広告も、スマホ画面では300×250のサイズで表示することが出来る。
今回試したコードのまとめ
- 768px未満の画面サイズでは縦250pxの横サイズを画面に合わせた広告を表示。
- 768px以上の画面サイズでは768×280以内の広告を表示。
- 1024px以上の画面サイズでは1024×280の広告を表示。
この記事のタイトルの一部にもしたスマホ画面の広告サイズを最適化とは、ファーストビューの印象を改善し、タイトル下の広告への誤クリックを回避することです。
元々はアドセンスの設定時に、タイトル下にプレビューでは確認できる自動広告が、実際には表示されないことから始まっています。今回試した広告コードの内容は、他のスペースでも色々と応用が出来そうなのでやってみて良かったと思ってます。
広告サイズに関して悩んでいる方がいれば、是非小さな参考までに。
それと改めて言うことではないかもしれませんが、スマホ画面の広告サイズを最適化とはあくまでも主観です。