無料版のはてなブログで、自前の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設置場所
もしトップページやカテゴリー/アーカイブ、個別記事すべてに広告を出すとしたら、サイドバーに入れてしまうのが手っ取り早い。
最初はレクタングル大（336×280）をサイドバーの一番下に配置してみたが、どうもこれではインパクトが弱い気がする。しかも致命的なのは、レスポンシブル対応のテーマの場合、ブラウザ幅を狭めるとサイドバーがメイン記事の下に移動してしまい、自前広告はページの最下部に押しやられてしまう。
改良方法を調べていると、記事下にAdSense広告を横に2つ並べた「ダブルレクタングル」スタイルの収益効果が高いといわれている。確かにページ上部に目立つ広告が出ているといやらしい気もするし、記事中に配置しても流出されるのも悲しい。理想的には記事を全部読んでもらって、自然に目にとまる位置に広告があるとよいだろう。
通常であればシェアボタン、はてなAdSenseのさらに下に広告表示されてしまうところ、JavaScriptを使って動的に記事直下に移動する裏ワザがあるとわかった。Googleのポリシー的にはグレーな気もするが、多くのはてなブログサイトで採用されているテクニック。ひとまず現状では問題なさそうだ。
※スマホサイトでメインコンテンツを押しのけてAdSenseを目立つ位置に表示するのは明確にポリシー違反だが、今回はレスポンシブ機能をオフにして、スマホ版に設定が反映されないようにしてある。
ダブルレクタングルのサンプルコード
ブログ記事直下に、レクタングル大（336×280）を横並びで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として、336×280サイズのレクタングル大を横に並べ、20pxほど間隔を空けるとちょうどいい見た目になった。
広告サイズやメインカラムの幅に合わせて、widthの数値は適当に変更してほしい。tableやulタグを使ったレイアウトも試してみたが、個人的にはこのdivタグで配置するやり方が一番しっくりきた。
なおこの方法では個別記事の直下に広告表示するので、トップページやカテゴリー/アーカイブページには広告が出ない。全ページに広告を表示したければ、サイドバーやフッターに配置するしかないだろう。