グーグルアドセンス広告サイズをレスポンシブ化する2つの方法

目安時間:約 8分
3bbb985faf5ee5afbd412cf6e4d00934_s

グーグルのアドセンス広告(バナー広告)は、

大きすぎる広告の場合、画面に入りきらないサイズもあります。

 

また、広告だけで画面の半分以上を占めてしまう場合、

アドセンス規約に抵触して、ペナルティや、

アカウント凍結になる事も!

 

 

そんな、大変な事になる前に!

 

 

広告自体を、レスポンシブ化させてしまいましょう。

 

 

って事で今回は、アドセンス広告のレスポンシブ化の方法を2つ、

お話ししたいと思います。

 

 

レスポンシブのコードを発行してもらう方法

 

 

1つ目は、自動で広告の大きさを変えてくれるコードを

発行してもらう方法。

 

こちらの方が簡単ですし、オススメではあります。

 

 

まずは、グーグルアドセンスにログインしましょう。

スクリーンショット 2015-11-28 9.35.12

 

 

そして次は、広告の設定をクリックして・・・

スクリーンショット 2015-11-28 9.36.18

 

 

新しい広告ユニットをクリック!

スクリーンショット 2015-11-28 9.50.43

 

 

すると、こんな画面になって、新しい広告の種類を追加できます。

スクリーンショット 2015-11-28 9.40.13

 

 

「名前」の部分は、管理しやすい名前にしておきましょう。

 

私の場合は、「ブログ名」+「広告を設置する場所」+「レスポンシブ」

としています。

 

 

そしてその下が重要。

 

「広告サイズ」をクリックすると、

「自動サイズ レスポンシブ プレビュー」とあるので、

これを選択!

スクリーンショット 2015-11-28 9.38.48

 

 

他の部分は、もともとの設定どおりで構いませんので、

一番下の「保存してコードを取得」をクリックすると・・・

 

コードが取得できます。

スクリーンショット 2015-11-28 9.44.16

 

次からは、ここからコード取得ができるようになります。

スクリーンショット 2015-11-28 9.47.32

 

 

このコードを設置した広告だと

 

▼パソコンでの表示①▼

スクリーンショット 2015-11-28 9.57.12

 

▼パソコンでの表示②▼

スクリーンショット 2015-11-28 9.57.23

 

▼スマホでの表示▼

IMG_5504

 

 

こんな感じに、自動的に最適なサイズに変更をしてくれます。

 

 

アドセンスコードを自分で改変してしまう方法

 

 

次は、自分でコードを変更する方法。

※今は一応、OKとされているんですが、あくまでも自己責任でお願いします。

 

 

まずは、PC用とスマホ用で、2種類の新しい広告のコードを取得しましょう。

 

今回は、

PC用の広告サイズは「360×280」

スマホ用は、「300×250」

にしています。

 

<PCコード

 

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”>

</script>

<!– PC用 –>

<ins class=”adsbygoogle” style=”display:inline-block;width:336px;height:280px” data-ad-client=”あなたのアカウント番号” data-ad-slot=”管理番号“>

</ins>

<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

 

<スマホコード

 

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”>

</script>

<!– スマホ用 –>

<ins class=”adsbygoogle” style=”display:inline-block;width:300px;height:250px” data-ad-client=”あなたのアカウント番号” data-ad-slot=”管理番号“>

</ins>

<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

 

 

 

 

この赤い部分をメモしておいて、

下記にコピペしましょう。

 

 

<script type=”text/javascript”><!–

google_ad_client = “あなたのアカウント番号“;

width = document.documentElement.clientWidth;

google_ad_slot = “管理番号“;

google_ad_width = 300;

google_ad_height = 250;

if ( width >= 980) {

google_ad_slot = “管理番号“;

google_ad_width = 360;

google_ad_height = 280;

}

//–>

</script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

 

 

簡単に説明すると、

「google_ad_slot」▶︎グーグルでの管理番号

「google_ad_width」▶︎広告の横幅

「google_ad_height」▶︎広告の縦の長さ

 

 

 

そして一番のポイントは、

「if ( width >= 980) {」

という部分。

 

これは、

「画像のサイズが980より大きかったら、下の広告を表示してね」

っていう文字。

 

 

 

他の画面サイズに対応させたい場合には、

色々と試してみてくださいね。

 

googleアドセンスのレスポンシブ広告種類を指定する方法

コメントは2件です

  1. こんばんは。
    アドセンスコードを自分で変えてしまう
    ことって知りませんでした。

    すごいですね^^
    応援完了です。

    • 草薙悠 より:

      じゅんじゅん様

      こんにちは^^

      感想、ありがとうございます。

      アドセンスコードを書き換えている方のブログも、
      時々見かけます。

      ちょっと変わった広告表示もあったりするので、
      また見つけたら、ブログにアップしておきますね。

      応援、ありがとうございます^^

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
当ブログについて
最近の投稿
最近のコメント
カテゴリー