Blogger(ブロガー)のモバイル画面の記事上と記事下にAdSense(アドセンス)広告を表示させる方法です。

やってみるとなかなか難しく、ネット上の諸先輩方の情報を頼りに何とかできましたので、同様にお困りの方がいらっしゃいましたらご参考になさってください。(2014/05/25現在の情報です)

これ以外の位置(たとえばモバイルのトップページのタイトル下など)はまだ実現できていません。

完成状況(記事上)
 
 
完成状況(記事下)
 
 
アドセンスコードを組み込んだ状況
(一部文字を置き換えてあります)
 
 
@手順@
1:アドセンスでモバイル推奨アドセンスコードを取得
 
2:取得したアドセンスコードの一部文字を置き換え
 
3:ブロガーのモバイルテンプレートを『カスタム』に変更
 
4:ブロガーのタグ編集画面で上記のアドセンスコードを組み込み
という手順になります。
 
 
以下もう少し詳しい説明です。
1:については省略。
 
2:取得したアドセンスコードの一部文字を置き換えについて
 取得したアドセンスタグをそのまま貼りつけるとテンプレートを保存する時にエラーが出てしまいます(=保存できない=動作しない)。
 
タグの中の「”」を「&quot;」に、「<」を「&lt;」に、「>」を「&gt;」に変更しないと動作しません。
 
手書きで直してもしれていますが、下記のサイトで簡単にできます。
 『Replace < > “』だけにチェックを入れておきます。
 
3:ブロガーのモバイルテンプレートを『カスタム』に変更
 ブロガーのテンプレートは設定画面上2つに分かれていますが、実際にはパソコン用とスマホ用が同じテンプレートの中に入っています。理由はともかく、モバイル用テンプレートを『カスタム』にしないとスマホ用に変更した部分が反映されません。
 
4:ブロガーのタグ編集画面で上記のアドセンスコードを組み込みについて
 これが一番難しいのですが、まずブロガーのテンプレートのタグは一部が折りたたんであり、すべては表示されていません。(必要な部分の▽を押すと展開します)。
 
そのため、アドセンスを組み込む行数を正確に把握しないと見つけるのが至難のわざです。
 

私は無料の『Microsoft Expression Web4』を使いました。タグの行数が表示されます。詳しい使い方などは → オールアバウトの記事 をご参照ください。

まず現在使っているテンプレートをダウンロード(バックアップ)してから始めます。

バックアップしたテンプレートを Microsoft Expression Web4 で開き、『div class=’post-header-line-1』を検索してタグが貼ってある行数を特定します。

このタグの直下にアドセンスコードを貼ると個別記事の上にアドセンス広告が表示されます。ただし『div class=’post-header-line-1』は2か所あります。どちらかがスマホ用で、もう片方はパソコン用です。私が使っているテンプレートは1個目のタグ直下がスマホ用でした。

各段階でテンプレートのバックアップを取りながら、貼って→保存して→パソコンとスマホで確認する という作業の繰り返しです。

同様に『data:post.body』を検索すると3か所あります。このタグの直下にアドセンスコードを貼ると個別記事の下にアドセンス広告が表示されます。こちらは上記で正解が分かればその下にある『data:post.body』がスマホ用になります。

アドセンスコードを貼ったり消したりする必要があるので、コメントアウトを付けておきました。

また、記事との区切りに水平線タグと改行タグを入れてありますが、このタグも「”」を「&quot;」に、「<」を「&lt;」に、「>」を「&gt;」に変更しないと保存できません(=動作しません)。これはアドセンスの規約に違反しないように記事とアドセンス広告を離すための措置です。