WordPressのテーマをレスポンシブテーマにされている方に吉報です!! Google Adsenseがレスポンシブテーマに対応しました!!

google

色々なサイトでwp_is_mobileで判別とかCSSで調整とかでレスポンシブに対応させていた記事がありましたが、何かGoogleアドセンス的にはアウトの感じでしたので、HaLPosTは取り敢えずは我慢してiPhoneでは、はみ出てしまう300×250を設置していましたが、この度Googleアドセンスがレスポンシブテーマに対応しました!!


Google Adsenseをレスポンシブテーマに対応させる方法

https://support.google.com/adsense/answer/1354736?hl=en&topic=1271508&ctx=topic#sourceid=aso&subid=ww-en-et-asblog_2013-05-23&medium=link

英語よく分かりませんwwwが一応コードを公開してくれています。
<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    width = document.documentElement.clientWidth;
    google_ad_slot = "1234567890";
    google_ad_width = 320;
    google_ad_height = 50;
        if (width > 500) {
        google_ad_slot = "3456789012";
        google_ad_width = 468;
        google_ad_height = 60;
    }
    if (width > 800) {
        google_ad_slot = "2345678901";
        google_ad_width = 728;
       google_ad_height = 90;
    }

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


日本語で丁寧に説明してくださっているサイトがあります。

http://okaoka.net/2013/06/06/adsense-esponsive.html

HaLPosTでは上記のサイト様のコードを使用させてもらい記事中のGoogleアドセンスを以下のように設定しました。
<script type="text/javascript">
    google_ad_client = "pub-123456789";
   /* ↑自分のAdsenseのIDを入れましょう */
    width = document.documentElement.clientWidth;
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */
    google_ad_slot = "123456789";
   /* ↑デフォルトとなるad_slotのIDを入れましょう */
    google_ad_width = 250;
   /* ↑デフォルトとなるad_slotの幅を入れましょう */
    google_ad_height = 250;
   /* ↑デフォルトとなるad_slotの高さを入れましょう */
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */
        if (width > 500) {
        google_ad_slot = "123456789";
        google_ad_width = 300;
        google_ad_height = 250;
    }
   /* ↓更に分岐。自分のサイトにあわせてどぞ。この例だと800以上なら次のif以下で指定されたad_slotを表示 */
    if (width > 800) {
        google_ad_slot = "123456789";
        google_ad_width = 336;
       google_ad_height = 280;
    }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
width(500と800)はGoogleさんの言う通りで始めていこうと思います。


サイドバーのGoogleアドセンスは以下のように設定
<script type="text/javascript">
    google_ad_client = "pub-123456789";
   /* ↑自分のAdsenseのIDを入れましょう */
    width = document.documentElement.clientWidth;
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */
    google_ad_slot = "123456789";
   /* ↑デフォルトとなるad_slotのIDを入れましょう */
    google_ad_width = 250;
   /* ↑デフォルトとなるad_slotの幅を入れましょう */
    google_ad_height = 250;
   /* ↑デフォルトとなるad_slotの高さを入れましょう */
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */
        if (width > 500) {
        google_ad_slot = "123456789";
        google_ad_width = 300;
        google_ad_height = 250;
    }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
最大サイズが300×250ですので、2パターン設定しています。


いかがだったでしょうか!? 取り敢えず幅はこれから様子見て調整して行きたいと思います。こちらのサイトでGoogleアドセンスがどのように表示されているか確認することが出来ます。でもまぁ、やはり現物で確認したいところです。



Googleはいずれ対応してくれると思っていましたが、予想より早くてかなり嬉しいです!! 悩みが1つ減りましたwww

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です