アドセンス広告をレスポンシブウェブデザインに対応させる

こんな場末のブログですが、生意気にもアドセンス広告を貼らせて頂いてます。

まあ、稼ぎなんてたかが知れてるし、そもそもこの自己満足ブログで稼ごうと思ってないので良いんですが、
スマホサイズなんかで広告が表示されてもはみ出すんですよね。

せっかくレスポンシブのテーマ使ってるのに嫌じゃないですか。

<< iphoneで表示した時 >>

ね？

それがアドセンスをやるようになってから一番の不満でした。

で、いつの間にか一部改変OKになってたのでアドセンス広告をレスポンシブのテーマに合うように修正してみました。

詳しくはヘルプを見てね。⇒　AdSense 広告コードの修正

改変Okになったと言っても、ユニットを隠したり、不正なことはやっちゃダメよん。

コードを修正

ヘルプを見てもらうとわかりますが、以下のようにコードを修正するだけです。

<script type="text/javascript">
    google_ad_client = "ca-サイト運営者ID";
    width = document.documentElement.clientWidth;
    google_ad_slot = "広告ID";/*基本表示の広告*/
    google_ad_width = 320;
    google_ad_height = 50;
        if (width > 500) {/*501px以上の場合は以下の広告を表示*/
        google_ad_slot = "広告ID";
        google_ad_width = 468;
        google_ad_height = 60;
    }
    if (width > 800) {/*801px以上の場合は以下の広告を表示*/
        google_ad_slot = "広告ID";
        google_ad_width = 728;
       google_ad_height = 90;
    }

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

ご覧のように、サイズによって表示する広告IDを変えるということですね。

なので、私はスマホ用で新しく広告ユニットを作りました。

サイト運営者ID

サイト運営者IDは自分のアドセンスページの上部に記載されてます。

広告ID

広告IDも広告の設定ページで確認できます。

コード内容

詳しく見ると、以下のようになります。

     if (width > 500) {/*501px以上の場合は以下の広告を表示*/
        google_ad_slot = "広告ID";/*その広告ID*/
        google_ad_width = 468;/*その広告の横幅*/
        google_ad_height = 60;/*その広告の高さ*/
    }

つまり、

if (width > 600) 

とすれば601px以上で適用となります。

広告に合わせてwidthとheightも変更しないと広告が正常に表示されないので注意して下さい。

あとはブログに設置するだけです。

私はプラグインを使ってます。
⇒　AdSense Manager
こういうのもあるので必要に応じて利用してもいいかもしれませんね。

以上です。

ご自分のブログの環境に合わせて設定して下さい。

このブログはまだズレてますが・・・まあそのうち。

[ad#ad-post-bottom]