Blogger ブログで記事内に自動でアドセンスを設置する方法

こんにちは HARU（ @HARU ）です。

Google アドセンスなどの広告をブログに設置するとき、記事本文中に広告を設置したいと思うことありませんか？

いろいろなブログや Web サイトで見られるあの状態です。

通常、広告を記事本文中に設置する場合は、ブログ記事本文に広告コードを入力する必要があります。

自分でコード入力する分、広告の数、レイアウトなどを作り込みやすい反面、記事の執筆をしながら広告のコード入力も…。面倒ではありませんか？

そこで今回は more タグを使って、自動で記事本文内に広告の設置が行える方法を紹介したいと思います。

イメージとしては元々記事本文の外にあった広告を more タグの場所まで移動させる感じです。

私の場合、more タグを使うことで目次が自動で生成されるので、目次付近にアドセンスを設置するイメージとなります。

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

Blogger ブログ以外の場合、ラムネグさんの記事を参考にしてください。

Google アドセンスなどの広告を設置する

（１）以下のコードを Blogger のテンプレート（ テーマ ）にて検索します。

  
    <data:post.body/>
  

Blogger で QooQ のテンプレートを使用している方は、以下のどちらかを検索してください。

  
    <div id='ad-1'>

    または

    <div id='ad-2'>
  

（２）先ほど検索したコードの上下どちらかに、広告のコードを設置します。

設置した場所によって、デフォルトの広告表示位置が変わります。推奨位置は<data:post.body/> の下です。

  
    広告コード設置位置
    （ タイトルと記事本文の間 ）

    <data:post.body/>

    広告コード設置位置（ 推奨 ）
    （ 記事本文の下 ）
  

Blogger で QooQ のテンプレートを使用している方は、以下どちらかコード下に広告コードを設置します。

推奨位置は<!-- アドセンス広告2.start -->の下です。

  
    <!-- アドセンス広告1.start -->
    広告コード設置位置
    （ タイトルと記事本文の間 ）

    または

    <!-- アドセンス広告2.start -->
    広告コード設置位置（ 推奨 ）
    （ 記事本文の下 ）
  

これでひとまず、広告が記事本文の上もしくは下に表示されます。

下記例では記事本文の下に表示されています。

広告コードに ID を付ける

先ほど設置した広告コードに ID を付けます。

広告コードの前後を div で囲って ID を付与するイメージです。

  
    <div id="my-insert-ad">

      広告コード

    </div>
  

Script の追加

下記 Script を </body> の直上に設置します。

  
    <!-- アドセンス移動 -->
    <script>
    var parent = document.getElementsByClassName(&#39;post-body&#39;)[0];
    var ad = document.getElementById(&#39;my-insert-ad&#39;);
    var more = document.getElementsByName(&#39;more&#39;)[0];
    parent.insertBefore(ad, more);
    </script>
  

more タグを使って広告を移動する

記事本文の任意の場所に <!--more--> を追記することで、その場所に広告を表示させることができます。

<!--more--> を追記しない場合、広告表示位置は最初に設置した場所から変わりません。

  
    ブログ記事本文

    <!--more-->（ ここに広告が表示される ）

    ブログ記事本文
  

私の場合 more タグを使うことで目次が表示され、その上に広告が表示されるようになります。

目次の下に広告を表示したい

more タグによる目次の導入をしている方で、目次の下に広告を表示したい場合、Script の変更をする必要があります。

追加した Script コード を以下のコードに変更します。

  
    <!-- アドセンス移動 -->
    <script>
    var parent = document.getElementsByClassName(&#39;post-body&#39;)[0];
    var ad = document.getElementById(&#39;my-insert-ad&#39;);
    var more = document.getElementsByName(&#39;more&#39;)[0];
    parent.insertBefore(ad, more.nextSibling);
    </script>