Adsenseコードを配置した
はてなブログProでは広告コードの表示を非表示にすることができ、代わりに自分の広告コードを通常ではサイドバーなどに表示することができる。ただ自由度は低くて、記事と記事の間とかに広告コードは貼りつけられない。
Adsenseって昔はコード改変が一切できなかったんだけども、不正利用以外であればコードの改変がOKとなっているようだ。
Adsenseの広告コード改変に関するポリシーが変更され広告コードの改変が可能となりました | ぼくらのアドセンスブログ
レスポンシブ対応においてはコードの改変が何かしら必要なので、そのためのポリシー変更なのだろう。そういうことなので私は記事の先頭と、記事間にAdsense広告を表示するコードをフッターに配置してみた。記事上に1つ、記事中に最大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がポリシー違反を引き起こすかもしれないので慎重に行わなければならない。ちょっと緊張するね。。みなさんも慎重に。。