みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

はてなブログにGoogle Adsenseを貼り付ける

はてなブログにGoogle Adsenseを貼り付ける方法を解説します.

広告ユニットの作成

Google Adsenseで新しい広告ユニットを作成します.

f:id:atsuhiro-me:20151105215008p:plain:w300

すると広告コードが表示されます.このコードをはてなブログに埋め込んでいくわけです.

f:id:atsuhiro-me:20151105212652p:plain:w300

ブログに埋め込む

広告ユニットは,主に2つのパートに別れます.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

これは,adsbygoogle.jsを読み込む部分で,1つのページに複数の広告ユニットを貼り付ける場合も,1度だけ実行すればよい部分です.したがって,ブログの1箇所に埋め込めばよい部分ということになります.

<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ここは個別の広告ユニットを呼び出す部分で,1つの広告ユニット毎に埋め込む必要があります.

はてなブログのデザイン設定画面を開きます.

サイドバーの広告

サイドバー > モジュールを追加 > html と開いて,タイトルを「広告」とし,コードを貼り付けます.

f:id:atsuhiro-me:20151105215901p:plain:w300

記事の下の広告

記事 > 記事上下のカスタマイズ > 記事下 にコードを貼り付けます.

f:id:atsuhiro-me:20151105220044p:plain:w300

ヘッダーの広告

ヘッダーの部分ににコードを貼り付けます.ここにadsbygoogle.jsを読み込む部分も合わせて追加しておけばよいでしょう.

f:id:atsuhiro-me:20151105220240p:plain:w300

このようにすれば,ブログのいろいろな部分に自由に広告を貼り付けることができます.