Bloggerの記事の下に広告を入れてみよう。
今日の課題は以下の3つ。
1、広告コードを変換。
2、条件分岐タグを使って個別記事のページにのみ記事下に広告を表示させる。
3、記事の下に広告を入れるためのテンプレートHTMLの位置。
BloggerのテンプレートHTMLに直接広告を入れるには工夫がいる。
コードをそのままテンプレートに記載しても表示されないので注意。
GoogleAdsenseの広告コードを適した形に変換
BloggerのテンプレートHTMLの中で広告コードを設置するためには、「<」「>」「"」をテンプレートに適した形に変換する。
「<」「>」「"」の変換
「<」⇒ <
「>」⇒ >
「"」⇒ "
広告コードの例1)変換前
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コード名 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-英数字"
data-ad-slot="英数字"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
広告コードの例1)変換後
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コード名 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-英数字"
data-ad-slot="英数字"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
条件分岐タグを使って個別記事のページにのみ記事下に広告を表示させる
広告コードを個別ページだけに表示する条件分岐タグで囲む。
<b:if cond='data:blog.pageType == "item"'>
個別ページだけで表示させる内容
</b:if>
記事下に広告を入れるためのテンプレートHTMLの位置
1、Bloggerにログイン。
2、対象のブログのタイトルをクリック。
3、【テンプレート】⇒【HTMLの編集】をクリック。
4、「data:post.body」を探す。
*テキストエディタなどにHTMLを貼り付けて、検索で探したほうが楽です。
5、data:post.bodyの下に変換した広告コードを埋め込む。
このテンプレートの場合、3つdata:post.bodyが存在する。
個別記事用・TOPページが2番目。ただ、テンプレートによって違うようだ。
自分のテンプレートの何番目のdata:post.bodyの後ろに広告タグを張り付けたらよいかはその都度保存して確認するしかないみたい。
0 件のコメント:
コメントを投稿