Blogger Labo:【Blogger】アドセンスの設定方法(コード変換ツール付)

自作テンプレートのリリース情報の補足として、Bloggerでのアドセンスの設定方法をまとめておこうと思います。この記事の内容は、当サイトのテンプレートのみならず、Bloggerの仕様上でのアドセンスの設定方法になりますので、他のテンプレートを使っている場合でも役に立つ内容になっている思います。


ガジェットにアドセンスを設定する


サイドバーなどのガジェットにアドセンスを設定する場合は以下の方法で設定できます。

・アドセンスコードを取得する
・HTML/JavaScriptガジェットを設定する
・ガジェットの内容部分にアドセンスコードを貼り付けて更新する

ガジェットの場合、以上の操作だけでアドセンスを設置することが出来ます。ガジェット内のコードは更新後にテンプレート内で自動で特殊文字に変更されるようなので、変換などの操作は不要です。

また、ガジェット内でのアドセンスの表示位置を変更したい場合は、「<div align="center">アドセンスコード</div>」のような形で設定すると、中央揃えなどを指定することが出来ます。

記事表示部分に埋め込む形でアドセンスを設定する


当サイトの自作テンプレートのような記事内にアドセンスを設定できるテンプレートにて、アドセンスコードを貼り付ける場合はBlogger用の文法に書き換える必要があります。

基本的には「async」を「async='async'」に変更するだけで良いようです。よくわからないという方は以下の入力フォームにアドセンスを貼り付けて変更ボタンを押すと、テンプレート用に変換されたアドセンスコードを取得できます。また、オプションで「スポンサーリンク」という文言を付加することができます(クラス名は「sponsor」になります)。

ここにアドセンスコードを入力



変換結果(結果をクリックでコピー)



レスポンシブ広告のオプション


Bloggerにアドセンス広告を載せる場合、デバイスのサイズに合わせて自動でサイズの変わる「レスポンシブ広告」がおすすめです。この広告にはオプションを設定することができ、デフォルトでは「形は自動調整」「幅を画面いっぱいに自動拡張」になっています。そのオプションの該当部分と設定は以下の通りです。

広告の形状


data-ad-format="auto"

・auto(自動調整)
・horizontal(横長)
・rectangle(四角形)
・vertical(縦長)

自動拡張


data-full-width-responsive="true"

・true(自動拡張する)
・false(自動拡張しない)

よくわからなければ、そのままで使っていいと思います。ちなみにこれら記述は省略可能です。