クイックノート

ちょっとした発見・アイデアから知識の発掘を

はてなブログにインフィード広告を貼る方法

インフィード広告とは、
記事一覧のようにリストアップされたコンテンツの中に、
溶け込むように配置される広告です。

f:id:u874072e:20190917150901p:plain:h200
記事一覧

Google Adsenseでは、
他のリスト要素と似せた広告を自動的に生成することができ、
サイト全体の外観を損なわない形で広告を挿入することができます。

広告を設置するためには、
設置したい場所に広告のHTMLコードを配置する必要があるのですが、
はてなブログ」では、記事一覧などのHTMLを直接編集できません。

そこで、JavaScriptを使って、
はてなブログで用意されているHTMLを上書きすることで、
広告を挿入する必要があります。

ここでは、
JavaScriptをあまり触ったことのない人でも、
何をしているかわかるように解説しながら、
はてなブログにインフィード広告を貼る方法を紹介します。

広告コードの用意

Google Adsenseからインフィード広告用のコードを取得します。

広告ユニットの生成

以下の手順でインフィード用の広告ユニットを生成します。
広告の見た目は自動的に指定したフィードを参考に整えてくれます。

  1. Google Adsenseにアクセスする

  2. 「広告」→「広告ユニット」を選択する

    f:id:u874072e:20190917151654p:plain:h200
    広告ユニットを開く

  3. 「インフィード広告」を選択する

    f:id:u874072e:20190917152033p:plain:h200
    インフィード広告を選択

  4. 「自動で〜」に広告を貼りたいページのURLを入力して「ページをスキャン」をクリック

    f:id:u874072e:20190917151925p:plain
    広告の作成方法の選択

  5. 広告を貼りたいフィードの要素を選択

    f:id:u874072e:20190917152411p:plain:h200
    広告を貼るフィードの要素を選択

  6. 右下の「次へ」をクリック

  7. 見た目を調整して「保存してコードを取得」をクリック

    f:id:u874072e:20190917152541p:plain:w300
    保存してコードを取得

広告コードを取得

広告ユニットを生成すると、
その広告を設置するためのコードが取得できます。

表示されたコードをコピーしておきましょう。

f:id:u874072e:20190917152918p:plain:w300
広告コードの取得

広告コードの文字列化

上で取得したコードをJavaScriptを使って、
広告を設置したい場所に挿入するのですが、
JavaScriptでは文字列としてコードを指定する必要があります。

広告コードの中には、改行やダブルクォーテーション、
scriptの閉じタグが入っており、
このままでは、JavaScriptの文字列としてコードを入力できません。

そこで、改行の除去、ダブルクォーテーション、
閉じタグのエスケープが必要になってきます。

ややこしそうですが、
下のボックスに取得した広告コードを貼り付ければ、
自動的に文字列化した広告コードを生成するようにしましたので、
お使いください。

Adsenseの広告コードを貼り付け↓ 文字列化した広告コード↓

上の文字列化した広告コードをコピーしておきましょう。

広告の設置

広告コードが準備できたら、
いよいよ広告を設置します。

フッターを編集する

ここでは広告挿入用のJavaScriptをフッターに記述することにします。
下の手順でフッターの編集画面を開きましょう。

  1. ブログの「デザイン」を開く

    f:id:u874072e:20190917153923p:plain:h200
    デザイン編集画面を開く

  2. 「カスタマイズ」→「フッター」を選択

    f:id:u874072e:20190917154034p:plain:h200
    フッターの編集

フッターのテキストボックスにJavaScriptを記述します。

jQueryを利用するため、
必要に応じて、jQueryを外部から読み込むようにしておきます。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

以下では設置するフィードに応じて記述するJavaScriptを紹介します。

記事一覧に広告を設置する場合

記事一覧のページに広告を設置する場合は、
下のようなコードをフッターに追加します。

<script>
    $('section.archive-entry').eq(0).after(【文字列化した広告コードを貼り付け】)
</script>

section.archive-entryは記事一覧で表示される
一つ一つの記事を表す要素で、
その最初の要素をeq(0)で指定して、
その直後にafterで文字列化した広告コードを挿入しています。

eqの数字を変更することで、
広告を挿入する位置を変更することができます。

挿入する広告コードはJavaScript用に文字列化したもので、
広告コードの文字列化の項目で生成したものを貼り付けます。

関連記事一覧に広告を設置する場合

記事に関連する記事を表示する
関連記事一覧に広告を設置する場合は、
下のようなコードをフッターに追加します。

f:id:u874072e:20190917155455p:plain:h200
関連記事一覧

<script>
    $('ul.related-entries > li').eq(0).after(【文字列化した広告コード】)
</script>

リストアップされた関連記事`ul.related-entries > li'の中から、
1番目の要素の直後に広告を挿入しています。

まとめ

HTMLを直接編集できない場合に、
JavaScriptで広告を挿入する方法を紹介しました。

広告コードを文字列化するのが少しややこしいかもしれませんが、
コードの挿入はとても簡潔に行えます。

プライバシーポリシー