Bloggerの記事の本文中にアドセンスを表示させる方法をご紹介します。
ワードプレスなら検索すればやり方がいっぱい出てきますが、Bloggerは利用者が少ないせいか殆どhow toモノが載っていません。
そんなBloggerのカスタマイズ方法が知りたくて困った時に、私がいつも参考にさせて貰っているサイトがあります。
そのサイトを運営しているのは、外国の方で「helplogger」というブログを運営しています。
Blogger界隈では有名な方で、「Bloggerの神様」と私が勝手に呼んでいます。笑
Bloggerの記事中や本文中にアドセンスを貼る方法
「helplogger」さんのブログで紹介されている、好きな位置にアドセンスを挿入するやり方が書かれた記事があります。
参考記事 >> 記事本文中や好きな位置にアドセンスを貼る方法
クリックして貰うと分かりますが、こちらは全て英語で書かれています。
「なんだ、英語か」、「読めない」、「ムリ」、
見た瞬間毛嫌いした人もいるかも知れません。
英語で難しそうに見えますが、むしろ日本語よりも分かりやすいです。
この方法を私が試したら一発で出来ました。
「それでも、英語は分からないよ！！」
という方の為に、私がやり方を日本語で解説しようと思います。
メモのご準備を～。
Step1
Bloggerの管理画面から、
「テンプレート」 → 「HTMLの編集」をクリックします。
※ 編集作業に入る前に「バックアップの復元」からテンプレートのバックアップを取っておくことを推奨します。
いよいよ編集作業に入ります！！
HTML編集画面を開いたら、コード内で 「Ctl + F」 を押します。
検索ボックスが現れますので、 <data:post.body/> と入力してEnterを押します。
するとコード内の<data:post.body/>がいくつか検索されます。
２番目に出てきた方の<data:post.body/>タグを以下のコードに置き換えます。
置き換えてみて変化が見られない場合は、３番目に出てくる<data:post.body/>の方を置き換えてみましょう。
<div expr:id='”adsmiddle1″ + data:post.id’></div>
<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:blog.pageType != "static_page"’>
<div style=”clear:both; margin:10px 0″>
<!– Add here the code of your ad –>
</div>
</b:if>
</b:if>
<div expr:id='”adsmiddle2″ + data:post.id’>
<data:post.body/>
</div>
<script type=”text/javascript”>
var obj0=document.getElementById(“adsmiddle1<data:post.id/>”);
var obj1=document.getElementById(“adsmiddle2<data:post.id/>”);
var s=obj1.innerHTML;
var r=s.search(/x3C!– adsense –x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Step2
<!–Ad here the code of your ad–>のところを自分のアドセンスコードに変えます。
グーグルアドセンスからアドセンスコードを生成しておいて下さい。
アドセンス広告を真ん中にレイアウトさせたい時は、
<center>タグでアドセンスコードの最初と最後を囲みます。
例
<center>
あなたのアドセンスコード
</center>ここまでの作業は、HTML編集画面で行います。
Step3
次はアドセンスを表示させるための方法です。
Bloggerの新規投稿から、「作成 / HTML」 と切り替えられるようになっています。
HTMLの方を開いて、文章のお好きな箇所に<!– adsense –>タグを入れて下さい。
気を付けて頂きたいのは、
この<!– adsense –>タグを本文の中に何個挿入しても、アドセンス広告は１つしか表示されません。
プレビュー画面で確認してみると、アドセンス広告が１つ表示されているはずです。
一度確認して見て下さい。
注意： 記事下にもアドセンス広告を表示したい場合は、これとは別に設定する必要があります。
