2021.01.19  2021.04.04

Googleアドセンス広告がCSSで調整できない件について

皆さんこんにちは!マコブログです!
本日はGoogleアドセンス広告を自前のCSSで調整したいとき、なかなか変更されない件について話していきたいと思います。



こちらの公式この通りに作業してもうまくいかない人にだけ今回の解決方法を紹介したいと思います。(試していない方はまず公式ドキュメントを見ましょう)

広告ユニット作成時、広告サイズはレスポンシブ

アドセンス管理画面から広告ユニット作成時、右上に広告サイズという選択項目がありますが、こちらは今回のCSSが効かない原因にはなりえないので通常通り、「レスポンシブ」を指定してください。

サマリー>全般設定で広告の自動最適化はONの状態でOK

他サイトでは「自動最適化をOFFにすることでサイズが変更できます。」と書かれている記事もありましたが、自分は自動最適化をONの状態でも可能でした。

原因は「data-full-width-responsive」という属性

おまたせしました。
こちらの「data-full-width-responsive」が悪さをするらしいです。

上記の設定で、ユニットを作成し、Adsコードをコピーすると、data-full-width-responsiveという属性に「true」という値が入っていることが確認できると思われます。
このdata-full-width-responsiveという属性をtureにした場合、広告の中身(iframeタグの中身)を画面幅によって自動で最適化するような仕様になっておりました。

これが原因で、いくら自前のCSSで調整をしても、ブラウザ側のJavaScriptで上書きされ、一向に大きさが変わらなかったのです。

data-full-width-responsiveをfalseにする

解決方法としましては、上記で紹介したdata-full-width-responsiveという属性を、「false」に設定することで、画面幅に応じてブラウザ側のJavaScriptに邪魔をされることなく調整ができると思われます。(falseにした時点でCSSを触る必要がないほど画面幅に応じて最適化されているとおもいますが)



まとめ

いかがでしたか?
今回は、Googleアドセンス広告を自前のCSSで調整したいとき、なかなか変更されない件についてお話していきました。
折角アドセンスに合格しても、広告のせいでサイトのデザインが崩れたら悲しいですよね。

周りで同じような悩みを持っている人がいたら是非この方法を紹介してあげてください!

それでは!今回はここまで!

こちらの記事も是非チェックしてみてください↓
WordPress UpdraftPlusを使って自動バックアップを取る方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →