アドセンスのスポンサーリンクを中央に表示してサイズも最適化!

アドセンスの広告に「スポンサーリンク」の表示をする場合に、その文字を広告上部の中央に表示したいと思いませんか?
これ、超簡単に出来ますのでやってみてください。ついでに広告サイズも最適化しましょう。

アドセンスの広告コードをこうすればOK!

ということで方法はもう無茶苦茶簡単です。

まず「アドセンス」にログインして、自分の「広告コード」をコピーして、メモ帳に貼り付けます。

今回は「テキスト広告とディスプレイ広告」、「記事内広告」の2通りの場合を見てみましょう。

テキスト広告とディスプレイ広告の場合

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ▲▲ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-●●"
data-ad-slot="2955955244"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3行目の<!-- ▲▲ -->の部分の▲▲には、自分で広告ユニットに付けた名前が入ります。
また6行目のdata-ad-client="ca-pub-●●"には、自分のアドセンスの「サイト運営者ID」が入ります。

この初期状態の広告コードを、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ▲▲ -->
<div style="text-align:center">スポンサーリンク</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-●●"
data-ad-slot="2955955244"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このように書き換えます。(コピペでどうぞ。)

書き換える箇所を分かりやすく画像にすると、こんな感じ。↓

<!-- ▲▲ -->の次の行に<div style="text-align:center">スポンサーリンク</div>を追加することで、アドセンス広告の上部に中央揃えで「スポンサーリンク」の文字が自動挿入されます。

また、この場合では9行目のdata-ad-format="auto"></ins>`autorectangleに変えることで、レスポンシブ表示可能な大きめの画像に変わります。
つまりパソコンからでもスマホからでも、常に最適化された調度良い広告が表示されるようになります。

記事内広告の場合

同じように「記事内広告」の場合も見てみます。

まずは「アドセンス」から自分の記事内広告の「広告コード」をコピーしてメモ帳に貼り付けます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-●●"
data-ad-slot="7045057871"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

先ほどと若干違いますが、基本的に同じです。これを、、、。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ▲▲ -->
<div style="text-align:center">スポンサーリンク</div>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="rectangle"
data-ad-client="ca-pub-●●"
data-ad-slot="7045057871"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

こうします。一緒ですね。(コピペで使ってください。)

「記事内広告」には、広告ユニット名が何故か入っていないので、分かりやすくするために3行目に<!-- ▲▲ -->を挿入。また、その次の行に<div style="text-align:center">スポンサーリンク</div>を挿入してください。

また「記事内広告」ではautoではなく、fluidになっていますが、先ほどと同じくrectangleに変えればOKです。

このように広告コードを変更してからブログにアドセンス広告を貼れば、、、。

このように

  • 上部に中央揃えで「スポンサーリンク」の表記が常に出る
  • 常に最適なサイズで広告が表示される

ようになります。ぜひ試して下さいね。

まとめ

以上のようにアドセンスの「広告コード」をちょっとイジってから保存しておいて、それを使い回せばいろいろと捗るようになります。

また、「広告ユニット」はいくつでも作ることが出来るので、例えば記事内にアドセンスを貼る場合、

  • 記事上
  • 記事中
  • 記事下

という風に作成しておいて、それを貼り分ければ(ユニット名もそのように分けておく)、どの広告が一番クリック率が高いか実証も可能ですね。
 

「記事内広告」でrectangleに変更しましたが、ここはfluidのままの方が、より「記事内広告」らしい広告が出るような気がするので、ここはfluidのままでもいいような気もします。

まあ、いろいろと実証してみてください。