センスよくGoogleアドセンス広告を掲載する方法について。【レスポンシブ対応】

ブログのカスタマイズも進んできました。いよいよ最終章。
今回はバナーの掲載方法についてです。

Googleアドセンスアカウントの作成の準備

ブログでアフィリエイト収入を得るには必須のバナーの掲載ですが、ただ載せれば良いわけでもないようです。

その辺りを注意しながら効果的なバナーの掲載方法も含め設置していくことにしましょう。

アドセンスの申請と登録方法は、こちらが詳しく載っていました。
（私は昔から持っていましたので〜 ^^b）

vilogger01.com

複数のドメインやブログを持っていても、アカウントに対して払い出されるため、1アカウントで全て管理できますが、まずは審査を受けて正式なアカウントを取得するのが先決です。

取得するには、

• 独自ドメインを取得しブログを開設する
• 記事を10件ぐらい掲載する
• Googleアドセンスのアカウントを作成する
• 審査を受ける

という流れになるかと思います。

ルール的なもの

バナーの掲載にはある程度のルールが存在します。明確ではないところもあるのでソースが無い場合もありますが、おおよそ間違っていないかと思います。私が調べたところ、だいたいこのぐらいのルールを守って載せるのが良いようです。

• 1ページに掲載するバナーの数は3つまで（現在は規制は無いようですが）
• スマホの場合広告が1画面に2つ以上表示しないこと
• 記事と広告が曖昧にならないこと（スポンサーリンクの表示を入れるなど）

広告は載せる媒体価値が大事ですので、内容が悪いと広告の効果も下がります。ブログとしても検索順位上位になる為には、情報の質と量、適切な広告の配置が大切かと思います。

ブログへのバナーの設置場所について

掲載するルールを確認したところで、掲載する位置を考えます。
私は以下のように考えてみました。

• サイドバーの上部（Google Adsense 1）
• 最初の見出しの上（Google Adsense 2）
• 記事の下（Google Adsense 3）
• Amazonのアフィリエイトバナー（Amazonアフィリエイト）

図解するとこんな感じ。

ブログでよく見かける配置かと思います。この辺りは先人に見習えですね。
じつはこの配置だとスマホで観ても記事と広告のバランスも良いんですよね。

よく見ると記事下のバナーは左右2個表示のダブルバナーなので、正確にGoogleアドセンスのバナーは4つということになりますが、スマホの表示の際は片方のみを表示させるように調整します。

設置方法

サイドバーの上部

順番にバナーを設置していきます。

「デザイン > カスタマイズ > サイドバー」から「HTML」モジュールを追加します。
記述は以下のとおり。Adsenseから自分で設定したソースをコピーして貼り付けましょう。
ポイントは、「スポンサーリンク」の表示を入れるところです。

<!-- Adsenseバナー表示 -->
<p style="text-align:center;" >スポンサーリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

私はバナーサイズをすべて「300x250pxのレクタングル」に固定しています。
広告の出稿されている数も種類も多く幅広い広告が期待できることと、パソコンでもスマホから見ても目立って丁度良いサイズです。

最初の見出しの上

次に見出しの上にバナーを設置します。
最初の見出しの上というのがポイントですが、設置にはスクリプトを使用します。
こちらで非常にありがたいツールを公開されているので利用させていただきました。

uxlayman.hatenablog.com

作成したスクリプトは以下のとおりです。

<!-- START v1.01 params=[insentense-adsense,U,,,1,,before,stay,,,false,] from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->
<script>
var adsenseCode = (function () {/*

<p>広告</p>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<!-- theTest -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</scrip>

<p> </p>


*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {

    var $target = $('.entry-content h3,h4,h5');
    $target.eq(0).before($('.insentense-adsense'));
    $('.insentense-adsense').html(adsenseCode);

}, false);
</script>
<div class="insentense-adsense"></div>
<!-- END v1.01 from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->

これを「デザイン > カスタマイズ > 記事」から「記事上」に貼り付けましょう。
自動表示してくれるのでとても便利です。

今までは文中に自分の手で貼り付けていましたので、ものすごい手間が省けました。感謝！

記事の下

記事下はとてもバナーがクリックされるところだそうです。本文の内容に連動して効果的な広告が表示されることで効果が高いんだと思います。そこで、記事下にはダブルバナー（レクタングルを2個）を表示させることにします。バナーはGoogleアドセンスで予めレクタングルを2個用意しておきます。

kumoaozora.hatenablog.com

設置方法ですが、スマホの場合レクタングルが縦に2つ並ぶとGoogleアドセンス的にルール違反になるようなのでレスポンシブデザインで学んだ、画面サイズに応じてバナーを「非表示」となるようにスクリプトとCSSで調整していきます。

バナーはパソコン用にダブルバナーとしてレクタングル（300x250px）を2個、スマホ用にレクタングルを1個を用意します。
パソコンとスマホと表示するバナーを分けるわけですね。

<div id="my-footer">
<p style="text-align: center; font-size: 85%;">スポンサーリンク</p>
<table class="table-css">
<tr>

<td class="td-css">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下左 -->
<ins class="adsbygoogle mobile"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>

<td class="td-css">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下右 -->
<ins class="adsbygoogle mobile"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</table>

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

<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

Adsenseの貼り付けコードのClassをそれぞれ設定することを忘れずに。

• 記事下左　class="adsbygoogle mobile"
• 記事下右　class="adsbygoogle mobile"
• スマホ　class="adsbygoogle widedisplay"

次にCSSを設定します。
「デザイン > カスタマイズ > {}デザインCSS」へ以下を追加しましょう。

/* アドセンススマホ対応 */
@media screen and (max-width: 680px) {
  .mobile{
    display: none !important;
  }
  .table-css, .td-css{
    display: none !important;
    }
}

@media screen and (min-width: 680px) {
  .widedisplay{
    display: none !important;
  }
}

/* テーブルの線非表示,中央寄せ */
.table-css, .td-css { 
    border-style:none;
    margin:0 auto;
}
/* アドセンススマホ対応 */

ソースの設定ができたら画面から確認してみましょう。
パソコンからでもブラウザのサイズを小さくすれば確認できます。

バナーが1つで表示されれば成功です。

「やりたいこと」からパッと引ける Google アナリティクス 分析・改善のすべてがわかる本

まとめ

Amazonアフィリエイトの設定は省略しましたが、サイドバーのHTMLモジュールから追加したいバナーの記述を記載するだけですのでAmazonに限らず好きなバナーを掲載してはどうでしょうか。

繰り返しになるのですが、バナーは多ければより露出が高まるというわけではなく露出を高めるためにも検索エンジンからの流入を増やす、増やすために良質なコンテンツを心がける。といったことが重要で、広告はメインコンテンツにさり気なく表示されるぐらいが効果的かと思います。

ブログの設置からGoogleアドセンスの掲載まで一通り構築作業は完了です。
微調整をこれからも入れていくかと思いますが、これからはメインコンテンツの提供に注力していきたいと思います。