S.F. Blog:はてなブログのカスタマイズ

はてなブログProでは広告コードの表示を非表示にすることができ、代わりに自分の広告コードを通常ではサイドバーなどに表示することができる。ただ自由度は低くて、記事と記事の間とかに広告コードは貼りつけられない。

Adsenseって昔はコード改変が一切できなかったんだけども、不正利用以外であればコードの改変がOKとなっているようだ。

Adsenseの広告コード改変に関するポリシーが変更され広告コードの改変が可能となりました | ぼくらのアドセンスブログ

レスポンシブ対応においてはコードの改変が何かしら必要なので、そのためのポリシー変更なのだろう。そういうことなので私は記事の先頭と、記事間にAdsense広告を表示するコードをフッターに配置してみた。記事上に１つ、記事中に最大2つの広告表示をするようにしている。

  <style>
    .hatena2 {
      width: 320px;
      height: 50px;
      margin-left:auto;
      margin-right:auto;
    }

    @media(min-width: 500px) {
      .hatena2 {
        width: 468px;
        height: 60px;
        margin-left:auto;
        margin-right:auto;
      }
    }

    @media(min-width: 800px) {
      .hatena2 {
        width: 728px;
        height: 90px;
        margin-left:auto;
        margin-right:auto;

      }
    }

    .container{
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    // 記事上への広告表示
    var d='<ins class="adsbygoogle hatena2"' +
    'style="display:inline-block"' +
    'data-ad-client="【ID】"'+
    'data-ad-slot="【スロットID】"></ins>';
    $('#main').prepend(d);
    (adsbygoogle = window.adsbygoogle || []).push({});

    // 記事間への広告表示
    var c = '<ins class="adsbygoogle" ' +
    'style="display:block"' +
    ' data-ad-client="【ID】"' +
    'data-ad-slot="【スロットID】"'+
    'data-ad-format="rectangle"></ins>';

    var article = $('article');
    for(var i = 0,end = article.length<2?article.length:2;i < end;++i){
      $(article[i]).after(c);
      adsbygoogle.push({});
    }
  </script>

広告コードはレスポンシブのものをベースにしている。記事先頭の広告はモバイル画面を覆わないように小さい320×50となるようにアドバンスのコードをベースとしている。

ただAdsenseのポリシー違反の取り締まりは厳しいので、広告コードの改変も許可されているとはいえBUGがポリシー違反を引き起こすかもしれないので慎重に行わなければならない。ちょっと緊張するね。。みなさんも慎重に。。

Adsenseコードを配置した