参考にしたのは以下のサイトです。よくまとめた参考サイトがあると本当に助かりますよね。
Bloggerのモバイルテンプレートをカスタマイズする方法 | Asterlist
mobile-post ...
モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips
基本的な流れはPCサイトと同様です。
１．アドセンスでコードを取得
２．コードの中でHTMLエンティティ文字にない文字を変換する
３．HTMLの編集で変換したコードを貼り付ける
注意点もPCサイトと同様のことが言えます。
１．同じ作業をしてもHTMLの編集の保存がうまく行く場合と行かない場合がある
２．コードを貼り付ける位置がテンプレートによって微妙に違う場合がある
それに加えてモバイルテンプレートを編集するときは以下のことに注意する必要があります。
１．モバイルテンプレートを「カスタム」にしておく
これをカスタムにしておかないといくらHTMLを編集しても変更が反映されないようです。これはもっとも注意すべき点ですね！方法はテンプレート＞モバイルの下の歯車
その後、「 はい。携帯端末でモバイル テンプレートを表示する。 」を選択。モバイルテンプレートのプルダウンメニューで一番下の「カスタム」を選択後、右下の保存で終了です。
２．モバイル表示の確認を確認しておく
PCサイトとは異なり、テンプレートのプレビューをした段階では、どのように変更されているか確認できません。モバイル表示の確認方法はテンプレートを保存してから、左メニューのテンプレートを一旦クリックして上に戻り、＞モバイルの下の歯車を選択し、次の画面でプレビューを選択します。すると性格にモバイル表示が確認できます。
３．コードを貼り付ける位置が探せない
実は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広告を表示する方法
変換した結果こんなコードを貼り付けていきます。
貼り付けた状態です。まずはテンプレートを保存し、一つずつ貼り付け→テンプレートをプレビュー→テンプレートを保存を繰り返して確実に作業をしていきます。プレビューが見られなかったり、保存が出来なければ、左のテンプレートをクリックし、もう一度同じ作業をやってみるとうまく行くことがあります。
結果、このように広告を貼り付けることができました。
タイトル下
記事下
編集した後、うまく保存できなかったり、プレビューができなかったり、編集環境に癖がありますが、慣れてくれば作業がスムーズにできるようになってきます。
