[Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法

いよいよ（私的に）本題に入っていきます。実はタイトル下と記事下にうまく広告を入れられるか？入れている人もいるので自分に入れる能力があるか？ということになりますが。またモバイル広告を入れることができるかが自分にとっての本題で、これができれば他のブログをBloggerに移動しようと考えています。

まずはPCページでタイトル下と記事下に広告を入れてみます。参考にしたのは以下のサイトです。他にもありますが皆さんよくまとめていただいていて本当に助かります。参考にさせていただきます。ありがとうございます。


[Blogger] モバイル表示時、記事上と記事下にGoogle Adsenseの広告を表示する方法。 - Sunabox







Geek になろう: Bloggerで記事直下にAdsenseを表示する方法








基本的な流れは

１．アドセンスでコードを取得
２．コードの中でHTMLエンティティ文字にない文字を変換する
３．HTMLの編集で変換したコードを貼り付ける

といういたってシンプルなものなので、上のサイトでも丁寧に解説されているのですが、やってみるとなかなかうまく行きません。


その原因を自分なりに整理してみました。

１．同じ作業をしてもHTMLの編集の保存がうまく行く場合と行かない場合がある。

---

オンラインで作業、保存しているからなのか分かりませんが、一度やってみて保存されない場合、そのコードや貼り付ける位置が間違っていると思っていました。しかし原因はそれだけではない可能性があります。テンプレートをクリックし、HTMLの編集からもう一度同じ作業を行ってみると、すんなりプレビューと保存ができるケースもあるようです。ここですぐにあきらめずに何度かトライしてみることをお勧めします。


２．コードを貼り付ける位置がテンプレートによって微妙に違う場合がある。

---

BloggerのHTMLの編集の仕様が変更になったからなのか、テンプレートが違いのせいかは分かりませんが、私の場合広告を貼り付ける位置が上のサイトの例とは違いました。これはコードをちゃんと理解できれば良いのですが、それが面倒な私のような人は１．と合わせて試行錯誤して位置を確かめていくしかないようです（笑）

タイトル下に広告を埋め込む場合は「div class='post-header-line-1」の下、記事下に埋め込む場合は「data:post.body」の下というのは参考サイト通りなのですが、どうやら私のテンプレートの場合、トップページと個別記事のタイトル下に広告を埋め込むには２個の「div class='post-header-line-1」のうち２番目の下に埋め込むと良いようです。

記事下については「data:post.body」は全部で３つあってトップページ用が２番目、個別記事用が３番目のようです。


それでは作業をしていきます。

コード取得はこちらの記事を参考にしてください。

初心者からのBloggerカスタマイズ: [Blogger]アドセンスのコードを貼り付けて広告を設置する

アドセンスから取得したコードはこのような感じです。アドセンスの規約違反にならないようにタイトル下の広告の上下には点線のコードを追加してみます。また広告のセンタリングも同時に行います。

コード変換は以下です。私は秀丸でやりました。手作業だと間違えますので、エディタを利用した方がよいですね。

< → &lt;
> → &gt;
" →　&quot;

結果はこんなコードになります。赤色の部分を貼り付けていきます。

貼り付けた状態です。まずはテンプレートを保存し、一つずつ貼り付け→テンプレートをプレビュー→テンプレートを保存を繰り返して確実に作業をしていきます。プレビューが見られなかったり、保存が出来なければ、左のテンプレートをクリックし、もう一度同じ作業をやってみるとうまく行くことがあります。

このあたりの基本的な作業については以下の記事が参考になると思います。

初心者からのBloggerカスタマイズ: [Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

記事下はこんな感じ

結果、このように広告を貼り付けることができました。

タイトル下

記事下

今日は2020年東京オリンピックが決まりました。広告もオリンピック関連だし、すばらしい！！

http://mnt02.blogspot.com/2013/09/bloggergoogle-adsense.html[Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法