2013年9月8日日曜日

[Blogger]モバイルテンプレートでタイトル下と記事下にAdSense広告を表示する方法

私的には当面の最後の課題であるスマートフォンでの広告表示です。このブログはグーグルブロガーのカスタマイズなのでそうでもないですが、普通のブログはもうすでに半分近くはスマホで読まれているのではないかと思いますので、アドセンスで少しでも収益を上げたい場合には今後ますます重要になるのがモバイルテンプレートの広告ですよね。

参考にしたのは以下のサイトです。よくまとめた参考サイトがあると本当に助かりますよね。


Bloggerのモバイルテンプレートをカスタマイズする方法 | Asterlist
mobile-post ...







モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips








基本的な流れはPCサイトと同様です。

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



注意点もPCサイトと同様のことが言えます。

1.同じ作業をしてもHTMLの編集の保存がうまく行く場合と行かない場合がある
2.コードを貼り付ける位置がテンプレートによって微妙に違う場合がある



それに加えてモバイルテンプレートを編集するときは以下のことに注意する必要があります。




1.モバイルテンプレートを「カスタム」にしておく

これをカスタムにしておかないといくらHTMLを編集しても変更が反映されないようです。これはもっとも注意すべき点ですね!方法はテンプレート>モバイルの下の歯車





その後、「 はい。携帯端末でモバイル テンプレートを表示する。 」を選択。モバイルテンプレートのプルダウンメニューで一番下の「カスタム」を選択後、右下の保存で終了です。





2.モバイル表示の確認を確認しておく

PCサイトとは異なり、テンプレートのプレビューをした段階では、どのように変更されているか確認できません。モバイル表示の確認方法はテンプレートを保存してから、左メニューのテンプレートを一旦クリックして上に戻り、>モバイルの下の歯車を選択し、次の画面でプレビューを選択します。すると性格にモバイル表示が確認できます。




3.コードを貼り付ける位置が探せない

実はPCサイトを先に作業していると、HTMLの中で本文を示す「data:post.body」は残り一つしか残っておらず、これがモバイル用の本文だということは自明です。HTML上では一つ目の「data:post.body」がモバイル用の本文だったんですね。一般的には<b:includable id='mobile-post' var='post'> というタグをたよりに探すと良いとのこと。

従ってモバイルテンプレートのタイトル下に広告を埋め込む場合は一つ目の「data:post.body」の少し上にある「div class='post-header-line-1'」の下に、記事下に埋め込む場合は「data:post.body」の下に埋め込めばよいことになります。






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

コード取得はこちらの記事を参考にしてください。
初心者からのBloggerカスタマイズ: [Blogger]アドセンスのコードを貼り付けて広告を設置する

コード変換はこちらの記事を参考にしてください。
初心者からのBloggerカスタマイズ: [Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法


変換した結果こんなコードを貼り付けていきます。




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





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

タイトル下




記事下




編集した後、うまく保存できなかったり、プレビューができなかったり、編集環境に癖がありますが、慣れてくれば作業がスムーズにできるようになってきます。



7 件のコメント:

  1. ありがとうございます。丁寧な解説のおかげで、私でもカスタマイズできました。PC版もモバイル版も、タイトル下と記事下に広告の表示ができるようになりました。

    返信削除
    返信
    1. コメントありがとうございます。
      記事が役に立ったようで、私としてもうれしいです。

      削除
  2. はじめまして、いつも参考にさせていただいています。
    上の記事と少し趣旨がずれるかもしれないのですが、
    テンプレートでモバイルテンプレートを選択>はい。携帯端末でモバイル テンプレートを表示する。>カスタム
    と手順を踏んだのですが、モバイルのテンプレートには一向に反映されず困っています。もし、よろしければアドバイスを頂けませんでしょうか。

    返信削除
    返信
    1. 変銀兎さん
      こんにちは。
      今確認してみましたが、このサイトでは現在でも上記手順でモバイルのテンプレートに広告がきちんと入りました。
      テンプレートの保存がきちんと行われていないということはないでしょうか。またテンプレートによってはコードの挿入位置が異なるかもしれません。

      削除
  3. このコメントは投稿者によって削除されました。

    返信削除
    返信
    1. 名倉配信男様

      AdSenseのスマホ広告をアイモバイルに固定する方法ということでしょうか?
      申し訳ありませんが、私はその方法を知りません。お役に立てず申し訳ありません。

      削除
    2. このコメントは投稿者によって削除されました。

      削除