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

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

    アドセンスの広告コードをこうすれば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のままでもいいような気もします。
     

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

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    難しくない!誰でも出来るWordPress簡単設定ガイド配布中!


    ワードプレスを簡単に始めることが出来るかんたん設定ガイド無料配布中!!