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

Adsenseロゴ

タイトルが左寄せになっているブログ限定となりますが、タイトル横の余白を利用して、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;
	}
}

※ このブログのテーマはMinimalismなので、他のテーマで表示できないかもしれません。