増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

WordPressのAdsense広告をスマートフォン向けに最適化しました

   

最近いよいよ寒くなってきて、布団からなかなか出られなくなってきました。

さて、本題に入ります。

WordPressを使ってこのブログも作られていますが、最近ではレスポンシブ対応というテーマが増えてきました。

レスポンシブとは・・・マルチデバイスに対応するための手段の一つです。今までのようにデバイスを判断してコンテンツを出し分けるのではなく、画面の大きさ(表示サイズ)等でコンテンツを最適化することで、マルチデバイスに対応することができます。

このブログもレスポンシブテーマを使用していますが、Google Adsenseの広告を入れてしまうと、横幅が大きいままだったりして、表示が崩れてしまいます。

このブログでも対応した方法をノウハウとして公開しちゃいます。

スマートフォンかどうかで広告表示を切り分ける

広告の大きさを選んで表示をしますが、例えばリンクユニットなどの場合、PCなど大きな画面に表示した時には横に広がる形にしたいが、そうするとスマートフォンなど小さい画面を持つデバイスで表示するとサイトに無駄な横スクロールが出てしまいます。スマートフォンなど小さい画面のデバイスでは縦にリンクが並ぶ形に広告ユニットをもう一つ作り、下記コードで表示を出し分けます。

WordPressには便利な関数がたくさん存在しております。
その中でwp_is_mobileという関数は、モバイル端末かどうかで分岐をすることができるので、スマートフォン用にサイズの小さい広告コードを作成し、wp_is_mobileがtrueの場合の時だけ表示されるように設定します。

こうすることで、スマートフォンなど画面が小さい時には小さい広告を表示し、それ以外は通常の広告を表示することができます。

また、もう一つの手段として、レスポンシブ対応広告ユニットを作成するという方法もあります。

たとえばGoogleAdsenseの場合、新規広告ユニット作成>広告のサイズの中に、レスポンシブ広告ユニットというものがあります。

これは広告自体をレスポンシブ対応させたもので、本来はこちらを使うのが良いかと思います。

ただし、まだまだベータ版ということもあったのと、広告の種類が選べないので、私は上記WordPressの関数で解決するようにしました。

将来的にはGoogleがシステム的に解決してくれると思いますが、今は上記方法で解決しました。

他に良い方法をご存知の方がいましたら、是非ご教授下さい。

 - その他