2012/10/15

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

follow us in feedly
follow us in RSS
Google
Google / Daniel Morris
こんばんは!すなふ(@sunafu35)です。

今日・・・もう昨日か・・・
Bloggerのモバイル表示時に、Google Adsenseを、記事上と記事下に表示させるようにしたいけど、うまく表示出来ないのですが、方法判りませんか?
というメールを頂きました。

メールには、参考にしたサイトリンクが貼られていたので、早速その方法を試してみたのですが、どうもうまく表示されません。

きっと私の試し方が何か間違ってるんだろうなぁ・・・と思いつつ、全然違う方法で表示することができましたので、記事にしておきたいと思います。

元々の参考リンク


Blogger パソコン用とモバイル端末用に「Google Adsense」を設置する : Jkun Blog

bloggerのモバイルテンプレートにadsenseを貼り付けてみたOkissta.com 元DQNの話したいこと


上記リンク記事は、2つとも丁寧に説明がされていますので、リンク先の方法でうまくいくなら、そちらの方がいい気がします。

なにせ、紹介するのは私という素人の「これでいけないのかな?・・・表示出来た、これでいいかもしれない!」というレベルの方法ですので・・・。

元に戻すのは自分で出来るし、取り敢えず試してみるか。と、自分で判断出来た人だけ、参考にしていただければと思います。


Bloggerのモバイル表示でGoogle Adsenseを表示する!


大まかな流れとしては・・・

  • テンプレートのバックアップを取る!(重要
  • Google Adsenseで「モバイル用の広告」を作成する。(記事上・下用それぞれ)
  • HTMLの編集で、コードを追加する。
  • CSSで余白を調整する。

こんな感じです。


1.) テンプレートのバックアップを取る


▲「設定画面テンプレートバックアップ/復元テンプレートを全て保存する

ブログのカスタマイズは、全てはここから始まります。
ダウンロードしたテンプレートファイルは、しっかり保存しておいてくださいね。


2.) Google Adsenseで「モバイル用の広告ユニット」を作成する


Google Adsenseで、モバイル用の広告ユニットを作ります。

記事上用と記事下用に2つ分。難しいことは特にないと思います。

ユニットは「320 x 50」のモバイルバナー。名前欄は、自分で判別出来るように任意で付けておきます。カスタムチャンネルや広告デザインなどの設定もありますが、記事の趣旨から脱線してしまいますので、ここでは割愛致します。

作成したら、それぞれのコードをコピー出来るように準備を!
・・・ブラウザのタブを開いたままにしておくだけです(°⌓°)


3.) HTMLの編集から、コードを追加する


▲「設定画面テンプレートHTMLの編集」からの画像。

ウィジェットテンプレートの展開にもチェックを入れて、赤枠で囲った部分を目安にして、モバイル用の「data:post.body」を探して下さい。

Bloggerのテンプレートで、「data:post.body」をページ内検索すると、候補が2つ挙がってくると思います。その、2つ目の方のコード部分が、モバイル用の表示のようです。←試してみた限りでは。

画像の箇所から、下に進んだところにその箇所はあります。

記事上と記事下という事ですので、

  • 「div class='post-header-line-1'」・・・記事上用。
  • 「data:post.body/」・・・記事下用。

という部分に追加することにします。

タグ自体は、同じ物があるものですので、間違えないようにしてくださいね。


▲コチラは、「div class='post-header-line-1'」の下に、広告コードを挿入した画像。
記事上用のコード部分です。

追加するコード部分は、
<div class='mobile-header-ads'>
<script type='text/javascript'>&lt;!--
google_ad_client = &quot;ca-pub-xxxxxxxxxx&quot;;
/* Header-mobile */
google_ad_slot = &quot;xxxxxxxx&quot;
google_ad_width = 320;
google_ad_height = 50;
//--&gt;
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</div>
このようにして、スクリプトタグに囲まれた部分の「”」を「&quot;」に、「<」「>」を「&lt;」「&gt;」に変更しないと、広告は表示されないので、ご注意下さい。

「div class='mobile-header-ads'」の部分は、私が付けた名前で、変更してもらっても大丈夫な部分です。例えば「div class='mobile-adheader'」など・・・判別しやすいものにするといいと思います。

また、「xxxxxx」の部分2箇所は、Google AdsenseのIDが入りますので、人によって変わります。Adsense側でコードを作った時に自動で入力されてますので、気にすることはありません。


続いて、記事下部分。
▲こちらは、「data:post.body」の直下に広告コードを貼り付けました。

この下に、「div class='post-footer-line post-footer-line-1'」という、フッター部分のタグもありますので、希望の場所によって貼り付け位置は変更して下さい。

