今はやり?の見出し直下の広告(adsence)をBloggerに導入して見た

おすすめ記事ピックアップ

最近、見出し直下の広告を良く見かけますよね。ihayato.書店さんなんかも、見出し直下の広告入れています。かならず目に入り、そして誤クリックを誘導しない最適な場所なんだと思います。

Bloggerだと、エラーが出て導入できない人がいると思いますので、コツを紹介いたします。テンプレートをいじる際は、ご自分でコードのバックアップを忘れずに。


まず広告はすでに用意できている物とします。今回はadsenceを利用しました。下記のような広告用コードです。

<script async src="xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js"></script>
<!-- main-ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-xxxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="538xxxxxxxxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bloggerの場合、トップページの一覧は、投稿記事と同じ見出しが表示されるため(テンプレートによって異なりますが)個別記事に表示したい広告設定が、一覧にどかっと表示されて阿鼻叫喚グチャグチャになることがあります。それを回避するために、個別記事のみに表示するコードを使います。

簡単に書くと「b:if cond=表示させる条件」で制御します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
---ここに広告コードを入れる---
</b:if>

b:if condを詳しく知りたい方はこちらの記事を参考ください。
http://www.furimuke.com/2013/04/blogger_21.html
http://www.furimuke.com/2013/05/linkwithinblogger.html

次にBloggerテンプレートのHTMLにコードを書き込むとき、特定の表記がエラーになります。adsenceのコードをそのまま張り付けるとエラーが出てしまい保存できません。これで9割の人は、googleには、逆らってはいけないと諦めてしまうのではないでしょうか。


主にこの3つ「”」「<」「>」を書きなおすことでエラーが出なくなります。

「”」→「&quot;」
「<」 →「&lt;」
「>」 →「&gt;」
追伸:変換ツール作ってみました
http://furimuke.sub.jp/changemoji/

該当の箇所をすべて置換しましょう。置換するとこんな感じになります。手動書き換えてもよいですが、間違ったり大変ですのでワードパット等を使って置換しましょう。

&lt;script async src=&quot;xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- main-ad --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:300px;height:250px&quot;
     data-ad-client=&quot;ca-xxxxxxxxxxxxxxxxxxxxx&quot;
     data-ad-slot=&quot;538xxxxxxxxxxxxxxxxxxxxx&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

これをb:if condで挟みます。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script async src=&quot;xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- main-ad --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:300px;height:250px&quot;
     data-ad-client=&quot;ca-xxxxxxxxxxxxxxxxxxxxx&quot;
     data-ad-slot=&quot;538xxxxxxxxxxxxxxxxxxxxx&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</b:if>

これでコードは完成です。
次にテンプレートHTMLの見出し直下の場所を探します。
大体post-headerの下あたりがその場所になります。

    <div class='post-header'>
    <div class='post-header-line-1'>

使っているテンプレートによっては、post-headerが2箇所あったりすることもあると思います。その場合、それぞれの箇所に設定してテストして見てください。名称が異なる場合もあると思いますが、じっくり調べればわかると思います。


使っているテンプレート、書き込む場所によって、広告の表示位置が多少異なりますので、保存で実際に書き込んでみて、自分が良いと思える場所に設定しましょう。

こうして完成です。


同じ要領で、記事の最後にも設定することができます。コードの場所は自分で探してみましょう。あとadsenceはルールに厳しいので、スポンサードリンクとか、広告だとわかる表記をきちんと付けた方が良いという話もあります。


いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : 今はやり?の見出し直下の広告(adsence)をBloggerに導入して見た
今はやり?の見出し直下の広告(adsence)をBloggerに導入して見た
http://4.bp.blogspot.com/-0Ua9rqLTQR0/UnWtjmCljxI/AAAAAAAAM-A/nG-FPy3NkqM/s640/0001.png
http://4.bp.blogspot.com/-0Ua9rqLTQR0/UnWtjmCljxI/AAAAAAAAM-A/nG-FPy3NkqM/s72-c/0001.png
ふりむけばコウホウ
http://www.furimuke.com/2013/11/adsenceblogger.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/11/adsenceblogger.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy