サイドバーにレスポンシブ対応のアドセンス広告を貼る方法

目次

1.レスポンシブ対応のアドセンス広告に！

パソコン・タブレット・スマホに対応させたサイト（レスポンシブ）が増えてきました。
せっかくレスポンシブレイアウトなのに、設置した広告がレスポンシブになってないと、
画面幅のサイズが小さなスマホなどで閲覧したときに広告が飛び出てしまうなどレイアウトが崩れてしまうことがあります。
「見た目的にもなんか変・・・」ということになってしまいますよね・・・。

そうならないように、きちんとレスポンシブにしてちゃんとしたレイアウトにしましょう ( ´∀｀)ﾉ

2.レスポンシブ対応のアドセンス広告を貼る方法（その1）

昔はなかったようなのですが、現在では一応レスポンシブ用の広告バナーがアドセンス側で用意されています。

このレスポンシブ用のバナーコードを取得し、
wordpress管理画面の「ウィジェット」で「テキスト」というウィジェットをバナーエリアに追加します。

上記のようにテキストを入力するフィールドにレスポンシブ用のアドセンス広告コードを入力して、
「保存」をクリック。

すると・・・

バナー広告でかっ！！ (*ﾟДﾟ*)ｪ…

さすがGMO。。アピール度がすごい・・・

この大きさのバナーで良いのなら、それはそれでOKなのですが、
「こんな縦長の大きいバナーはイヤだな・・・」「もっと正方形に近いバナーは表示されないのかな」
って思った人は大勢いるのではないでしょうか？

↓ のようにカスタムサイズを選ぶこともできます。

カスタムサイズを選択し、サイドバーの幅（220px）にあわせたバナーを作成し、
広告コードを貼ったあと確認。

タブレットサイズのディスプレイで見てみると・・・

カスタムサイズは「固定サイズ」になってしまうので、上記のようにレスポンシブに対応できす縮小しません。
「スマホやタブレット表示の時にはみ出してもいいからしっかりサイズを決めたい」という方は
このカスタムサイズを選択してください。

3.レスポンシブ対応のアドセンス広告を貼る方法（その2）

今度はスマホやタブレットなどのようにディスプレイが小さなメディアで見たときでも、
きちんとバナーを縮小させる方法です。

まず、レスポンシブ用バナー以外のサイズを選択します。
とりあえず「300×250 レクタングル」というサイズのバナーを選択し、コードを取得します。

広告バナーコードを取得したら、先ほどの「方法（その1）」と同じように、
wordpress管理画面の「ウィジェット」で「「テキスト」を広告バナーエリアに追加します。
またその「テキスト」というウィジェット内のテキストフィールドに広告バナーコードを追加します。

そのときにバナー広告コードの中の「width:300px;height:250px」を削除し、
googleのclassに「ad2」を追加してコードを記述してください。

「width」は横幅を指定し、「height」は縦の長さを指定しています。
このコードが入っていると固定サイズになってしまうので、「width:300px;height:250px」を削除しましょう。

次にclassに「ad2」を追加。「adsbygoogle」の後ろに半角スペースをあけて「ad2」を追加します。

下記のように記述してください。そのあと「保存」をクリック。

すると、

なんということでしょう　ｵｫｫ♪((*ﾟﾟ∀ﾟﾟ*))

上の方で掲載した画像のようにレスポンシブ対応になり、
ディスプレイに合わせたサイズで広告が表示されます。

E002のランキングとブログタイプには、アドセンス広告をレスポンシブに対応させるためのCSSが追加されています。

当初のテンプレートにはアドセンス用のCSSは入っていませんでしたので、
アップデートをしていない方はアップデートを行ってください。
その後も（最近も）レイアウトの調整をするためにアドセンス用のCSSを調整していますので、
アドセンス広告をレスポンシブに対応させたい方はE002のアップデートを行ってください。
（※ 最終改定日＆アップデート日 ：2015/03/19 ）