<div class='mobile-footer-ads'>
<script type='text/javascript'>&lt;!--
google_ad_client = &quot;ca-pub-xxxxxxxxx&quot;;
/* Footer-mobile */
google_ad_slot = &quot;xxxxxxxx&quot;;
google_ad_width = 320;
google_ad_height = 50;
//--&gt;
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script></div>
こちらのコードも記事上のものと、まぁ同じです。

divのクラス名だけ、footerを示すように変えてます。

コードの貼り付けが終わったら、プレビューでエラーがないことだけ確認して、保存。お手持ちのスマートフォンなどで表示を確認してくださいね!


4.) CSSで位置を調整


▲私の場合、iPhoneで見た時に、広告の左に余白があって、少し右にはみ出す感じがしたので、余白の調整をしました。このあたりは好みかもしれません。

marginの数値は、左から順に「上・右・下・左」の順になりますよ。


結果


▲このような感じで、モバイル表示がされるようになりました。

記事下の方は、Linkwithinの下に表示させてもいいかもしれませんね。その場合は、「footer-line-1」の下にコードを移動です(*-*)


あとがき


自分では、モバイル広告は表示するかどうかは、まだ考えてるところなので継続して使うかどうかは分かりませんが、こんな方法でも表示出来るのかと、いい刺激になりました。

最後に、今回紹介した方法は、自分で勝手に考えて試したら、「表示出来たし、問題もなさそう?」となった程度のものですので、お試しは自己責任で行なって頂くようにお願いします。

ただ、「これだと、こういう理由で駄目だよ!」といったご意見・・・
そこのHTML部分は何も足しちゃダメなところ!」といったご指摘は、いつでも拝聴したいと思いますので、何か思うところがあれば、是非コメントないし、メールを頂ければと思います。

この方法で広告貼ってる・・・というサイトが見つからなかったので、とても不安なのですw

それではまた!

9 件のコメント:

  1. bloggerのカスタマイズでいつもお世話になっております。

    質問なのですが、モバイルテンプレートをカスタムにするとブログの幅がとても狭くなってしまいます。
    PC表示時の背景画像がモバイル表示時の左右の部分に大きく(太く?)表示されるためです。
    いくつかブログを作って試してみたのですが、何度やっても同じ結果になってしまいます。
    このブログのようにモバイル表示時の幅がぴったりフィットさせたいのですが、どのようにすれば宜しいのでしょうか?

    よろしくお願いします。

    返信削除
  2. コメントありがとうございます!
    ご質問の件ですが、恐らくはmarginかpaddingの設定辺りだとは思うのですが、確実なところは、どういう設定になっているかを確認しないと判断が難しいです(・・;
    自分がどういう調整したか、ちょっとよく覚えていない部分なので・・・。

    ですので、もしよろしければ、ブログのURLを教えていただいてもよろしいでしょうか?
    直接見に行く事が出来れば、状態が判断しやすいですので。
    もし、コメントに書きづらいようならメールにして頂いても構いません。

    返信削除
  3. いつも拝読させてもらってます。ためにな記事で、素晴らしいです。
    テンプレートをへんこうすると.あどのやソースも消えてしまい、毎度同じ作業をしてしまうのですが、すっかり忘れてしまい、今日もこちらの記事を見ながらの設置です。ありがとうございます。

    返信削除
  4. ありがとうございます!
    テンプレートを変更した後などは、確かに色々大変ですよね。
    ワンクリックで、変更内容が再現出来たりしないものかと思ったりする時がありますw

    返信削除
  5. とても参考になりました。こんな役に立つ記事を公開してくださりありがとうございます(^-^)

    返信削除
  6. こちらこそ、嬉しいお言葉ありがとうございます!

    返信削除
  7. はじめまして。最近Bloggerでブログをはじめたものです。私のBlogもMobileからのアクセスが50%以上のため、こちらの記事とても参考になりました、ありがとうございました。

    返信削除
  8. ありがとうございます!
    本当に、モバイルからのアクセスの割合は、増えましたよね。

    返信削除
  9. さやえんどう2014/11/13 13:28:00

    参考にさせていただきありがとうございます。

    お伺いしたいのですが、

    「4.) CSSで位置を調整」を参考にさせていただき、

    下記の通りやってみましたが、iPhoneで確認するとやはり広告がはみ出したままです…。

    テンプレート→カスタマイズ→上級者向け→CSSを追加
    で、以下のとおり記載。
    .mobile-header-ads{margin:10px 0 0 -10px}
    .mobile-footer-ads{margin:5px 0 0 -10px}

    CSSあまり詳しくなく恐縮ですが、コードが間違っているのか、はたまたCSSを反映させるのに他の操作が必要とかでしょうか。おわかりになれば教えてください。

    返信削除

Related Posts Plugin for WordPress, Blogger...