はてなブログの記事タイトル下にGoogleAdsenseを貼りつける(レスポンシブ対応版)

先日ついに、はてなブログにも記事タイトル下をカスタマイズする機能が付きました！

参考：【試】はてなブログの「記事上」カスタム解禁！ アドセンス的なものを設置してみた（撤去済み） - 俺のメモ

おそらくシェアボタンや広告、相互RSSに利用されるケースが多いと思いますが、
ウチではGoogleAdsenseのレスポンシブ広告を使い、スマホではモバイルバナーを、PCやタブレットではレクタングルの広告を貼るようにしています。

というわけで、この記事でその方法を紹介します。

準備

• Adsenseのコード取得

GoogleAdsenseトップ→広告の設定→新しい広告ユニット→広告サイズ→レスポンシブ広告ユニット（ベータ版）を選択

• 閲覧するデバイス毎に好みのサイズに変更させる

先ほどのユニットからコードを取得→モードをアドバンスに→Styleタグの中身を変更
ちなみにこのブログではこんな感じにしてます。

<style>
.my_adslot { width: 300px; height: 50px; }
@media(min-width: 600px) { .my_adslot { width: 300px; height: 250px; } }
</style>

スマホから見たらモバイルバナー、PCやタブレット(幅が600px以上のデバイス)から見たら300×250のレクタングルが表示されます。同じように設定したい方はもちろんコピペすればOKです。

設置

はてなブログのダッシュボード→デザイン→カスタマイズ→記事→記事上に先ほどのコードを貼り付け
＊規約に従い、広告のそばには「スポンサード リンク」などの文言を入れておきましょう

以上で準備完了です！
あとは成果を待ちましょう。

デバイス毎に広告サイズを変えるのはなんとなく難しそうだと思って控えてたんですが、レスポンシブ広告を使えば簡単にできました。もっと早くやってればよかったです(´Д｀)