かくてもあられけるよ

セミリタイアしてシェアハウスで暮らすノマドなミニマリストのライフハックブログ

無料はてなブログにGoogle AdSenseダブルレクタングル広告設置

無料版のはてなブログで、自分のAdSense広告を貼り込むのにベストなパターンを考えてみた。はてなが最初から配置しているAdSense広告と共存しながら、いかに広告効果が高い位置に表示するかが肝だ。

スマホサイトへのAdSense設置は諦める

かつては無料版のはてなブログでも、レスポンシブ設定で自前のAdSense広告を埋め込む方法があったらしいが、現時点では運営側の仕様変更により不可能になっている。

レスポンシブ対応テーマを使って、無料版でもスマホ版ページをカスタムすることはできるが、広告だけは強制的に、はてなAdSenseが3つ表示されてしまう。そのため、サイドバーなどに自作の広告表示コードを埋め込んでいると、1ページに4つ以上のAdSense広告が表示されてしまい、Google規約違反になってしまう。

詳細設定で「トップページの記事数(PC版)」を減らしたりしても、スマホページには反映されなかった。いろいろ試してみたが、結論として現状では、無料版のはてなブログを利用している限り、スマホ向けに自分のAdSense広告を出すことはできないようだ。

以下の方法を試す際は、スマホサイトに4つ以上のAdSense広告が表示されないよう、レスポンシブ機能はオフにしておこう。

PCサイトで自分のAdSenseを置ける数

まず、既存の状態で、はてなAdSense広告がどのように表示されるか分析してみた。 トップページで3記事以上表示していると、各記事の下にAdSenseがそれぞれ出現してしまい、自分の広告を貼る余地がなくなる。そのため、もしトップページに広告を貼りたいなら、表示記事数を2以下に設定する必要がある。また、個別記事のページでは、記事の下に、はてな側のAdSenseが1個だけ表示される状態なので、自前のものを最大2個追加できるはずだ。

PC版、最適なAdSense設置場所

もしトップページやカテゴリー/アーカイブ、個別記事すべてに広告を出すとしたら、サイドバーに入れてしまうのが手っ取り早い。自分も最初はレクタングル大(336x280)をサイドバーの一番下に配置してみたが、どうもこれではインパクトが弱い気がする。しかも致命的なのは、レスポンシブル対応のテーマの場合、ブラウザ幅を狭めるとサイドバーがメイン記事の下に移動してしまい、自分の広告はページの最下部に押しやられてしまう。

改良方法を調べていると、記事下にAdSense広告を横に2つ並べた「ダブルレクタングル」スタイルの収益効果が高いといわれているらしい。確かにページ上部に目立つ広告が出ているといやらしい気もするし、記事中に配置してもそこで流出して最後まで読んでもらえないと、ちょっと寂しい。理想的には記事を全部読んでもらって、自然に目にとまる位置に広告があるとよさそうだ。

しかも通常であればシェアボタン、はてなAdSenseのさらに下に広告表示されてしまうところ、JavaScriptを使って動的に記事直下に移動する裏ワザがあるらしい。Googleのポリシー的にはグレーな気もするが、多くのはてなブログサイトで採用されているテクニックなようなので、ひとまず現状で問題はなさそうだ。

スマホサイトでメインコンテンツを押しのけてAdSenseを目立つ位置に表示するのは明確にポリシー違反だが、今回はレスポンシブ機能をオフにして、スマホ版に設定が反映されないようにしてあるので、問題ないはずだ。

ダブルレクタングル広告設置サンプルコード

記事直下にレクタングル大(336x280)を横並びで2つ表示するサンプルコードをつくってみた。

<div id="ads" style="width:692px;">
    <div style="font-size:small;">スポンサードリンク</div>
    <div style="float:left;width:336px;">
        <!--任意のAdSenseコード(左側)-->
    </div>
    <div style="float:right;width:336px;">
        <!--任意のAdSenseコード(右側)-->
    </div>
</div>
<script>
   var ads=document.getElementById("ads");
   var tmp=ads.cloneNode(true);
   ads.parentNode.removeChild(ads);
   document.getElementsByClassName("entry-content")[0].appendChild(tmp);
</script>

CSSもタグ中に埋め込んだので、任意のAdSenseコードに差し替えて、デザイン>カスタマイズ(スパナアイコン)>記事>記事下にコピペすればOKだ。デザインCSSへの追加は必要ない。

当ブログのデザインテーマはInnocentを利用させていただいているが、広告部分の横幅は692pxとして、336x280サイズのレクタングル大を横に並べて20pxほど間隔を空けるとよさそうな見た目になった。 広告サイズやメインカラムの幅に合わせて、widthの数値は適当に変更してほしい。tableやulタグを使ったレイアウトも試してみたが、自分的にはこのdivタグで配置するやり方が一番しっくりきた。


なおこの方法では個別記事の直下に広告表示するので、トップページやカテゴリー/アーカイブページには広告が出ないので、ご注意を。どうしてもまんべんなく出したければ、サイドバーやフッターに配置すればよいだろう。

記事直下ダブルレクタングルの効果はこれから検証するが、おそらく現時点では最も効率的なAdSense配置方法なはずだ。