Bloggerモバイル条件分岐-Bloggerにモバイルアドセンス表示をする方法
Bloggerでモバイル端末のみ表示(PCのみ表示)をさせる方法
Bloggerでモバイル端末にのみ表示をさせる方法を考えました。考えたというよりは、条件式を組み合わせただけなんですけどね。Bloggerにタイトル横にデスクトップのみアドセンスを表示させるときに便利な方法です。
モバイルの条件式
<b:if cond='data:mobile'>
ここにモバイル表示の内容を書く
空白でもよい
<b:else/>
ここはデスクトップ時の表示を書く
空白でもよい
</b:if>
Bloggerのヘッダーにアドセンスを表示させる方法
要は簡単です。Bloggerのタイトル表示には3通りの場合分けがされていまして「no header image」と「descriptionあり」と「descriptionなし」という場合があります。例えばテキストのみのタイトルの場合は「descriptionなし」のソースコードを編集します。
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper' style='float:left;'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
大体こんなことが書いてるあたりを検索してください。この「header-inner」のというところを見ます。まずは貴ブログのタイトルの長さが長ければ「titlewrapper」あたりにスタイルシートで長さを指定してタイトル右側にアドセンスが表示できるように編集しますが短いブログタイトルであれば長さの編集は気にすることはありません。
このヘッダーインナーの入れ子に続いてアドセンスを挿入します。条件式を書かないのであればモバイル端末でも同時にアドセンスが表示されます。
デスクトップ端末のみにアドセンスを表示させたいときは、上記のソースの続きにこのように記述します。
<b:if cond='data:mobile'>
空白
<b:else/>
ここはデスクトップ時のアドセンスの表示を書く
</b:if>
お疲れさまでした。