T.Takahashi bloggerブログでgoogle AdSenseをレスポンシブ広告として記事中や記事下に設置する 2017-06-23T05:01:09Z
０；ゼロからはじめる！

AdSense bootstrap ブログカスタマイズ

bloggerブログでgoogle AdSenseをレスポンシブ広告として記事中や記事下に設置する

ここでは、google AdSenseのレスポンシブに対応できるように設置方法を解説する。

1.配置の仕方について

当初、google AdSenseでは、記事内にある広告は３つとの制限がありました。（2016年8月からは上限撤廃）ただし、撤廃されたからと言っていくつも配置したり場合、見づらくなる可能性が大きい。そうなると設置するパターンが考えられる。

  • 記事の途中に設置
  • 記事下に設置
  • サイドバーに設置

こんな感じが見栄え良いだろう。今回は、記事中と記事下への設置をする予定だ。

2.google AdSenseで広告ユニットを作成する

2-1.「レスポンシブユニット」で「テキスト広告とディスプレイ広告」の広告ユニットを作成する
google AdSenseから「広告の設定」「コンテンツ」「広告ユニット」「新しい広告ユニット」から作成する。（既存の広告ユニットを使う場合は、新規に作成する必要はない。）
2-2.「コードを取得」でメモに控えておく
コードをあとで使うので控えておく。

3.推奨される広告ユニットのサイズ

3-1.google AdSenseで推奨される広告ユニットのサイズ
推奨サイズをを簡単に説明を行う。

設置例の詳しくは広告サイズに関するガイド - AdSense ヘルプを参照すると良いだろう。

高い成果が見込める広告サイズ
広告サイズ 名称 ヘッダー設置 記事中の設置 記事下の設置 サイドバー設置 テキスト広告 ディスプレイ広告 モバイル テキスト広告とディスプレイ広告*
300×250 レクタングル（中）
336×280 レクタングル（大）
728×90 ビッグバナー
300×600 ハーフページ
320×100 モバイルバナー（大）
その他の広告サイズ
広告サイズ 名称 ヘッダー設置 記事中の設置 記事下の設置 サイドバー設置 テキスト広告 ディスプレイ広告 モバイル テキスト広告とディスプレイ広告*
320×50 モバイル ビッグバナー
468×60 バナー
234×60 ハーフバナー
120×600 スカイスクレイパー
120×240 縦長バナー
160×600 ワイド スカイスクレイパー
300×1050 ポートレート
970×90 ビッグバナー（大）
970×250 ビルボード
250×250 スクエア
200×200 スクエア（小）
180×150 レクタングル（小）
ボタン レクタングル（中）

4.bloggerへ広告ユニットを設置する

4-1.レスポンシブ対応で広告ユニットを設置するイメージ

下図のようにPCでは、記事中と記事下に設置。モバイル端末では、記事下のみ（記事中は非表示）で設置を行う。広告ユニットはレクタングル（大）[336×280]を使う

4-2.bloggerで記事中に広告ユニットを表示させる

2箇所にscrptを追加する。

まずは、1箇所目のjqueryを追加するために下記のコードを探す。すでにjqueryが追加されている場合は、2箇所目へ飛んでコードを追加する。


<head>

見つかったらjqueryを読み込ませるためのコードを追加する。


<head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js'/>

次に、2箇所目のコード追加のために下記のコードを探す。（一番下の行にある）


</html>

見つかったら、下記のコードを追加する。


</html>

<script type='text/javascript'>
  &(document).ready(function(){ 
  &('#MBT-google-ad').insertBefore($('a[name="more"]'));
  }); 
</script>
4-4.広告ユニットを表示するコードを追加する

「テーマ」「HTMLの編集」からコードを修正する

まずは下記のコードを探す。


<data:post.body/>

見つかったら下記のように修正


<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
  <div style='display:none;'>
    <div id='MBT-google-ad'>
      <div class='ad-top-responsive'>
        <h4>スポーンサーリンク</h4>

<!-- 記事中の広告ユニット -->
        <style type='text/css'>
          .my_ad1 { width: 336px; height: 280px; }
        </style>

        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
             data-ad-slot="xxxxxxxxxx"
             data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
<!-- end 記事中の広告ユニット -->

      </div><!--end ad-top-responsive-->
     </div><!--end MBT-google-ad-->
  </div><!--end style-->
  <div>
    <h4>スポーンサーリンク</h4>

<!-- 記事下の広告ユニット -->
      <style type='text/css'>
        .my_ad2 { width: 336px; height: 280px; display:inline-block; }
        @media (max-width:780px) { .my_ad2{ width: 300px; height: 250px; } }
      </style>

      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
           data-ad-slot="xxxxxxxxxx"
           data-ad-format="auto"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
<!-- end 記事中の広告ユニット -->

  </div>
</b:if>

参考サイト

Bloggerでグーグルアドセンスを
記事下や記事中に表示する方法｜トーマススイッチ

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