ANAマイル貯めて海外ディズニー格安旅行したい

今のところWDW2回/上海ディズニー1回の海外ディズニー歴です。ANAマイルを貯めて格安海外ディズニー旅行を目指します!2017年はSFC修行も計画中。

ANAマイル貯めて海外ディズニー格安旅行したい

Google Adsense(グーグルアドセンス)の自動挿入をカスタマイズした話

先日、Google Adsenseに合格したので早速利用しています。

アドセンス広告は専用のコードを設置することで表示されますが、記事を書くたびに設置するのは大変なので自動挿入を利用しました。

Adsense-custom

さらにカスタマイズすることで自分が望んだ結果になりましたので紹介します。

やりたいこと

まずはやりたいこと(ゴール)を定めます。

  • 好きな場所に広告を表示したい
  • 毎回設置するのは大変なので嫌だ

 

つまり、好きな場所に自動挿入できればよいということです。

 

自動挿入について

「はてなブログ Google Adsense 自動挿入」で調べるとたくさん方法がでてきます。

その中で参考にさせて頂いたのは「まるとANAの旅事情」様の記事です。

www.kanamalu.com

 

上記で紹介されているのは、

  • Google Adsense広告を記事中に自動挿入する
  • 特定の記事でGoogle Adsense広告を非表示にする

の2つの機能が備わったものです。

いまのところ広告非表示の部分は未使用ですが、いまのうちに埋め込んでおきます。

 

広告の挿入位置

広告の挿入位置は以下が選択できます。

  • 大見出し・中見出し・小見出しの前後(何番目の見出しかを選択)
  • フッター先頭

見出しの前後は広告設置に良さそうな場所ですよね。

 

広告をどこに表示させるか

広告をどこに表示させるかを考えるために、まずは記事の構成について確認します。

 

記事の構成

本ブログでは記事を書くときに下記の構成になるようにしています。

  • 導入
  • 目次
  • 本文
  • まとめ

目次の後に最初の大見出しがくるようになっています。本文のボリュームによって大見出しの数が変わってきます。

最後の大見出しは必ず「まとめ」の見出しとなる構成です。

 

広告を表示する場所

素人考えですが、広告を表示する場所は以下としました。

  1. 1つ目の大見出しの前(目次の後)
  2. 3つ目の大見出しの前
  3. まとめの大見出しの前
  4. フッター先頭

例えば【ANAマイル】年間216,000マイルためて、ビジネスクラスでウォルトディズニーワールドに行こうの記事の目次を用いて説明すると以下になります。

Adsense-custom

①と②と④は「まるとANAの旅事情」様の方法で実現できます。

問題は③です。なぜなら大見出しの数は記事によって変化するんです。

 

この問題を解決するためにカスタマイズを行いました。

 

カスタマイズ内容

まとめの大見出しの前に広告を表示します。大見出しの数は記事によって異なりますが、まとめの大見出しは必ず最後の大見出しになります。

この「必ず最後」の部分がプログラムでうまく表現できれば、カスタマイズできると考えました。

 

コードを確認

カスタマイズ元となるコードを確認します。

上記で紹介した記事を参考に「大見出しの8つ目の前」に挿入するコードを作成しました。

Adsense-custom

ポイントは24行目です。

$target.eq(7).before($('.insentense-adsense8'));

大見出しの8つ目と設定したので7という数値が設定されています。

この部分が大見出しの数によって可変にできれば良いと考えます。

 

大見出しの数を取得する

またまたGoogle検索で調べたところ、以下のコードで全ての見出しが取得できます。

document.querySelectorAll(".entry-content")[0].querySelectorAll("XX")

XXの部分にどの見出しの数を数えるかを指定します。

 

指定する見出しの確認

今までの説明で「大見出し」と言っていましたが、コード的にいうと「h2」「h3」などになります。見出しのコードは、HTML編集モードで確認できます。ちなみに、はてなブログの見たまま編集で設定する「大見出し」は「h3」です。

document.querySelectorAll(".entry-content")[0].querySelectorAll("h3")

上記でh3の全ての見出しが取得できます。複数の見出し(大見出しと中見出しの合計数)を指定したい場合は"h3,h4"と記述すればよいようです。

 

見出しの数を取得

上記で取得した見出しに「length」というコードを使うと、見出しが何個設定されているかが取得できます。

var items = document.querySelectorAll(".entry-content")[0].querySelectorAll("h3");
var num = items.length;

上記のコードの変数:numに見出しの数が格納できました。

 

修正箇所

それでは実際に修正してみます。

あくまで素人のカスタマイズなので、ご自身のブログに適用する場合はバックアップを取得し、十分な動作確認をお願い致します。
動作不良、エラー等の不具合が発生しても本ブログでは対処できませんので、あくまで自己責任でお願い致します。

 

修正コード

見出しの数を取得して変数に格納します。

var items = document.querySelectorAll(".entry-content")[0].querySelectorAll("h3");
var num = items.length;

 

見出しの何番目という部分を修正します。

$target.eq(num-1).before($('.insentense-adsense8'));

「-1」しているのは「8つ目のときは7」のルールに合わせるためです。

詳しく説明すると配列やらインデックスやらがでてきて大変なので、知りたい人はGoogle先生に聞くといいと思います。

 

カスタマイズ結果

カスタマイズした結果、全体のコードは以下になります。

Adsense-custom

22行目、23行目を追加したのと、27行目の「num-1」部分を変更しています。

 

設定方法

カスタマイズ結果のコードをはてなブログに適用するためには「記事上下のカスタマイズへの設定」が必要です。

デザイン→カスタマイズ→記事→記事上下のカスタマイズ

と進みます。

記事上、記事下どちらに設定してもOKです。私は記事下に設定しました。

「記事ページをプレビュー」をONにしておくと、即時確認できるのでお勧めです。

 

動作確認

設定ができたら動作確認します。

大見出しの数が異なる記事を複数確認してみましょう。

 

大見出し:6個(6がまとめ)

【SFC修行】30万円以下(PP単価:6円以下)の格安SFC修行工程を紹介します

 

大見出し:4個(4がまとめ)

Google Adsense(グーグルアドセンス)の審査が通りました【2017年4月】

 

まとめ見出しの連番が異なっても、まとめの前に広告が表示されました。

この記事のまとめ見出しは次なので、きっとこの文章の下にも広告が表示されていることでしょう。

 

まとめ

Google Adsense広告を自動挿入するカスタマイズの紹介でした。

まとめの前に広告表示にこだわって試行錯誤しましたが、広告収益に影響あるかはわかりません。自己満足だけかもしれません。

 

でも自分オリジナルのカスタマイズを加えることで、より一層ブログに愛着がわいてきました。

それだけでも頑張ったかいがあったな、と思います。

 

参考になれば嬉しいです。

 

Google Adsenseの審査についてはこちらをどうぞ。

 

にほんブログ村 小遣いブログ ANAマイル・SFC修行へ

TOPへ
Copyright © 2017 ANAマイル貯めて海外ディズニー格安旅行したい All rights reserved.