Bloggerでタイトル下・記事中・記事下にAdsense広告を出す、その仕組みと実際の手順
自分のブログ「希望の苗を植えてゆく」では、Bloggerの標準機能ではサイドバーと記事間にしか広告表示できなかった。
しかし、こういうの↓を読むと効果的なのはタイトル下、記事下、記事中の３つらしい。
なのでその3箇所に広告を出すことにした。
もちろん一つ一つの記事に挿入なんてしてられないので、テンプレート（今で言うテーマ）をカスタマイズした。
広告を任意の場所に出すのはいくらでもネットに情報があるのだが、どの情報も帯に短し襷に長しな感じ。
特に手順だけしか書いてなくて意味が分からないことが多く、うまくいかないときに手詰まりになってしまいがちだった。
なのでその辺、ちょっと補足しながらまとめてみたい。
バックアップは「テーマ」画面の右上、「バックアップ／復元」ボタンからできる。
またポイントポイントで取っておけば全部戻さずに済むのでこまめなバックアップも心がけたい。
また自分のテンプレートは標準で提供されている「画像ウィンドウ」というやつである。
なので他のテンプレートだと細部が違う可能性がある。
まあとりあえずそれだけ押さえたら、後は実践あるのみレッツラゴー！
を確認する方法について。
テンプレート中の「div class='post-header-line-1」の下がタイトル下にあたる。
そして記事下は「data:post.body」の下。そこに広告コードを埋め込めば、その場所に広告が表示される。
また、テンプレートにはPC用とモバイル用の部分があるので、上記の２つは２つずつあることになる（意味分かる？ｗ）。
つまり、
があるわけだ。
PC用の「div class='post-header-line-1」の下にコードをコピペすればPCで表示したとき、タイトル下に広告が現れる。
しかしモバイル用の「div class='post-header-line-1」の下にコードを書いていないと、スマホなどではタイトル下に何も現れない。
記事下の「data:post.body」に関しても同じである。
普通はPC、モバイル両方のタイトル下、記事下の両方に出したいだろうから、そのためには計４箇所のカスタマイズが必要となる。
まずテンプレートのHTML編集画面で「div class='post-header-line-1」と「data:post.body」を検索し、その下に”＠＠＠１”とか適当に書いておき、保存。
で、実際にPCで記事を見れば、書いた文字列がそこに出てるはずだ。
スマホのほうは後で書く、モバイルにカスタムテンプレートを適用する設定が必要となる。
番号の部分を１～４まで順に変えておけば、テンプレートのどの部分が記事のどの場所に対応しているか確認できる。
もっと簡便な確認方法としては、周辺のラインにmobileという文字が散見されれば、たぶんそれはモバイルのほうである。
では記事中に出すのはどうすればいいのか。さっき挙げた記事が詳しい。
タイトル下、記事下と違って記事中というのはテンプレートではここという場所がない。
記事中のどこに出すかは記事によるので、記事作成時に決定しなければならないからだ。
なので上記の記事でも、記事を作成するときに広告を出す位置を決められる方式になっている。
それぞれ追加すればよろしい。
ちなみに他で<head>の下と書いてる記事もあるのだが、それだとエラーになってテンプレートが保存できなかった。
で、さらに記事のほうで記事中広告を出したいところに<!--more-->タグを入れておく。
これはBloggerのエディタの「追記の区切りを挿入」アイコン（紙を真ん中で破いたみたいなの）を押せば良い。
してるのである。
「data:post.body」の下のコードには、広告コードを入れるところが２つあるが、実際の記事では1つは記事下に、もう1つはmoreタグの後ろに現れる。
moreタグの後ろに挿入されるのは「#MBT-google-ad」というラインの下方に入っているほうの広告コードである。
HEADのほうに入れたコードをよく見ると、同じ「#MBT-google-ad」の文字列が入っているのが分かる。
なので記事下に正方形、記事中に横長バナーを出したければ、対応する広告コードをそれぞれ適切な場所にコピペしとけばよい。
しかしモバイルの方はデフォルトのテンプレートのままで、カスタマイズが反映されない。
これがトリッキーなのだが、それについてはここに書いてある。
要するにモバイルテンプレートを「カスタム」に設定しておかないと、モバイルには変更が反映されないのだ。
これを設定するためには、テンプレート＞モバイルの下の歯車を押せばよい。
自分はこれが分からなくて、Millardというのを使って関連記事を出すようにしたのに、スマホ等、モバイルの方にはどうしても出なくて困っていた。
Millardもコードをテンプレートにコピペして使うので、それが有効になるにはこのモバイルテンプレートの設定が必要だったのだ。
なので今回広告のために設定したら、関連記事も一緒に出てくるようになった。
※最近のテンプレート（テーマ）ではこの設定がいらないこともあるみたいです。
以上を理解した上で、この記事で紹介した設定手順の記事を読むと、何をしているのか分かるし応用も効くであろう。
この記事もタイトル下、記事下、記事中に広告が出ているが、これもこの記事に書いたやり方で出している。
なので記事中に表示されている広告のところにはmoreタグが入れてある。
そんなわけで効果的とされるタイトル下、記事中、記事下にAdsense広告を出すのに成功すれば、きっと収益も上がる…はず！（笑）
Good Luck！
しかし、こういうの↓を読むと効果的なのはタイトル下、記事下、記事中の３つらしい。
>> ブログで２年間検証して辿り着いたGoogle Adsenseのベストな広告配置
なのでその3箇所に広告を出すことにした。
もちろん一つ一つの記事に挿入なんてしてられないので、テンプレート（今で言うテーマ）をカスタマイズした。
広告を任意の場所に出すのはいくらでもネットに情報があるのだが、どの情報も帯に短し襷に長しな感じ。
特に手順だけしか書いてなくて意味が分からないことが多く、うまくいかないときに手詰まりになってしまいがちだった。
なのでその辺、ちょっと補足しながらまとめてみたい。
まず最初はバックアップから
こういうカスタマイズの際には、とりあえず最初にバックアップを取っておくのを強くお勧めする。バックアップは「テーマ」画面の右上、「バックアップ／復元」ボタンからできる。
またポイントポイントで取っておけば全部戻さずに済むのでこまめなバックアップも心がけたい。
また自分のテンプレートは標準で提供されている「画像ウィンドウ」というやつである。
なので他のテンプレートだと細部が違う可能性がある。
まあとりあえずそれだけ押さえたら、後は実践あるのみレッツラゴー！
Bloggerのテンプレートを理解する
まずテンプレートの中の、- どこに広告コードを埋め込めばいいのか
- 本当にそこでいいのか
を確認する方法について。
タイトル下、記事下はテンプレートのどこにあたるか
ここに書いてあったのだが、>> [Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法 - 初心者からのBloggerカスタマイズ
テンプレート中の「div class='post-header-line-1」の下がタイトル下にあたる。
そして記事下は「data:post.body」の下。そこに広告コードを埋め込めば、その場所に広告が表示される。
また、テンプレートにはPC用とモバイル用の部分があるので、上記の２つは２つずつあることになる（意味分かる？ｗ）。
つまり、
- PC用の「div class='post-header-line-1」と「data:post.body」
- スマホなどモバイル用の「div class='post-header-line-1」と「data:post.body」
があるわけだ。
PC用の「div class='post-header-line-1」の下にコードをコピペすればPCで表示したとき、タイトル下に広告が現れる。
しかしモバイル用の「div class='post-header-line-1」の下にコードを書いていないと、スマホなどではタイトル下に何も現れない。
記事下の「data:post.body」に関しても同じである。
普通はPC、モバイル両方のタイトル下、記事下の両方に出したいだろうから、そのためには計４箇所のカスタマイズが必要となる。
テンプレートの該当箇所がPCかモバイルかの確認
またテンプレートの該当箇所がPCかモバイルのほうかの確認は、ここでやってる方法が使える。>> 【Blogger】記事中にアドセンスを表示する方法 – ブログ運営のためのブログカスタマイズ
まずテンプレートのHTML編集画面で「div class='post-header-line-1」と「data:post.body」を検索し、その下に”＠＠＠１”とか適当に書いておき、保存。
で、実際にPCで記事を見れば、書いた文字列がそこに出てるはずだ。
スマホのほうは後で書く、モバイルにカスタムテンプレートを適用する設定が必要となる。
番号の部分を１～４まで順に変えておけば、テンプレートのどの部分が記事のどの場所に対応しているか確認できる。
もっと簡便な確認方法としては、周辺のラインにmobileという文字が散見されれば、たぶんそれはモバイルのほうである。
記事中に広告を出す方法
上記のカスタマイズをやればタイトル下と記事下には広告が出てくる。では記事中に出すのはどうすればいいのか。さっき挙げた記事が詳しい。
>> 【Blogger】記事中にアドセンスを表示する方法 – ブログ運営のためのブログカスタマイズ
タイトル下、記事下と違って記事中というのはテンプレートではここという場所がない。
記事中のどこに出すかは記事によるので、記事作成時に決定しなければならないからだ。
なので上記の記事でも、記事を作成するときに広告を出す位置を決められる方式になっている。
記事中の任意の場所に広告を出す方法
記事中の任意の場所に広告を出すには、- 上記の記事に書いてあるjqueryのコードを、</head>、つまりヘッダの閉じタグの上に、
- 先に書いた「data:post.body」の下に表示したい広告コードを
それぞれ追加すればよろしい。
ちなみに他で<head>の下と書いてる記事もあるのだが、それだとエラーになってテンプレートが保存できなかった。
で、さらに記事のほうで記事中広告を出したいところに<!--more-->タグを入れておく。
これはBloggerのエディタの「追記の区切りを挿入」アイコン（紙を真ん中で破いたみたいなの）を押せば良い。
 |
| これ↑ |
記事中に広告を出す仕組み
これは何をやっているかというと、- まず「data:post.body」、つまり記事下に広告を入れて、
- さらに</HEAD>の上に書いたjqueryでそれを記事中のmoreタグのあるところに挿入
してるのである。
「data:post.body」の下のコードには、広告コードを入れるところが２つあるが、実際の記事では1つは記事下に、もう1つはmoreタグの後ろに現れる。
moreタグの後ろに挿入されるのは「#MBT-google-ad」というラインの下方に入っているほうの広告コードである。
HEADのほうに入れたコードをよく見ると、同じ「#MBT-google-ad」の文字列が入っているのが分かる。
なので記事下に正方形、記事中に横長バナーを出したければ、対応する広告コードをそれぞれ適切な場所にコピペしとけばよい。
モバイルにカスタマイズしたテンプレートを適用する
編集したテンプレートは、保存すればPCのほうにはすぐ適用される。しかしモバイルの方はデフォルトのテンプレートのままで、カスタマイズが反映されない。
これがトリッキーなのだが、それについてはここに書いてある。
>> [Blogger]モバイルテンプレートでタイトル下と記事下にAdSense広告を表示する方法 – 初心者からのBloggerカスタマイズ
要するにモバイルテンプレートを「カスタム」に設定しておかないと、モバイルには変更が反映されないのだ。
これを設定するためには、テンプレート＞モバイルの下の歯車を押せばよい。
自分はこれが分からなくて、Millardというのを使って関連記事を出すようにしたのに、スマホ等、モバイルの方にはどうしても出なくて困っていた。
Millardもコードをテンプレートにコピペして使うので、それが有効になるにはこのモバイルテンプレートの設定が必要だったのだ。
なので今回広告のために設定したら、関連記事も一緒に出てくるようになった。
※最近のテンプレート（テーマ）ではこの設定がいらないこともあるみたいです。
まとめ
そんなわけでまとめ！- BloggerのテンプレートにはPC用とモバイル用の両方が入っている。
- それぞれにタイトル下と記事下に対応する部分がある。
- 記事中の広告はヘッダに書いたjqueryが、記事下からmoreタグのところに挿入してくれる
- その場合、記事下には「記事下に表示用」と「記事中に表示用」の広告コードをそれぞれ書いておく
- モバイルテンプレートのカスタム設定を忘れずに
以上を理解した上で、この記事で紹介した設定手順の記事を読むと、何をしているのか分かるし応用も効くであろう。
この記事もタイトル下、記事下、記事中に広告が出ているが、これもこの記事に書いたやり方で出している。
なので記事中に表示されている広告のところにはmoreタグが入れてある。
そんなわけで効果的とされるタイトル下、記事中、記事下にAdsense広告を出すのに成功すれば、きっと収益も上がる…はず！（笑）
Good Luck！
✓モバイル・ファーストを心がけよう
現在、ネット閲覧はおそらく半分以上モバイル機器からのものです。
そしてPCで普通に見えていてもモバイル機器ではものすごく読みにくい、ということは本当によくあります。
モバイル・ファーストとよく言われますが、ブログは書いたらまずスマホでチェックするという習慣をつけるとよいですよ :)
コメント
コメントを投稿