144737040706168343177_momo_60x60.jpg ほど良い情報をお届けしたい

スマホ画面のファーストビューの広告の高さ調整 〜Googleアドセンス〜

このブログはGoogleアドセンスを張り付けておりまして、今回はスマホ画面のファーストビューに見た目重視の広告ユニットを張り付ける方法を紹介したいと思います。

レスポンシブの広告ユニットで320X50のバナーが出る場合の処理の一案です。


※尚、当ブログはデザイン変更が多くリンクユニットや他に変えることもあります。記事の内容はあくまで参考としてお考え下さい。

まず、スマホ画面限定の話なので、私の使用させていただいているウェブリブログは“PC画面”と“スマホ画面”ではURLが異なりますのでPCで見ている人はスマホ画面も見て下さい。
https://s.webry.info/sp/kotobuki1174takasui.xyz/201808/article_1.html
※以後、紹介するお話はスマホにより機能しない事が判りました。やはり画面幅ごとに設定するのが確実なようです。最後におまけとしてこのブログのスマホヘッダーの設定を記載しておきます。(2018/08/16)

私のブログはスマホ画面のファーストビューにレスポンシブの広告ユニットを張り付けていまして、以前は「data-ad-format="auto"」の「"auto"」を、アドセンスのヘルプにある『レスポンシブ広告のタグパラメータの使用方法 > 一般的な形状を指定する場合』にならって「"horizontal"」にしてテキスト広告のみ表示する設定をしておりました。



なぜかというと5インチ程度の画面のスマホを縦にしてみている場合、

320X50(高さが50ピクセル)のバナー(ディスプレイ)広告が表示された時なのですが、なぜか高さが100ピクセルの表示スペースになり、320X50の広告がスペースの上部に表示され下部が空白になり、デザインが非常に気になるためでした。



今回なんとか320X50のバナーが出た場合に高さが調節されないかと「style="display:block;height:auto"」としたり[「margin: auto;」や念のため「margin: 0 auto;」を付けたりしましたが、まったく調整されません。

私が色々と行った限り、結論は「見栄えを気にしない」か、「高さが100ピクセルの広告はあきらめる」て高さは固定するに至り、画面の幅ごとに高さを固定する方法(参考:
ウェブリブログに広告を貼り付ける場合 〜運営規約等を見ました〜)を取ろうとしましたが、他の方法を気づきました。

ちょっとイレギュラーな方法です。

一般的な横長(horizontal)な広告のサイズなのですが320X50・320X100・468X60・728X90で、「100を除けば90が最大やん」と思って、一度「style="display:block;height:90px"」(data-ad-format="horizontal"></ins>も編集しています)として様子を見てみようとしたら、私の5インチ画面のスマホだと高さ50ピクセルになっている?


それでスマホ画面を横向きにすると広告の高さが60ピクセルに可変した?


画面キャプチャの用意は出来ませんでしたが、これより横幅のあるパッドで見たら高さが90ピクセルになっていました。

それでこの設定を90ではなく100(height:100px)にすれば良いのではないかと思いしてみたのですが、この場合は100ピクセルに固定されてしまい、思った動きをしてくれませんでした。可変するのは「99px」までのようです。

取り合えず、高さ調節の変更のみなのでGoogleアドセンスのポリシー違反にはならないはずです。

現状の仕様(2018/08/08現在)では、下記のコード変更をすれば私のブログのような表示をさせられるようです。


・style="display:block;height:90px"


・data-ad-format="horizontal"



それと今のコードだと「data-full-width-responsive="true"」の1行が追加となっているのでこれを「"false"」に

・data-full-width-responsive="false"



これをしないと「data-ad-format="horizontal"」としていてもでかい広告が表示されました。

最近Googleアドセンスをやりだして、"horizontal"にしたいのにならないって方は、ここを見られてはと思います。
以前はこの一行がデフォルトでは入っていませんでした。

この設定で320X50・320X100・468X60・728X90のバナーが出ている事はGoogleアドセンスのパフォーマンスレポート > 詳細レポート > クリエイティブサイズで確認しております。


ファーストビューにでかい広告を表示させず、変な空白が出ないようにしたい私としてはこれで満足です。

--------------------
2018/08/16追記
おまけ
レスポンシブ広告において、横幅750ピクセルまでは横(width)は画面いっぱいで、高さ(height)60ピクセル、横幅750ピクセル以上は高さ(height)90ピクセルです。

<style>
.example_responsive_1 { width: 100%; height: 60px; }
@media(min-width: 750px) { .example_responsive_1 { width: 100%; height: 90px; } } 
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

バックが黄色部分をご自身のGoogleアドセンスのコード等にしてください。

参考URL(Googleアドセンスのヘルプページを参考に編集しています)
https://support.google.com/adsense/answer/6307124?hl=ja

※2018/08/16の情報です。仕様等変更となった場合はご了承ください。
--------------------

ではでは、ご参考まで。
広告



【こんな記事も読まれています】



パンチが効いていれば人気ブログランキング

(^ω^`)ご覧いただきありがとうございます
ブログ主:Takasui

広告

144737040706168343177_momo_60x60.jpg ブログ “ 気になる… ”

 

ほど良い情報をお届けしたい

見た目は子犬!頭脳はおっさん!

なブログです(´・ω・)


【Amazon.co.jpアソシエイト】


Amazon:本日のタイムセール

Amazon:ヤスイイね(特価食品・日用品)

最近の画像付き記事