概要

• 広告は、目に入らなければ意味がない
• はてなブログのデフォルトだと記事下の広告はソーシャルボタンの下になる
• 記事本文のすぐ下に広告を貼る方法を紹介
• JavaScriptは勉強しておくと便利

Google AdSenseに限らず、広告で収益を得ようとする場合は「ユーザの目線」を意識するのが鉄則です。視界に入らない広告はクリックされようがないので。

はてなブログではページのヘッダ・フッタとは別に「記事上」「記事下」のカスタマイズが可能で、この機能を使うことにより個別の記事ページに広告を配置することが出来ます。

最近ではほとんどのユーザがソーシャルメディアや検索サイトから個別の記事に直接やってくるため、個別記事のページをいかに最適化できるかが勝負の分かれ目となります。

「記事下」に広告を貼ると、デフォルトではシェアボタンの下に来る

ところで、はてなブログで「記事下」に広告のタグを貼ると以下の様な配置になります。

できる100ワザ Google AdSense 必ず結果が出る新・ネット広告運用術 - 染谷昌利, できるシリーズ編集部 - Google ブックスにも書いてあるように、おそらくユーザは記事を読んだ後に「この記事はどれくらい人気なのか」を無意識に気にしています。そこで見るのがTwitterやFacebookのシェアボタンで、そこにあるシェア数をもって記事の人気度合いを測るわけです。

そのためシェアボタンの下に広告が来る「記事下」のデフォルト配置だと、ユーザはシェアボタンを見た時点で満足してしまって広告が目に入らず、クリック率は低くなるのではないかと予想されます。

記事本文のすぐ下に広告を移動するためのコード

「記事下」のカスタマイズをやめて記事本文内に広告のタグを貼ればこの問題は回避できるのですが、一つ一つの記事でそんなことをするのは流石に面倒すぎます。そこで、全記事に適用される「記事下」に以下のようなコードを指定することで、記事本文のすぐ下にAdSense広告を移動できます。

(AdSense本体のコードは適宜自分用のものに置き換えて下さい)

<!-- Google AdSense -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="[YOUR CLIENT ID]"
     data-ad-slot="[YOUR SLOT ID]"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- 記事本文のすぐ下に移動。ただしIE8などの古いブラウザを除く -->
<script>
    if ( document.getElementsByClassName ) {
        var inserteds = document.getElementsByTagName("ins");
        var footerAd = inserteds[inserteds.length - 1];

        var entryContent = document.getElementsByClassName("entry-content")[0];
    
        var sponsorLink = document.createElement("div");
        sponsorLink.textContent = "スポンサーリンク";
        sponsorLink.style.cssText = "font-size:70%";
    
        entryContent.appendChild(sponsorLink);
        entryContent.appendChild(footerAd);   
    }
</script>

当ブログのように小さめの文字で「スポンサーリンク」を入れる場合は以下の様なコードになります。

<!-- Google AdSense -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="[YOUR CLIENT ID]"
     data-ad-slot="[YOUR SLOT ID]"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- 記事本文のすぐ下に移動し、「スポンサーリンク」も追加。ただしIE8などの古いブラウザを除く -->
<script>
    if ( document.getElementsByClassName ) {
        var inserteds = document.getElementsByTagName("ins");
        var footerAd = inserteds[inserteds.length - 1];

        var entryContent = document.getElementsByClassName("entry-content")[0];
    
        var sponsorLink = document.createElement("div");
        sponsorLink.textContent = "スポンサーリンク";
        sponsorLink.style.cssText = "font-size:70%";
    
        entryContent.appendChild(sponsorLink);
        entryContent.appendChild(footerAd);   
    }
</script>

この方法に問題はないの？

Modification of the AdSense ad code - AdSense Help を見た限りでは、ページ読み込み時に広告を一瞬「移動」すること自体には問題はなさそうです。

広告の下にソーシャルボタンを持ってくることにより記事がシェアされにくくなるのでは？という懸念を持たれる方もいるかと思いますが、大抵の人は単に広告を読み飛ばすのでシェアを阻害するほどの効果はないだろうと思っています。

まとめ

上記のコードはスマートフォン用のデザインでも同様に使えます。また、これを応用することによりスマートフォンの個別記事ページでブログタイトルのすぐ下に広告を配置することも可能です。

（余談: スマートフォン用のページに広告を配置した結果コンテンツが見えなくなっていると、AdSenseの規約違反になる可能性があります。参考記事: スマホのファーストビューにアドセンスをドンッは規約違反になる可能性が | ネットを使い在宅で仕事・副業をしてお金を安定して稼ぐ３０代ジョイのブログ)

そこまで難しいことをしているわけではないので、ブログのカスタマイズに興味がある人はJavaScriptをかじってみることを個人的にはおすすめします。はてなブログ以外でも、カスタマイズが可能なブログシステムなら応用が効くでしょう。

なお、今回の記事の「クリック率がおそらく低くなるだろう」「シェア数には影響がないだろう」という箇所については僕の完全な憶測であり、本来はデータを元に判断するべき内容です。誰かデータ取ってみて下さい。

また今回紹介したコードははてなブログのHTMLの構造に依存しているため、（おそらくそんなことはないだろうと思いますが）はてなブログに急なデザイン変更があった場合などに動かなくなる可能性があることに留意して下さい。

こんな記事もどうぞ

• ブログ超初心者向け広告の貼り方ガイド - エンジニアが株式投資と副業でセミリタイアを目指すブログ
• この10日間で6万PV達成した話と、今後の方針について - エンジニアが株式投資と副業でセミリタイアを目指すブログ
• 「しっきーのブログ」のオシャレな人気記事ウィジェットをあなたのブログにも - エンジニアが株式投資と副業でセミリタイアを目指すブログ