はてなブログのヘッダー下に無理矢理AdSenseのビックバナーを貼るCSS

当ブログのAdSenseは、個別記事内にレクタングル３つ。先日、４つ目となるAdSenseをトップページのブログタイトル下、いわゆるヘッダー下に試験導入してみたので、その手順と結果をご報告します。

ヘッダー下にAdSenseを貼ったきっかけ

５月現在、当ブログのトップページにAdSenseはありません。以前はサイドバー最上部にラージビックスカイクレイパーを設置していましたが、クリック単価が低く収益も非常にしょっぱい感じだったので、二ヶ月ほどで撤廃。そして、ラージスカイスクレイパーと共に、ヘッダー下に設置していたグローバルナビゲーションも取り外しました。

私は普段からPCでもスマホでもナビを全く使わないので、以前から「グローバルナビやハンバーガーメニューは本当に必要なのか？使う人いるのか？」と疑問に思ってたんですね。そこでブログにヒートマップを仕込んでしばらく様子見していたところ、どの端末でもほとんどクリックされてなかったので一緒に取っ払ってしまおうと。

そこから「ナビを外すとトップページが殺風景になるからヘッダー下にAdSenseのビックバナー置けないもんか……」と考えはじめ、物は試しということで先月初旬、１週間ほど導入してみたわけです。仮に失敗しても、単価が下がる４月ならそれほど損益出ませんし。

当ブログのレイアウト

ヘッダー下にAdSenseを設置する前後のレイアウトは、こんな感じです。

AdSense設置前

AdSense設置後

このレイアウトのまま１週間様子を見たんですが、当ブログの場合は「ヘッダー下AdSenseは単価こそ全AdSenseの中で最も高いものの、クリック率は１番低い」という結果に。「ヘッダー付近の広告はクリック率が悪い」という話は有名ですが、雑記ブログも例外ではないようです。

はてなブログのヘッダー下に（無理矢理）AdSenseを設置する

ヘッダー下にAdSenseを設置する方法は、使用しているテンプレートによって異なります。当ブログが使用しているのは、はてなブログのテーマストアで手に入るレスポンシブ対応の「Blank」。「Blank」は、CSSでレイアウトを一切カスタマイズしていない状態なら、タイトル下にAdSenseコードを貼り付けるだけで、ビックバナーが表示される仕様になっています。

しかし、私はCSSで色々とレイアウトをいじっているため、AdSenseのレスポンシブ広告ユニットそのままタイトル下にコードを貼り付けると、かなり悲惨なことに……。

AdSenseのレスポンシブ広告ユニットをそのまま貼り付けた結果

ご覧のとおり、AdSenseが見事にはみ出ているうえ、下のコンテンツにもガッツリ被る。というわけで、これをCSSでスタイリングしてみます。

CSSでスタイリングした結果（PC表示）

レスポンシブ広告ユニットをヘッダー下に貼り、PC表示の場合はレスポンシブ広告かビックバナー、もしくはラージビックバナーが表示されるように調整。モバイル表示の場合はレスポンシブ広告、ビックモバイルバナー、モバイルバナーのいずれかが表示されるようにしてみました。

CSSでスタイリングした結果（モバイル表示）

【備考：主要な広告サイズ】

ヘッダー下に（無理矢理）AdSenseを設置した手順

 １、レスポンシブ広告ユニットのコードを作成

まずはAdSenseのサイトへ行き、レスポンシブ広告ユニットを作成しました。このソースコードをコピーし、はてなブログのデザイン→ヘッダー→タイトル下に追加。コードを<div></div>で囲み、任意のクラス名を付けておきます。今回は.topadというクラス名にしました。

２、CSSでスタイリング

ほとんどのテンプレートはAdSenseコードをそのまま貼り付けるだけで問題ないと思います。しかし、当ブログはレイアウトが崩れてしまうので、CSSでスタイリング。デザインCSSを開き、タイトル下モジュールの中に以下のコードを追加しました。

.topad{
height:100px;
display:block;
}
#top-editarea {
margin: 0 auto;
margin-bottom:10px;
height:100px;
max-width: 1056px;
padding: 0px 20px;
}
#content {
padding-top: 20px;
}
#blog-title {
padding: 20px 0px 20px 0px;
}
@media screen and (min-width: 600px) {
#top-editarea{
margin-bottom:10px;
}}
@media screen and (max-width:960px){
#content{
padding-top: 20px;
}}

当ブログの横幅はパソコン表示だと1056pxなので、max-widthも同じ値に。タイトルとAdSenseと記事タイトルが近すぎると誤クリックが多発するため、paddingを使用し、十分な余白を取っています。CSSでスタイリングした後は、こんな感じのレイアウトになりました。

まずはPC表示（レスポンシブ）

PC表示２（ビックバナー）

モバイル表示