Bloggerでスマホ向けページにAdSense広告を設定する

Bloggerのスマホ向けページに広告を設置しましたが、ホーム画面でも広告が出るようにカスタマイズしました。

記事の上に設置

記事の直下に設置

記事ページとホーム画面への対応

スマホ向けには記事の上と下の2カ所に広告を設置する方針とします。

Bloggerのスマホ向けのホーム画面では、記事の抜粋の一覧を表示するようになっているので、記事のページとは構成が異なります。
記事の上に設置するのは共通化できましたが、記事の下の場合は上手くいかず、2カ所に記述することで対応しました。

編集の手順

1. モバイルのページをカスタムに設定する。
[テンプレート] -> [モバイル] -> [カスタマイズ]

2. HTMLの編集で挿入箇所を検索する。
[テンプレート] -> [ブログ] -> [HTMLを編集]

※コードの検索はコードのテキストエリアでCtrl+F。

3. エスケープした広告コードを貼付ける。

挿入箇所

上の挿入箇所は id='mobile-main' で検索します。
下の挿入箇所は data:post.body で検索します。

<b:includable id='mobile-main' var='top'>

①記事タイトルの上はココ

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType == "index"'>

<b:loop values='data:posts' var='post'>

<b:include data='post' name='mobile-index-post'/>

</b:loop>

②ホーム画面の記事一覧の直下はココ

<b:else/>

<b:loop values='data:posts' var='post'>

<b:include data='post' name='mobile-post'/>

</b:loop>

</b:if>

</div>

...

(一部省略)

...

<data:post.body/>

</div>

③記事の直下はココ

（参考まで）ホーム画面での広告が不要であれば下記に置けます

<b:includable id='mobile-post' var='post'>
①記事タイトルの上はココ
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
...
(一部省略)
...
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
②記事タイトルの下はココ
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
③記事の下はココ

（参考まで）その他の方法

1. ガジェットにモバイル用の広告コードを貼付ける。

投稿の上と下に２つのガジェットを置きました。
[レイアウト] -> [ガジェットを追加]

※この場合は広告コードをエスケープする必要がありません。

2. HTMLの編集でガジェットに mobile='only' を追加する。
[テンプレート] -> [ブログ] -> [HTMLを編集]->[ウィジェットへ移動]

（例：idはガジェット毎に異なります）

<b:widget id='HTML1' locked='false' title='スポンサー' type='HTML' mobile='only'>

これを設定した後はレイアウト画面からガジェットが見えなくなりました。
HTMLコードはちゃんと残っているのでmobile='only'を削除してあげると再びレイアウト画面から見えるようになります。

2014/06/02