左坊のメモ帳

WordPress など

*

Bloggerの記事中にアドセンスを入れる方法

   

パソコンサイト、スマホサイトの記事内にAdsenseを表示させたい

Bloggerにアドセンスを入れる場合、標準だと「AdSense広告表示設定」か「ウィジェット」を使うことができるのですが、記事内を指定することができません。

そこで、テンプレートの編集画面を使って、記事タイトルの下、記事本文の下にそれぞれアドセンスコードを入れてみます。

スポンサーリンク

アドセンスのタグを発行と変換

  1. 表示させたいアドセンスのタグを取得しておきます。
  2. そのタグの中にある、「<」「>」「”」の3文字を変換します。(実体参照にします。)
変化前 変換後
< &lt;
> &gt;
" &quot;

一つずつ手作業で変換してもよいですが、自動で変換してくれるツールを公開している方もいますので、利用すると手っ取り早いです。

アドセンスタグを記入する場所

アドセンスタグを記入するためのテンプレート編集画面は以下の場所にあります。

  1. Bloggerの管理ページにある「テンプレート」を開きます。
  2. 「ブログで使用中」の下にある「HTMLの編集」をクリックします。

パソコン用サイトもスマホ用サイトも、このテンプレート編集画面でコードを記入します。

パソコン用サイトに表示するには

PCサイト記事の下の方に入れる方法

  1. HTMLの編集画面を開きます。
  2. 編集画面内をクリックしてカーソルキー表示させます。
  3. CTRL+fで検索窓を開きます。
  4. data:post.body を検索します。
  5. シンプルテンプレートの場合は2か所見つかります。
  6. パソコン用の記事表示は2つ目なので、2つ目の<data:post.body/>の下にアドセンスコードを記入します。
  7. エラーがあるかもしれないので「テンプレートをプレビュー」します。
  8. 特にエラーが出なかったら、「テンプレートを保存」します。

PCサイトの記事タイトルの下に入れる方法

  1. 記事下のやり方と同じようにして、data:post.body を検索します。
  2. 2つ目の<data:post.body/>のすぐ上に<div class=’post-header-line-1’/>という箇所があります。
  3. <div class=’post-header-line-1’/>の下にアドセンスコードを記入します。
  4. 「テンプレートをプレビュー」して、エラーがなければ「テンプレートを保存」します。

記事一覧に表示しないようにする

記事一覧ページに表示されないようにするには、記事の下にいれるアドセンスコードを、以下のコードで挟みます。

<b:if cond=”data:blog.pageType == &quot;item&quot;”>
ココにアドセンスコードを記入する
</b:if>

スマホ用サイトに入れるには

準備

モバイル用テンプレートを「カスタマイズ」にしておく必要があります。

  1. Bloggerの管理ページにある「テンプレート」を開くと、「モバイル」と書かれたモバイルレイアウトの表示された箇所があります。
  2. その下に歯車のようなアイコンがありますので、クリックします。
  3. 「モバイル端末では現在のテンプレートのモバイルバージョンを表示する。」を「はい」にします。
  4. 「モバイルテンプレートを選択」で「カスタム」を選択して「保存」します。

スマホサイト記事の下の方に入れる方法

  1. 「ブログで使用中」の「HTMLの編集」をクリックします。
  2. 編集画面内をクリックしてカーソルキー表示させます。
  3. CTRL+fで検索窓を開きます。
  4. data:post.body を検索します。
  5. シンプルテンプレートの場合は2か所見つかります。
  6. スマホ用の記事表示は1つ目の<data:post.body/>なので、その下にアドセンスコードを記入します。
  7. 「テンプレートを保存」します。
  8. 「モバイル」の「歯車アイコン」をクリックし、「プレビュー」をクリックしてアドセンスが表示されているか確認します。

スマホサイト記事タイトルの下に入れる方法

  1. 記事下のやり方と同じようにして、data:post.body を検索します。
  2. 1つ目の<data:post.body/>のすぐ上に<div class=’post-header-line-1’/>という箇所があります。
  3. <div class=’post-header-line-1’/>の下にアドセンスコードを記入します。
  4. 「テンプレートを保存」します。
  5. 記事下同様に「プレビュー」で確認します。

タグを入れたけど表示されない場合

タグを取得してすぐは表示されません。1時間程度様子を見ましょう。

 - Blogger