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

しろかい!

アプリ開発や機械学習などの開発Tips.

【はてなブログ】ほぼコピペでOK!任意の場所にAdsenseを自動挿入する方法

はてなブログではテンプレのHTMLを弄ることができないので,好きな場所にAdsenseを挿入するには色々と面倒なことをしないといけません.
そこで本記事では,jQueryのコードをコピペするだけで,テンプレの任意の場所にAdsenseのコードを自動挿入する方法を紹介します.

方法をざっくり説明

HTMLを編集できない環境下で,任意の場所にAdsenseのコードを自動挿入するために,jQuery を利用します. jQuery を使用すれば,任意のHTMLタグや,クラスの前後などに好きなコードを追加することができます.
これを利用して,HTMLを編集することなく,テンプレの任意の場所にAdsenseのコードを挿入します.

では,以下よりその方法を説明していきます.
ほぼコピペでいけるはずです!

jQuery の読み込み

既に読み込んでいる場合はスキップして下さい.

はてなブログの管理画面から, 設定 -> 詳細設定 -> headに要素を追加 のテキストボックスに以下を追記します.

<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE8]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->

これで jQuery が読み込まれるようになります.

広告コードの取得

Adsenseの管理画面の「広告の設定」より,挿入したい広告のコードを取得します. f:id:shun9167:20150706171921p:plain
取得したコードからは,全ての改行を削除しておいて下さい.

Adsenseを自動挿入するコードを追加

はてなブログの管理画面から, デザイン -> カスタマイズ -> フッタ のテキストボックスに自動挿入のコードを追加します.
広告を挿入したい位置によってコードが若干異なるので,需要が高そうな位置のコードを4つ紹介します.
下記のコードを追加して変更を保存したら,実際に挿入したかった位置にAdsenseが表示されているか確認して下さい.

/* 広告コード */ の部分には,前のステップで取得したAdsenseの広告コード(改行削除済)に置き換えて下さい.
さらに、広告コード内の</script>のスラッシュを、<\/script>のようにバックスラッシュでエスケープしないとエラーが出るようですのでお気をつけください。
(JSを外部ファイル化する場合はエスケープの必要はありません)

記事タイトル直下

記事のタイトルのすぐ下にAdsenseを挿入します.

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content").first().prepend(adsCode);
  });
</script>

記事本文中の最初からn番目の見出し <h3> ~ </h3> の直前

記事本文(.entry-content)内の,上からn番目に現れる <h3> ~ </h3> の直前にAdsenseを挿入します.

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(n-1).before(adsCode);
  });
</script>

n-1 を適切な数字に置き換えて下さい.
例えば,2番目の <h3> ~ </h3> の直前にAdsenseを挿入したい場合は以下のようになります.

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(1).before(adsCode);
  });
</script>

しろかい!の記事本文の中ほどに貼られているAdsenseはまさにこの位置です.(この記事を執筆した時点での位置)

記事本文中の最初からn番目の見出し <h3> ~ </h3> の直後

記事本文(.entry-content)内の,上からn番目に現れる <h3> ~ </h3> の直後にAdsenseを挿入します.

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content h3").eq(n-1).after(adsCode);
  });
</script>

n-1 は上記同様,適切な数字に置き換えて下さい.

記事本文中の最初からn番目の段落 <p> ~ </p> の直後

<script>
  $(document).ready(function() {
    var adsCode = '/*広告コード*/';
    $(".entry-content p").eq(n-1).after(adsCode);
  });
</script>

n-1 を上記同様,適切な数字に置き換えて下さい.

複数の位置に自動挿入する場合

Adsenseは1つのページに最大3つまでコンテンツ向けユニットを設置できるので,複数の位置に自動挿入したい場合もあるかと思います.
上記のコードを2つ,3つ貼っても構いませんが,それだとコードの重複が起こってしまうので,以下のようにするといいです.

<script>
  $(document).ready(function() {
    // 2番目の<h3>の直前
    var adsCode = '/*広告コード1*/';
    $(".entry-content h3").eq(1).before(adsCode);

    // 3番目の<h3>の直前
    adsCode = '/*広告コード2*/';
    $(".entry-content h3").eq(2).before(adsCode);
  });
</script>

まとめ

ほとんどコピペだけで任意の場所にAdsenseを自動挿入する方法を紹介しました.
この方法は,はてなブログに限らず,任意のWebサイトで利用することができます(コードの改変が必要です).
テンプレート式のサイトで,ページの途中にAdsenseを自動的に挿入したい場合にも使えます.
ページ毎に手動で広告コードを挿入されている方も見かけますが,後で変更する時に大変ですし,ページを増やすたびにコードを追加する必要があるので,この自動挿入をおすすめします.

是非使ってみてください!