はてなブログのタイトル横にGoogleアドセンスの広告を表示

タイトルが左寄せになっているブログ限定となりますが、タイトル横の余白を利用して、Google Adsense（グーグルアドセンス）の広告を表示させてみます。

普通であれば、ヘッダ（デザイン→カスタマイズ→ヘッダ→タイトル下）にコードを入力して、CSSで広告の位置を調整すると思いますが、ここでは、サイドバーを使います！

（デザイン→サイドバー→モジュールを追加→HTMLにコードを入力）

<div class="head-ads" style="float: right; margin: -108px 0 0;">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle" style="display: block; width: 728px; height: 90px;" data-ad-client="ca-pub-123456789" data-ad-slot="123456789" data-ad-format="horizontal" data-full-width-responsive="false"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

ポイントは、広告バナーをサイドバーの一番上に表示することと、CSSの「float: right」で右寄せにすることです。広告の位置は、CSSの「margin」で上方向を調整します。
広告がサイドバーを突き抜けて、メイン部分（記事部分）にまではみ出して表示されます。

Google Adsenseで取得した広告コードの緑字部分は、固定サイズではなく、レスポンシブで大きさを指定したほうがいいと思います。

なぜなら、スマートフォンでの表示がおかしいときに、CSSの「display: none」で広告を消すことができるからです（レスポンシブ以外の広告をCSSで消すと規約違反となる）。

参考になるブログ・Webサイト
AdSense ヘルプ - AdSense 広告コードの修正

スマートフォンの広告を消すCSSは次のとおりです（広告のクラス名は「head-ads」）。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

/* Media Queries - Tablet */
@media screen and (max-width: 768px){
	.head-ads {
		display: none;
	}
}

/* Media Queries - Small Tablet & Smartphone */
@media screen and (max-width:640px) {
	.head-ads {
		display: none;
	}
}