少し前にこんな記事 Google AdSenseをwp_is_mobile関数を使ってPCとモバイルで切り替えた際の覚書き を書いていたのですが、この記事では、文中にあるAdsenseをどうしようかなぁなんて呑気な感じで書いていて結局、CSSでごにょごにょしていただけで終わっていました。
あれから、1ヶ月もたたないうちに、Google Adsenseがレスポンシブデザインに対応していたようで、少し前にこのことを知り早速実装してみました。
レスポンシブデザイン対応を知ったのは、こちらの記事
Google Adsenseをレスポンシブに！！
今回は、文中にあるものだけをこの方法で実装しています。
実装！！
現在のAdsenseサイズは、468x60を使用しています。
iPhoneなどのモバイル端末の大きさ（400以下）になると、Adsense（300x250）に切り替わるようにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> /* 自分のAdsenseのID */ google_ad_client = "ca-pub-xxxxxxxxxxxxxx"; width = document.documentElement.clientWidth; /* 最初に表示させておきたいad_slotのID */ google_ad_slot = "1234567890"; /* 最初に表示させておきたいad_slotの幅 */ google_ad_width = 468; /* 最初に表示させておきたいad_slotの高さ */ google_ad_height = 60; /* 幅400以下ならif以下で指定されたad_slotを表示 */ if (width < 400){ google_ad_slot = "3456789012"; google_ad_width = 300; google_ad_height = 250; } </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> |
これで完成！
横長バナータイプではなく、スクエアタイプのモノに変わっているのが確認できました。
とっても簡単設置です。
ただ、上記の参考サイトにも書かれているとおり、レスポンシブデザインに対応とありますが、動的にサイズを変更してくれるわけではないようです。
試してみましたが、やはりポートレート表示からランドスケープにしてもリアルタイムでアドスロットの変更は出来ていませんでした。残念。
ですが、私みたいにプラグインを使用している方や、ショートコードを使って出力している方には少しの手間で出来てしまうこの対応はとっても嬉しい出来事かと思います。
とっても便利便利になって大満足となったわけですが、ふとこういうプラグインってもうあるのでは？という疑問が。
Google AdSense for Responsive Design - GARD
ということで、前回は頭の片隅にも浮かばなかったのですが、探してみるとあるものですね。
いつものようにインストールし、有効化したのち各サイズのad_slotのIDを記入し、
表示させたい場所に[GARD]とショートコードを書けばいいみたいです。
実際に使用していないので、詳細なことはわかりません。紹介と書いておいてあれですが、ごめんなさい。
ですが、気になる方はお試しあれ！！
