スマホの横幅が320px以下でもAdsenseモバイルバナーをはみ出さずに表示させる方法紹介

どうもIT大好きFwwwです。

最近adsenseのパフォーマンスが悪くなってきており、

4つ以上の配置をいろいろテストしています。

そして、この前adsenseの担当者にメールでスマホでの最適な配置を聞いたところ、

パンくずリスト上に320×100のモバイルバナーを挿入すればいいと指摘していただいたため

挿入していました。

しかし、ふとある日iphone5sで記事を読み返していた際に、

はみ出している(Overflow)ことがわかりました。

仕方ないことだと思い放置していましたが、

やっぱりはみ出していることが気になったためこの問題をJavaScriptで対処してみました。

スポンサーリンク

横幅320px以下のスマホでもadsenseのモバイルバナーをはみ出さずに表示させよう

大抵のテーマ(テンプレート)の場合、

サイドバーでないメインカラムにはpaddingかmarginが設定されています。

今回はその親要素に逆らってpadding(またはmargin)を0pxにして、

JavaScriptで画面幅(width)が320px以上の場合だけそのクラスを削除するという流れで導入していきます。

まずは、adsenseのモバイルバナーを挿入する際のHTMLの雛形です。

Wordpressの場合は次のようにして、スマホの場合だけ読み込むようにします。

そして、adsenseのモバイルバナーをはみ出さずに表示させるCSSはこちらです。

このままでは、画面幅(width)が320px以上の端末でも上記ソースが実行されてしまい、

右側(right)に余白が空いてしまい不自然に見えてしまいます。

なので、下記のスクリプトで横幅が320pxより大きい端末では、

該当クラス(ad_small)を削除させます。

それが、下記のスクリプトです。

※あらかじめjqueryは読み込ませているという前提です

WordPressを使用している場合は、下記のソースのようにスマホ且つ投稿ページだけで読み込ませると、

余分なデータを読み込まないようにできます。

これで、横幅(width)が320px以下のスマホでもAdsenseのモバイルバナーをはみ出さずに表示させることができます。

まとめ

WordPressを通してサイトのデザインをカスタマイズしていると、

どうしてもJavaScriptをいじる機会ができてしまいますが、

雛形さえ分かれば僕みたいにサンプルコードしかいじったことなくてもなんとなくできるようになります。

今回記事にしたソースコードたちを編み出すのに2時間ほどかかっちゃいましたが、

自分にとってはJavaScriptのスキルは少々ついたかなと思います。

最後まで読んでいただきありがとうございました。

スポンサーリンク

シェアする



URLをコピーする

関連記事