Bloggerの記事のタイトル下に広告を入れてみよう。
今日の課題は以下の3つ。
1、広告コードを変換。
2、条件分岐タグを使って表示するページを指定する
3、記事のタイトル下に広告を入れるためのテンプレートHTMLの位置。
4、広告の回り込み。
Bloggerの記事下に広告を入れるには、ちょっと工夫がいる。
コードをそのまま広告コードをテンプレートに入れても表示されないことが多いのでご注意。
例によってGoogleAdsenseの広告を元にBloggerの記事下に広告を入れてみる。
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>
記事のタイトル下に広告を入れるためのテンプレートHTMLの位置
1、Bloggerにログイン。
2、対象のブログのタイトルをクリック。
3、【テンプレート】⇒【HTMLの編集】をクリック。
4、「div class='post-header-line-1」を探す。
*テキストエディタなどにHTMLを貼り付けて、検索で探したほうが楽です。
このテンプレートの場合、2つdiv class='post-header-line-1が存在する。
5、2つ目のdiv class='post-header-line-1(行1588)の後に変換した広告コードを埋め込む。条件分岐タグを使って表示するページを指定する
このままだとすべてのページに広告が入ってしまうので、GoogleAdsenseのように1ページ3つの広告までと制限がある場合は都合が悪い。
この場合、条件分岐を使って広告を表示するページを指定する必要がある。
今回は記事ページのタイトル下だけに広告を入れることにした。個別記事のページだけ表示する条件分岐タグ
<b:if cond='data:blog.pageType == "item"'>
個別ページだけで表示させる内容
</b:if>
広告の位置指定(回り込み)をしたい場合
1、広告の位置指定(回り込み)をしたい場合、広告コードを<div class=○○'> </div>でコードを囲んでから、
「<」⇒ <
「>」⇒ >
「"」⇒ "
にずべて変換する。
2、【テンプレート】⇒【カスタマイズ】⇒【上級者向け】⇒【CSSを追加】。
3、.○○{float:left;}、.○○{float:lright;}、のように位置を指定して【ブログに適応】をクリックする。
0 件のコメント:
コメントを投稿