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

スマホ用のページ作成に勤しもうと思ったんですが、クリボウさんとこのページに何度もアクセスするので自分のための備忘録として

モバイルテンプレートもカスタマイズ可能に

上記のリンクはとても参考になるのでblogger使いの方なら知っているとは思いますが一応明記しておきます。

モバイルテンプレートを設定するとスマホページをほぼ自動で作成してくれるbloggerですが、スマホ用のオペラや火狐などで見るとPCページが表示されますね。標準ブラウザで見るとスマホ用のページなんですが、んー何故なんだろう。スマホ用ページのほうが絶対に見やすいのに。

ブラウザ側でPC表示かスマホ表示か選べるようなので、今のところはユーザー任せですかね。こちら側で強制的に見せる方法があったとしてもそれはユーザビリティに反しますね。

スマホのアクセスも結構あることからスマホ用のアドセンスを設置しました。PC用とスマホ用に表示を切り分けることによって可能になります。

例：

PCヘッダー：リンクユニット特大+リンクユニット横長

同スマホ：320×50のモバイルバナー

PC記事下：レクタングル大×２

同スマホ：レクタングル中×１

こんな感じになっています。サイドバーウィジェットはスマホページには表示されないため省略しています。

これはいたって簡単です。

<b:if cond='data:blog.isMobile'> （モバイル閲覧時に表示したい内容）<b:else/> （PC 閲覧時に表示したい内容）</b:if>

クリボウさんのところから引用してますが、これをコピペして（）の部分を書き換えるだけです。もう少しいうと

ヘッダー部分

<b:if cond='data:blog.isMobile'>
モバイルバナーのアドセンスコード
<b:else/>
PCヘッダー部のアドセンスコード

</b:if>

記事下部分については、HTML内で一番下にある<data:post.body/>の下に入れるだけで上記のコードを入れることなくモバイルのみ表示されます。おそらく上記のコードでもいけるんでしょうが

HTML編集からウィジェットを展開させてCtrl+Fを押して<data:post.body/>で検索し、一番最後（ほかのブログには２個目とありましたが、何故か私のHTMLには<data:post.body/>が３つあります。）のところに記述すればOKです。

ようはこういうことです。エンティティに変換済みのアドセンスコードをペタリ。

<data:post.body/>

google_ad_client = "ca-pub-アドセンス番号";

/* おきすたスマホ記事下中 */

google_ad_slot = "アドセンス番号";

google_ad_width = 300;

google_ad_height = 250;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

リンクユニット横長を普通にハッつけてあったんですが、スマホページにまで表示されてしまって、変に横スクロールバーが出現していたのでまとめてみました。

blogger　モバイルテンプレート　クリボウ　

で検索すれば一番上に出てくるんですけどね。ではまた

bloggerのモバイルテンプレートにadsenseを貼り付けてみた