GoogleAdSenseレスポンシブウェブデザインに対応! WordPress Twenty Twelveでモバイル用バナーを設置する方法


photo credit: Cesar Solorzano via photopin cc

「Google AdSense」を利用しているブロガーの皆さんに朗報です!

Google社が「GoogleAdSense」の広告コードのガイドラインを変更し、AdSense広告コードの変更ができるようになりました!

AdSense広告コードの変更ができるようになった背景には、レスポンシブ・ウェブデザインの浸透、ユーザからの問い合わせ、要望、質問が多く、AdSense広告コードの既存のガイドラインを変更したようです。ガイドラインが変更され、広告コードを柔軟に変更することが可能になり、サイトの利便性が向上されることは確かですね。

 広告ユニットの配信に柔軟性がました

レスポンシブ・ウェブデザインを採用しているサイトで悩まされていた、PCサイト用、モバイル端末用に「Google AdSense」の広告ユニットの配信分けが、一部のコードを改変が認められたことにより柔軟に対応することが可能になっています。

皆さんも、「GoogleAdSense」の配信に悩んだ方多いのではないでしょうか。例えば、ヘッダーにPC用にはビッグバナーを表示すると、モバイル端末でアクセスすると当然ながら広告がはみ出てしまったり。デバイス幅に応じて、広告ユニットの配信を変更したいけどコードの改変はAdSenseポリシー違反になるので出来なかったり。

スクリーンショット_2013_06_15_17_50 私も、以前は、PC用とモバイル端末向けに広告ユニットの配信を分けていましたが、最近では、タブレット端末も増えてきているので、PC向けにビッグバナー(728×90)を配信し、iPad向けには(468×60)のバナーを配信、iPhone向けには(300×250)の広告ユニットを配信するとなると、PC向けとiPhoneは正しく広告ユニットが切り替えられているが、iPadは(728×90)のビッグバナーが表示されたりと、かなり悩んだことがあります。

スクリーンショット_2013_06_15_17_59

Googleでは、今回の一部コードの改変が認められたことにより、上記のような広告ユニットの配信が容易に可能となっています。

 レスポンシブ対応となっているが

Googleのページを見るとレスポンシブ対応となっていますが、ブレークポイントが切り替わっても動的には広告ユニットは変わらないので、再読込が必要となっています。

 Twenty Twelveで実際に設置してみる

スクリーンショット_2013_06_15_17_59

  1. ブレイクポイントの設定

実際にAdSenseコードを記載する前に「ブレイクポイント」を決めましょう。ブレイクポイントとは、画面サイズ毎にCSSレイアウトを設計する際の境目です。

当サイトのTOPページの、記事上にあるヘッダー広告ユニットは以下のブレイクポイントを設定し、広告ユニットの配信を切り替えることにしました。

スマートフォン用 タブレット用 PC用
端末デバイスの幅 320〜768 768〜1100 1100〜
配信広告ユニット 320×50 468×60 728×90

 2. GoogleAdSenseコードの設置

今回は、TOPページの記事一覧の上に「GoogleAdSense」のコードを設置します。TwentyTwelveのテーマを使っているかたは、「index.php」の<div id=”content” role=”main”>の下に以下のコードの一部の値を自分の環境に合わせて変更し、挿入します。

if条件文で、広告ユニットの配信を振り分けています。if前のコードがデフォルトのコードとなります。以下のコードだと、320以上768未満の場合、(320×50)の広告ユニットが配信、768以上1100未満の場合、(728×90)の広告ユニットが配信されるフローとなります。ブレイクポイントは自分の環境に合わせて、if ( width > = 768 ) の値を変更します。

TwentyTwelveの場合、画面幅「960」で作成されているので、(728×90)の広告ユニットだとはみ出すと思うので、(468×60)の広告ユニットが良いとおもいます。

<!-- top header google adsense -->
<div class=ad_gad>
<script type="text/javascript">
    google_ad_client = "ca-pub-12345678";
    width = document.documentElement.clientWidth;
    google_ad_slot = "12345678";
    google_ad_width = 320;
    google_ad_height = 50;
    if ( width >= 768) {
        google_ad_slot = "12345678";
        google_ad_width = 468;
       google_ad_height = 60;
    }
     if ( width >= 1100) {
        google_ad_slot = "12345678";
        google_ad_width = 728;
        google_ad_height = 90;
    }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- top header google adsense -->
設定項目名 設定項目の説明
google_ad_client 自分のGoogleAdSenseコードの管理IDを記載します。GoogleAdSenseコードに記載されている「google_ad_client」の値を入力します。
google_ad_slot 自分のGoogleAdSenseコードの広告ユニットの管理IDを記載します。GoogleAdSenseコードに記載されている「google_ad_slot」の値を入力します。
google_ad_width 自分のGoogleAdSenseコードの広告ユニットの管理IDを記載します。GoogleAdSenseコードに記載されている「google_ad_width」の値を入力します。
google_ad_height 自分のGoogleAdSenseコードの広告ユニットの管理IDを記載します。GoogleAdSenseコードに記載されている「google_ad_height」の値を入力します。

 3. 広告ユニットの切り替え確認

「GoogleAdSense」のコード設置を終えたら実際に、確認してみましょう。

実機で確認する他に、以下のサイトでデバイス幅に応じてサイトを確認することができます。
http://mattkersley.com/responsive/

 4. モバイル用バナーのずれを修正

スクリーンショット_2013_06_13_8_14-2

デフォルトのTwentyTwelveの場合、iPhoneで確認すると、モバイル用バナー(320×50)が画面に収まらずにはみ出てしまうと思うので、「Media Queris」と以下のコードを「style.css」に記述しましょう。

media querisの追加

Twenty Twelveお使いの方は、「style.css」の「/* =Media queries」の下に以下のコードを記載します。ブレイクポイントはiPhoneの最大幅「480」に設定しています。padding,margin値はお好みに変更していただければと思います。

/* Minimum width of 320 pixels. */
@media screen and (max-width: 480px) {
.site {
                margin:0 auto;
                max-width 480px;
                padding: 0;
        }
        .gad {
                margin-left: -10px;
        }
        #main {
                padding: 0 0.714285714rem;
        }
}

Google AdSense参考書籍

GoogleAdSenseのにいては、以下の書籍に分かりやすく書かれているので、お勧めです。

この記事が気に入ったら
いいね ! しよう

Twitter でin44y

最新の関連記事

GoogleAdSenseレスポンシブウェブデザインに対応! WordPress Twenty Twelveでモバイル用バナーを設置する方法」への1件のフィードバック

  1. ピンバック: WordPress TwentyTwelveテーマ「Google AdSense」ビッグバナー、レクタングル(大)を配置する方法 | in44y

コメントを残す

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