パソコンサイト、スマホサイトの記事内にAdsenseを表示させたい
Bloggerにアドセンスを入れる場合、標準だと「AdSense広告表示設定」か「ウィジェット」を使うことができるのですが、記事内を指定することができません。
そこで、テンプレートの編集画面を使って、記事タイトルの下、記事本文の下にそれぞれアドセンスコードを入れてみます。
[adsense]
目次
アドセンスのタグを発行と変換
- 表示させたいアドセンスのタグを取得しておきます。
- そのタグの中にある、「<」「>」「”」の3文字を変換します。（実体参照にします。）
| 変化前 | 変換後 |
| < | < |
| > | > |
| " | " |
一つずつ手作業で変換してもよいですが、自動で変換してくれるツールを公開している方もいますので、利用すると手っ取り早いです。
アドセンスタグを記入する場所
アドセンスタグを記入するためのテンプレート編集画面は以下の場所にあります。
- Bloggerの管理ページにある「テンプレート」を開きます。
- 「ブログで使用中」の下にある「HTMLの編集」をクリックします。
パソコン用サイトもスマホ用サイトも、このテンプレート編集画面でコードを記入します。
パソコン用サイトに表示するには
PCサイト記事の下の方に入れる方法
- HTMLの編集画面を開きます。
- 編集画面内をクリックしてカーソルキー表示させます。
- CTRL+fで検索窓を開きます。
- data:post.body を検索します。
- シンプルテンプレートの場合は2か所見つかります。
- パソコン用の記事表示は2つ目なので、2つ目の<data:post.body/>の下にアドセンスコードを記入します。
- エラーがあるかもしれないので「テンプレートをプレビュー」します。
- 特にエラーが出なかったら、「テンプレートを保存」します。
PCサイトの記事タイトルの下に入れる方法
- 記事下のやり方と同じようにして、data:post.body を検索します。
- 2つ目の<data:post.body/>のすぐ上に<div class=’post-header-line-1’/>という箇所があります。
- <div class=’post-header-line-1’/>の下にアドセンスコードを記入します。
- 「テンプレートをプレビュー」して、エラーがなければ「テンプレートを保存」します。
記事一覧に表示しないようにする
記事一覧ページに表示されないようにするには、記事の下にいれるアドセンスコードを、以下のコードで挟みます。
<b:if cond=”data:blog.pageType == "item"”>
ココにアドセンスコードを記入する
</b:if>
スマホ用サイトに入れるには
準備
モバイル用テンプレートを「カスタマイズ」にしておく必要があります。
- Bloggerの管理ページにある「テンプレート」を開くと、「モバイル」と書かれたモバイルレイアウトの表示された箇所があります。
- その下に歯車のようなアイコンがありますので、クリックします。
- 「モバイル端末では現在のテンプレートのモバイルバージョンを表示する。」を「はい」にします。
- 「モバイルテンプレートを選択」で「カスタム」を選択して「保存」します。
スマホサイト記事の下の方に入れる方法
- 「ブログで使用中」の「HTMLの編集」をクリックします。
- 編集画面内をクリックしてカーソルキー表示させます。
- CTRL+fで検索窓を開きます。
- data:post.body を検索します。
- シンプルテンプレートの場合は2か所見つかります。
- スマホ用の記事表示は1つ目の<data:post.body/>なので、その下にアドセンスコードを記入します。
- 「テンプレートを保存」します。
- 「モバイル」の「歯車アイコン」をクリックし、「プレビュー」をクリックしてアドセンスが表示されているか確認します。
スマホサイト記事タイトルの下に入れる方法
- 記事下のやり方と同じようにして、data:post.body を検索します。
- 1つ目の<data:post.body/>のすぐ上に<div class=’post-header-line-1’/>という箇所があります。
- <div class=’post-header-line-1’/>の下にアドセンスコードを記入します。
- 「テンプレートを保存」します。
- 記事下同様に「プレビュー」で確認します。
タグを入れたけど表示されない場合
タグを取得してすぐは表示されません。１時間程度様子を見ましょう。
コメント