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

Google / Daniel Morris

こんばんは！すなふ(@sunafu35)です。

今日・・・もう昨日か・・・

Bloggerのモバイル表示時に、Google Adsenseを、記事上と記事下に表示させるようにしたいけど、うまく表示出来ないのですが、方法判りませんか？

というメールを頂きました。

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

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

元々の参考リンク

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

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

上記リンク記事は、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部分は何も足しちゃダメなところ！」といったご指摘は、いつでも拝聴したいと思いますので、何か思うところがあれば、是非コメントないし、メールを頂ければと思います。

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

それではまた！