最初に読んでもらいた記事Picup5

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

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

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

こんなやつ
f:id:mahix2:20180401234359j:plain

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

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

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

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

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

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

手順は以下の通り

  • アドセンスコードを2つ取得
  • ダブルレクタングルのコードを作成
  • コードを記事下に貼り付ける
  • CSSの設定
1. アドセンスコードを2つ取得

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

f:id:mahix2:20180402111830j:plain

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

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

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

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

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

<div id="my-footer">
<p style="text-align: center; font-size: 75%;">スポンサーリンク</p>
<table class="table-css">
<tr>
<td class="td-css">ここにアドセンス1を入れる</td>
<td class="td-css">ここにアドセンス2を入れる</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とスマホで、広告の表示を切り替える設定もしておきましょう。

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です