ボム君.com

読者です 読者をやめる 読者になる 読者になる

ボム君.com

好きをお金にする私の生き方

【Adsense】はてなブログで記事下ダブルレクタングルの設定をしてみたよ

f:id:powerbombkun:20170429095836p:plain

こんにちは、ボム君です。

今回ははGoogleAdsenseの設定についてのお話です。


広告の配置ってみなさんこだわっていますか?

私もど素人なのでよく知らなかったんですが、最近いろいろ調べてたらダブルレクタングルという広告配置がなかなかおすすめだというのが見つかりました。

設定とか少し面倒だったので、まとめておきますね。

ダブルレクタングルとは

レクタングル形式のGoogleアドセンス広告を2つ並べた設定のことです。

画面イメージ↓

f:id:powerbombkun:20170429095432p:plain

こんな感じで赤枠の箇所のように2つ広告を横に並べることで収益率が上がる言われおり、多くのブロガーさんが記事下にダブルレクタングルで広告設定しています。

私が参考にしているやぎろぐでもダブルレクタングルをやってます。

ということで、このブログでも配置をマネさせてもらいました。

設定の仕方

はてなブログの設定は以下の箇所を変える必要があります。

  1. 広告ユニットの準備
  2. デザイン変更:記事下
  3. デザイン変更:デザインCSS

以下が変更の詳細です。↓

記事下の設定変更

①:広告ユニット準備

ダブルレクタングルはその名の通りレクタングル形式の広告を2つ使って表示します。

まずはAdsenseの設定画面で広告ユニットを準備しましょう。

自分のGoogleAdsenseのページから 広告の設定 > 広告ユニット を選択して、以下の赤枠の箇所をクリック。
f:id:powerbombkun:20170429091052p:plain

広告ユニットの画面が表示されます。

ここで広告サイズで300×250のレクタングル形式の広告を選択し、名前をつけておきます。
※後でどの広告がどの程度クリックされたか分かるように、適当な名前ではなく後で見て分かる名前にするのがおすすめです。
f:id:powerbombkun:20170429091321p:plain

記事下に2つ広告を表示するので、もう1つ同じ設定で名前だけ違う300×250のレクタングル形式の広告を用意しておきましょう。

②:挿入用コードをコピー

以下の挿入用のコードを一旦エディタ(メモ帳等に)コピーしてください。

<div id="my-footer">
<p style="text-align: center; font-size: 75%;">SPONSORED LINK</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>

※記事下の広告は収益率が高いということで記事下に入れ込むコードを設定しています。以下のサイトを参考にしました。
chipspd.hatenadiary.jp

③:広告コードを設定

①のコードをエディタにコピーしたら、次に「ここにアドセンスコードを入れる」の箇所を設定したいアドセンスの広告コードに書き換えます。

広告コードは①:広告ユニット準備で用意したものを使います。

自分のGoogleAdsenseのページから 広告の設定 > 広告ユニット を選択して、以下の赤枠の箇所をクリック。
f:id:powerbombkun:20170429090530p:plain

赤枠の箇所に表示されているコードをコピーしてきてください。
f:id:powerbombkun:20170429085745p:plain


※②の挿入用コード内に記載している「ここにアドセンスコードを入れる」の上側の方が記事下の左に表示される広告、下側の方が記事下の右に表示される広告です。

④:スマホ用にコードを変更

次にPC版とスマホ版で表示を切り替えるように設定をします。

何でこんな設定が必要かというと、PC版ではダブルレクタングルで良いですが、スマホ版ではアドセンス広告を2つ並べて表示するのがポリシー違反になるからです。

なので、PC版ではダブルレクタングル表示でスマホ版では1つのレクタングル表示にします。

取得したアドセンスコードでスマホ版で非表示にしたいどちらか1つの広告コードの以下の箇所を変更します。

ins class="adsbygoogle"

この部分のコードを以下のように変更する。↓

ins class="adsbygoogle mobile"
⑤:コードをコピペ

④までの手順で作成したコードをはてなブログの設定画面画面からデザイン > カスタマイズ > 記事 > 記事下 の箇所にコピペ。

以下の赤枠の箇所です。↓
f:id:powerbombkun:20170429083401p:plain


これで記事下の設定は完了で、後はデザインCSSの設定が必要です。

デザインCSS設定変更

以下のコードをデザイン > カスタマイズ > デザインCSSにコピペしてください。

/* アドセンススマホ対応 */
@media screen and (max-width: 680px) {
  .mobile{
    display: none !important;
  }
}

/* テーブルの線非表示,中央寄せ */
.table-css, .td-css { 
    border-style:none;
    margin:0 auto;
}

※このブログではテーマで『ZENO-TEAL』を使用しており、tableを使うと自動で枠線が付いたりするため、非表示化設定等をしています。


ここまで終わったら変更を保存してPCとスマホそれぞれで表示を確認してください。

PCではダブルレクタングル、スマホでは1つレクタングルで表示されていればOKです。


※2015/5/20追記
現在PC版はダブルレクタングル、スマホ版はレスポンシブの広告設定にしています。

こちらで設定用の記事を書いていますので興味があればどうぞ。