ブログをスマホで表示したとき広告が切れないようにする為のWordPressの3行のコード

スマホ表示で広告が切れたりはみ出たりしないようにするためにPCと表示を分ける為の3行のコード

あなたのブログはスマホで表示した時、広告が切れて表示されたり、広告がはみ出たりしてませんか?

この現象、レスポンシブWEBデザインデザインのテーマを使っているブログでよく見かけます。

特に、Google Adsenseの336px × 280pxの広告(レクタングル大)を配置している場合、PCとスマホで表示を分けていないと広告が切れていると思ってほぼ間違いないでしょう。

WordPressのwp_is_mobile関数を使ってPCとスマホで表示する広告を切り替える方法を紹介致します。

スマホで表示している広告が切れる対策

先月から広告周りのカスタマイズを色々と挑戦しております。よっひー(@yosiakatsuki)です。

以前から、スマホでブログを見ている時、「このブログ広告切れてるなー」と思うことがしばしば。

規約違反の恐れもありますので、PCとスマホで表示する広告を分けるようにしましょう!

PCとスマホで広告を分けるためのコード

早速ですが、WordPressでPCとスマホの表示で広告を切り替えるためのコードは下記になります。


  //スマホ表示用の広告コードを入れる 横幅300pxがいいと思う

  //PC表示用の広告コードを入れる

ほんとさっぱり3行です。

WordPressにはwp_is_mobileというPCから見られているか・スマホから見られているかを判断する関数がありますので、「ユーザーエージェントどうのこうの」なんて考える必要もないです。素晴らしい!

ぐうたらな僕でもすぐ出来ます。

あとは「〜の広告コードを入れる」と書いてある部分に表示したい広告のコードを貼り付ければOKです!

例えばGoogle Adsenseの広告コードを入れるとこんな感じ↓



  

  


script タグはどのサイズでも共通のモノを読んでいるので、PC・スマホで切り分ける条件分岐の外側に出しています。

実際に広告コードを入れてみるとそれなりのコード量になって難しそうになりましたが、自分で足すのはたった3行です。

そう難しくないカスタマイズなので、スマホ表示で広告が切れている方はぜひ実践していただきたいです。

対象とするスマホ

今回のお話で想定している「スマホ」についてです。

「スマホ表示」といっても、デバイスによって横幅が違います。

なので、ココで言う「スマホ表示」はiPhoneシリーズ(5sマデ)での横幅320pxにターゲットを絞りました。

横幅の320pxで表示されるのに、336pxの広告を載せればそりゃ切れます。

336px × 280pxのGoogle Adsense広告を掲載している場合は特にご注意ください。

スマホ表示での左右の余白にも注意!

「紹介したコードを使って、モバイルの時は300px × 250pxの広告にしたぞ!」

といっても安心する事なかれ!

スマホ表示した時の左右の余白にもご注意を!

左右の余白(paddingもしくはmargin)の合計が20pxまでなら300px × 250pxの広告は切れることは無いと思いますが、それ以上だと広告が切れたり、無駄な横スクロールが発生する恐れがあります。

スマホ表示でのコンテンツの左右の余白にも気を配ってみてください。

よっしーのひとこと

よっひー

RSSで購読しているブログ、Twitterに流れてきたリンク先、いろいろなところでまだ「切れてる広告」を見ることが多いです…

「好みの問題」だと思ってたんですけど、規約違反の恐れもあるので、今月中に対応しましょう。

切れない広告表示もスマホ最適化の一つの課題と言えそうです。

ではまた。