WordPressのアドセンスの広告サイズをパソコンとスマートフォンで変更する方法
ちわーす。
今日は中秋の名月らしいですよ、かっぱふぅ（ @kappafoo ）です。
さて、みなさんのところは台風はどうでしたか？
うちは雨は降りましたが、そこまで風が強くなることもなく問題なしです。
さて、昨日の「固定幅＋リキッドレイアウト」に引き続いて、予告したとおりパソコンとスマートフォンでグーグルアドセンスの広告サイズを変える方法を記事にしてみたいと思います。
By: Betsy Weber
名付けて「スマホで変更、アドセンス広告サイズ」．．．ん、そのまんまですね、名付けるほどもなかったかも．．．
レスポンシブデザインのテーマにして困ることの１つは、テンプレートが１つであることから広告のサイズが１つだと、パソコンとスマホの画面の大きさの違いから、パソコンに合わせるとスマホで全部が表示できない、そうかと言って、スマホに合わせるとパソコンでは表示ザイズが非常に小さいということになってしまいます。
これを防ぐために、一昨日の半日調べました。そうしたら「みはら.com」さんの「レスポンシブデザインのWordPressでAdSenseを切り替える方法」がドンピシャリでした。
［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com
せっかくスマートフォン対応のためにレスポンシブデザインを採用したのであれば、このAdSenseもきっちりと収めたいっていうのがスジじゃないでしょうか？ということで、スマートフォンなどで表示されたときに、ちょっと小さいAdSenseを表示するようにコードを書き換えましょう。
概要は「みはら.com」さんのページに任せるとして、端的に書いてしまうと、
まず、「functions.php」に次のコードを追加します。
[php]
function is_mobile(){
$useragents = array(
’iPhone’, // iPhone
’iPod’, // iPod touch
’Android’, // 1.5+ Android
’dream’, // Pre 1.5 Android
’CUPCAKE’, // 1.5+ Android
’blackberry9500′, // Storm
’blackberry9530′, // Storm
’blackberry9520′, // Storm v2
’blackberry9550′, // Storm v2
’blackberry9800′, // Torch
’webOS’, // Palm Pre Experimental
’incognito’, // Other iPhone browser
’webmate’ // Other iPhone browser
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}
[/php]
「functions.php」にコードを追加したら、AdSenseを表示したいところに次のコードを追加します。
[php]
/*【スマートフォン用のAdSenseコード】*/
/*【PC用のAdSenseコード】*/
[/php]
これで、スマホとパソコンでアドセンスを変えることができます。
もちろん、スマホ時は表示しないということも可です。
このやり方を発見するまでは、CSSの「display: none」で非表示にしようかと考えてました。
それだと、ちょっと大変ですもんね。
とりあえず、昨日の「固定幅＋リキッドレイアウト」と併せて、レスポンシブデザインについては50%くらい満足してます。
テーマについては、あとはデザインの美的センスですもんね。
また時間ができたら、考えようと思います。
この記事が参考になったら、シェアしてください
関連記事も見てください
レスポンシブデザインでGoogleAdsenseの広告サイズ変更が公式サイトで紹介されています。 (2013.06.27)
スマートフォン用のWordPressのテーマはどうしよう？ (2012.08.27)
レスポンシブデザインを固定幅＋リキッドレイアウトに一歩前進させました。 (2012.09.29)
レスポンシブデザインでWordPressのテーマを作製しました。 (2012.09.06)
WordPressでサイドバーのウィジェットを使用しないようにカスタマイズしました。 (2012.10.13)RSSの登録で最新記事をお届けします
フォローしてもらえると嬉しいです
F