このブログを検索

2014年9月26日金曜日

 Bloggerの記事のタイトル下に広告を入れる

 Bloggerの記事のタイトル下に広告を入れてみよう。

 今日の課題は以下の3つ。

1、広告コードを変換。

2、条件分岐タグを使って表示するページを指定する

3、記事のタイトル下に広告を入れるためのテンプレートHTMLの位置。

4、広告の回り込み。

 Bloggerの記事下に広告を入れるには、ちょっと工夫がいる。

 コードをそのまま広告コードをテンプレートに入れても表示されないことが多いのでご注意。

 例によってGoogleAdsenseの広告を元にBloggerの記事下に広告を入れてみる。

GoogleAdsenseの広告コードを適した形に変換

 BloggerのテンプレートHTMLの中で広告コードを設置するためには、「<」「>」「"」をテンプレートに適した形に変換する必要がある。

「<」「>」「"」の変換

「<」⇒ &lt;  

「>」⇒ &gt;

「"」⇒ &quot;

広告コードの例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)変換後

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- コード名 --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:336px;height:280px&quot;
     data-ad-client=&quot;ca-pub-英数字&quot;
     data-ad-slot=&quot;英数字&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

記事のタイトル下に広告を入れるためのテンプレート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>でコードを囲んでから、

「<」⇒ &lt;  
「>」⇒ &gt; 
「"」⇒ &quot;

 にずべて変換する。

2、【テンプレート】⇒【カスタマイズ】⇒【上級者向け】⇒【CSSを追加】。

3、.○○{float:left;}、.○○{float:lright;}、のように位置を指定して【ブログに適応】をクリックする。

0 件のコメント:

コメントを投稿