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

2019年2月9日2021年1月2日

wordpressに移行してから、気にはなっていたけど

面倒でほったらかしにしていた、表題の件です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事は役に立ちましたか？役立った役立たなかった
3 人中 2 人がこの記事は役に立ったと言っています。

Google Adsense