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

2015年3月13日 ()

目次

※ 現在では「レスポンシブ対応のアドセンス広告を貼る方法(その2)」は、
E002のランキング&ブログタイプのみの方法になっています。

  1. 各ツールに対応させたアドセンス広告に!
  2. レスポンシブ対応のアドセンス広告を貼る方法(その1)
  3. レスポンシブ対応のアドセンス広告を貼る方法(その2)

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

ad_ca_001

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

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

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

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

ad_ca_002

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

ad_ca_003

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

すると・・・

ad_ca_004

バナー広告でかっ!! (*゚Д゚*)ェ…

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

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

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

ad_ca_005

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

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

ad_ca_006

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

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

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

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

ad_ca_007

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

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

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

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

ads_001

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

すると、

なんということでしょう オォォ♪((*゚゚∀゚゚*))

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

ad_ca_001

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

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

【注意点】
レスポンシブのバナーになっているかどうかの確認をパソコンのブラウザで行うときは、
ブラウザのリロード(更新)を行ってください。
jpgやgifなどの画像を直接配置してる時はブラウザを縮めるとそれに追従して画像も縮小されるのですが、
アドセンスの広告はサイトが表示されたときに、
画面サイズ(厳密に言うと、バナーが入っているDivのサイズ)を認識して、
その画面サイズに合わせたバナーを表示させているようです。
ですので、ブラウザを縮めてもサイズは追従しません。