無料はてなブログ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設置場所

もしトップページやカテゴリー/アーカイブ、個別記事すべてに広告を出すとしたら、サイドバーに入れてしまうのが手っ取り早い。

最初はレクタングル大(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タグで配置するやり方が一番しっくりきた。

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