Bloggerの記事下のアドセンス広告のカスタマイズ

  • 投稿 : 2014-12-19
テンプレートに直接貼り付ける方法もありますが、
Bloggerの機能でアドセンスの自動挿入ができるので、それを使った方法を紹介します。

私がBloggerをやっていた時はこの機能で記事下に表示していました。

記事下にアドセンス広告を表示させる

blogger-adsense01.png

レイアウトのところの「ブログの投稿」-＞「編集」で上記の設定が出てきます。
「投稿の間に広告を表示する」にチェックを入れます。

広告サイズとかは、コンボボックス選択できて後からでも変更が可能です。

この設定の前に、アドセンスで使用しているGoogleアカウントとBloggerのアカウントが別の場合は、アドセンスに設定しているGoogleアカウントとの関連付けがあると思います。

アドセンスの広告位置を、本当の記事下にする

blogger-adsense02.png

テンプレート-＞「HTML編集」
inline-adで検索すると、広告表示しているタグのところを探し出すのは簡単だと思います。

blogger-adsense03.png 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
</b:if>

広告表示しているタグを上記のように変更します。
これで、個別記事以外のところ（一覧表示など）にしか表示されなくなります。

blogger-adsense04.png 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
</b:if>

「data:post.body」や「post-body」で検索して上位位置に追加します。
この部分が、記事下の部分です。

記事下の広告を左寄せ・中央寄せにする

blogger-adsense05.png

上記の場所( </head>の上)に以下を追加すればそうなります。

左寄せ

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.inline-ad{
clear: both;
text-align: left;
}
</style>
</b:if>

中央寄せ

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.inline-ad{
clear: both;
text-align: center;
}
</style>
</b:if>

アドセンスタグを直接追加する方法

・[Blogger] モバイル表示時、記事上と記事下にGoogle Adsenseの広告を表示する方法。 - Sunabox
・[Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法 - 初心者からのBloggerカスタマイズ
・Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法 | メモロウ

HTMLエスケープしないと貼り付けられないとかそういうのがあったと思うので、そのあたりが分からないと苦戦するかも。

Bloggerはとても厳格な標準化XMLを採用しているのでHTMLエンティティ文字にない< > "などの文字を使うとエラーになり表示できません。
< → &lt;
> → &gt;
" → &quot;
に変更します。
Geek になろう: Bloggerで記事直下にAdsenseを表示する方法

こういうのです。
スポンサーリンク
タグ#Blogger#code

コメント一覧

  • 名前:ぴこ :

    参考にさせて頂き、無事トップページの記事間のみに広告を貼ることができました。
    現在貼っているのが…
    ⑴タイトル下⑵サイドバー⑶記事直下⑷モバイル用記事直下⑸トップページのみ投稿間の間
    です。この５個はアドセンス規約違反になりませんか？
    アクティブ稼働している広告が５個なので心配です。

    2016/04/26 21:15

  • 名前:管理人 :

    3個を超えると、規約違反です。

    ただしBloggerのテンプレートに5個かいたからといって
    5個表示されるわけでもありません。

    トップページだけ表示とか
    モバイルだけ表示とか
    そういう条件が入ってれば、条件に合わない場合は、HTMLとしても出力されません。

    ＞⑴タイトル下⑵サイドバー⑶記事直下⑷モバイル用記事直下⑸トップページのみ投稿間の間

    実際には、
    (1)ブログタイトル下
    (2）サイドバー
    (3)PCの記事下（たぶん、個別記事のみ）
    (4)モバイルの記事下（たぶん、個別記事のみ）
    (5)トップページの投稿間の間の１つめだけ
    なのかなと推測します。

    ■
    アドセンス広告の上に、「スポンサーリンク」という文字を入れてみて、
    実際に、スポンサーリンクという文字が、１ページに何個表示されてるか確認してみてください。

    PCで
    ・トップページ　？個
    ・個別記事　？個
    モバイルで
    ・トップページ　？個
    ・個別記事　？個
    みたいな感じで調べられると思います。

    ■
    HTMLソースを直接見る
    adsbygoogle.js
    の個数を数えたら、たぶん、貼り付けている広告の数になりそうな気はします。

    PCで
    ・トップページ　3個
    ・個別記事　3個
    になってるようなような？

    2016/04/26 21:39

  • 名前:ぴこ :

    ご回答ありがとうございます！
    現時点で１ページに見えてるのが３個なので、問題ございませんでしょうか…？

    adsbygoogle.jsで数えたら、①モバイル用記事直下②PC用トップページ投稿間にひとつ
    計２個でした。（スポンサーリンク表示してます）

    ⑴タイトル下　⑵サイドバー　この二つはガジェットのアドセンスから登録したため、スポンサーリンクと元々表示されてませんでした。これは改めてHTML編集し、「スポンサーリンク」追加しなければなりませんか？

    2016/04/27 11:50

  • 名前:管理人 :

    ＞問題ございませんでしょうか…？

    アドセンスの規約違反は、シャレにならないので自身で確認してくださいとしか言えません。

    ■
    「HTMLソースを直接見る」というのは、ブラウザで右クリックすると、「ソースを表示」とか出てくるとおもうので、それのことです。

    実際に表示されているのが3つだからOKというのはダメで、HTMLソースレベルで、広告を３つしか挿入していないことを確認しないと意味がありません。

    アドセンスは、３つを超えて貼り付けても、４つ目以降は表示しないとかそういう仕組みにはなっているようですが、それは表示されないだけであって、規約違反になってないということではないかとは思います。

    ■
    「スポンサーリンク」の表示は、必ずつけないといけないものではないのでつける必要はありません。
    「スポンサーリンク」という文字をいれて確認してくださいというのは、HTMLソースレベルで確認が難しい人もいるので、Bloggerのテンプレートに文字をいれて確認するという代替の方法論です。

    ■
    「スポンサーリンク」の表示は
    クリック率が高そうなところには、つけておいたほうが無難だと思います。
    仮にタイトル下がクリック率が高いとかなら、つけたほうが良いでしょう。

    誤クリックが多いと、警告きたりするようで、
    その手の警告の修正は、たいてい「スポンサーリンク」の表示をつけるということになるので
    最初からしてたほうがよいと思うからです。

    2016/04/27 12:48

  • 名前:ぴこ :

    詳しくご回答ありがとうございます…！
    右クリックでページソース確認したとろこ、３個だけでした！！

    わかりました。少し様子見ようと思います。
    感謝です！

    2016/04/27 15:26

  • 名前:ぴこ :

    度々恐れ入ります…
    どちらの記事に詳細かかれているかわからなかった為、こちらにご連絡させて頂きました。
    猫空さんの左にある「体験生活ITブログ運営雑談」ラベル？こちらはどうしたら付けられますか？？
    アドバイスいただけたら幸いです。

    2016/04/27 15:37

  • 名前:管理人 :

    ＞猫空さんの左にある「体験生活ITブログ運営雑談」ラベル？
    ＞こちらはどうしたら付けられますか？？

    Bloggerのサイドバーにアコーディオンメニューを導入する方法 – 某氏の猫空 http://blog2.k05.biz/2016/04/blogger-accordion.html

    上記にそれらしいものを書きました。
    ただし、ラベルは自動ではなくて、自前で直接書くしかないかと思います。

    当ブログなのですが、以前はBloggerだったんですが、今現在はWordpressなんですね。

    2016/04/28 10:21

ブログや記事に関する質問・感想など

ご意見やお問い合わせは、お問い合わせ窓口から受け付けています。

記事に関する質問・感想などは、この記事のコメントをご利用ください。

お問い合わせ

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください（スパム対策）。