【wordpress/Luxeritas】スマホでレスポンシブadsenseバナーの左右が切れる場合の2つの対応方法

【wordpress/Luxeritas】スマホでレスポンシブadsenseバナーの左右が切れる場合の2つの対応方法

wordpressに移行してから、気にはなっていたけど
面倒でほったらかしにしていた、表題の件です。

本日、対応しましたのでメモがてら、記事にしておきます。
使用してるテーマはLuxeritas(ルクセリタス)です。

まずは表題の事象についてですが。
スマホ(縦)で、ページ上のアドセンスバナーの左右が切れてしまう問題です。

2019-02-09_03h49_49

ちょっと広告の表示例を出しましたが、上記のような感じ。

検索して色々調べた結果、
そこそこ、悩んだ末、2つの対応策を見つけ、
どちらの対応策でも、左右が途切れる問題は解決しました。

この2つの対応方法は、
バナーをどういうふうに表示したいかで
使い分けるのがよいと思いました。

1つめは、左右の途切れを解消後、左右に空白は無く、全幅でバナーを設置したい場合
2つめは、左右の途切れを解消後、左右に空白を持たせ、バナーを設置したい場合

ぼくがやりたかったのは、2つめのバナー設置だったのですが、
左右の途切れの解消方法を調べていた過程で、
まず1つめの方法を知り、試したものの、バナーが横幅全体に表示されるのが嫌で、
CSSの調整を試してみてもバナーの左右に空白を入れることができなかったため、
再び調べて、2つめの方法にたどり着きました。

両方とも知っておいて損はないと思いますので、
両方紹介しておきますね。

【1つめ】左右の途切れを解消後、バナーの左右に空白を設けず、ぴったり全幅でアドセンスバナー(レスポンシブ広告)を設置したい場合の対応方法

style.cssに以下を追加。(wordpress場所 Luxeritas ⇒ 子テーマの編集)

/*スマホde adsenseの隅っこが切れる対応*/
@media screen and (max-width: 500px){
.ps-widget {
overflow: visible;
}
}

@media ~は、デバイス画面の横幅が500pxまでなら、というような意味です。
スマホの横幅を想定してます。

overflow: visible;の追加で解決ってのは
wordpressで共通している気はしますが、
適用対象の、.ps-widgetってのはLuxeritas テーマ特有の指定方法かもしれません。
調べたわけではなく、あくまで想像ですが。

これで左右の途切れはなくなり、アドセンスバナーが横幅いっぱいに表示されます※

※アドセンスデフォルトコードの場合

【2つめ】左右の途切れを解消後、左右に空白を持たせて、アドセンスバナー(レスポンシブ広告)を設置したい場合の対応方法

アドセンスのコードを修正します。(wordpress場所 外観 ⇒ ウィジェット ⇒ 任意のアドセンスユニット)

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXXXX”
data-ad-slot=”0000000″
data-ad-format=”auto”
data-full-width-responsive=”false”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

ポイントは、
data-full-width-responsiveの設定。
これは広告をデバイス横幅全体で表示するかどうか、の設定です。
デフォルトではtrueとなっているので、falseに書き換えます。

これで左右の途切れがなくなり、バナーの左右にも空白が入ります。

バナーの左右の空白については、CSSの指定に依ります。

なお、そもそもなぜスマホでアドセンスバナーの左右が切れてしまっているのか?
の理由にもなってくると思うのですが、
このアドセンスのdata-full-width-responsive項目の設定が関連していると思われます。

– アドセンスの設定では、バナーを横幅全体で表示となっている。
– サイト上のCSSの設定では、バナーの左右に空白が入るような指定になっている。

この2つの指定のうち、下のサイト上のCSSの設定が悪さをして、
バナーが切れてしまう事象につながっているような気がします。

data-full-width-responsive =”true”のままで
CSSが邪魔をして左右を途切れさせてしまう問題を解消する方法が
1つめの方法なのだと思う。

テスト環境:WordPress 5.0.3、テーマ:Luxeritas