はてなブログのアドセンス広告を流行りの「ダブルレクタングル」に変えてみた

どうも！【ほほなっつ】です。

最近やたらと見かける記事下のダブルレクタングル広告ユニット

こんなやつ

アドセンス広告を2つ横に並べて表示させられる広告ユニットですね。

大手メディアや、有名ブロガーさん、中堅ブロガーさんの記事下はだいたいこのダブルレクタングルです。

そんなこと知っちゃったらミーハーな私も真似しちゃうよ？

って事で、当ブログ「まひ☆まり劇場」の記事下の広告ユニットをダブルレクタングルに変更しました！

はてなブログにダブルレクタングルを表示させる方法

［ブログ＿ダブルレクタングル］で検索かけたら、その概要や、やり方などが腐る程出て来ます。この記事でもはてなブログにダブルレクタングルを表示させる方法を紹介します。

手順は以下の通り

1. アドセンスコードを2つ取得

Googleアドセンスの広告ユニットの作成から、ダブルレクタングルで表示させたいサイズのコードを2つ取得します。

ダブルレクタングルの左右それぞれの広告サイズは、一般的に「336×250」か「300×250」のどちらか。

私は普段から「336×250」サイズのレクタングル大を使用しているので、今回も「336×250」をチョイスしました。

ここで取得したコードの名前をそれぞれ、「アドセンス１」と「アドセンス２」としておきます。

2. ダブルレクタングルのコードを作成

先に取得しておいた2つのアドセンスコードを、以下のダブルレクタングルのコード「ここにアドセンス１を入れる」と「ここにアドセンス２を入れる」にそれぞれ流し込む。

<div id="my-footer">
<p style="text-align: center; font-size: 75%;">スポンサーリンク</p>
<table class="table-css">
<tr>
<td class="td-css">ここにアドセンス１を入れる</td>
<td class="td-css">ここにアドセンス２を入れる</td>
</tr>
</table>
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

一応PCとスマホで、広告の表示を切り替える設定もしておきましょう。

以前はスマホでアドセンス広告を２つ以上並べて表示する事が規定違反にあたっていました。

今現在（※2018.4/1）は規約違反にはあたりませんが、スマホで広告が連続して表示されるのは見ている側からしたらちょっと鬱陶しいので、PCではダブルレクタングル表示、スマホでは単体のレクタングル表示になるよう手を加えてあげます。

ダブルレクタングル用に取得した２つのアドセンスのコードのどちらか１つに、以下のコード変更を行ってください。

アドセンスのコードの以下の部分を

ins class="adsbygoogle"

下記に変更します。

ins class="adsbygoogle mobile"

上記コード変更を行う事で、PCではダブルレクタングル、スマホではレクタングル単体で表示されるようになるので、是非やっておきましょう。

3.コードを記事下に貼り付ける

上記のコードをデザイン > カスタマイズ > 記事下に貼り付ける。

記事上でも問題はないと思いますが、記事上にダブルレクタングル広告が貼られているブログを私は、まだみた事がないので、特にこだわりがなければ記事下が良いと思います。（記事の中盤あたりでのダブルレクタングル配置も割と良さそうです）

4. CSSの設定

以下のコードをデザイン > カスタマイズ > デザインCSSに貼り付ける。

@media screen and (max-width: 680px) {
.mobile{
display: none !important;
}
}
.table-css, .td-css {
border-style:none;
margin:0 auto;
}

これでダブルレクタングルの設定は完了。

当ブログの広告ユニットの種類と配置場所を教えます

私は当初、アドセンスの広告はレスポンシブを採用し、配置場所をヘッダー、フッター、サイドバー、記事中と決めていました。

しかし、検索流入からダイレクトに記事が読まれる事を意識した時に、「誰がヘッダーやフッターを見るんだ？」と疑問が。

正直自分のブログのヘッダーやフッターなんて余程のことがない限り本人以外意識して見ませんよね。サイドバーもしかり。

広告自体余程の事がないと押されないのに、余程と余程が重ならない限り押されもしないフッター、ヘッダー、サイドバーの広告配置は自分の中でナンセンスと結論づけ、取りやめることに。

試行錯誤を重ね、新しく取り入れた広告配置は、

しかしこの配置でもそれほどクリック率は上がらず、思った効果は得られませんでした。

デバイスやその時々によって広告サイズがコロコロ変わるレスポンシブ広告がうまく機能していないのかな？と考え、更に試行錯誤を重ね、ようやく行き着いたのが今現在（※2018.6.20）の配置

先程いらないと判断したサイドバーには、新たに
ラージスカイスクレイパーを採用。

イマイチ成果が上がらなかったのは、以前のサイドバーの広告場所と、サイズが一定ではないレスポンシブが噛み合わなかった事が原因だと考え、今回はめちゃくちゃ大きいサイズの広告を、ファーストビューで目につくサイドバー上に配置してみることにしました。

この配置にしてからまだ日が浅いので、結果報告はまた後日の記事にまとめます。

まとめ

少し話がそれましたが、ダブルレクタングルの設定は誰でも簡単にでき、その広告効果は先輩ブロガーさん達のお墨付き！

個人的にもとてもオススメなアドセンス配置なのでぜひ試してみてね。

余談ですが、ラージスカイスクレイパーってネーミング誰がつけたんでしょうね 笑。めちゃくちゃかっこよくて気に入ってます。

＼あわせて読んで貰いたい記事／
www.hohonut.com

www.hohonut.com