Bloggerでモバイル専用ページを作る方法、if条件分岐
Google Bloggerでモバイル専用ページを表示させる方法
Bloggerのトップページをカスタマイズすると、モバイル専用ページが表示されなくなりました。
そこでなぜモバイルページが表示されないかについてと、モバイルページを表示させる方法を考えました。
モバイル端末にモバイル専用ページを表示させる方法
Bloggerデフォルトテンプレートでは媒体によって表示させるページをコントロールする行は1178行あたりに書かれています。
モバイル媒体を分岐させる場所
モバイルページを表示させる条件文は以下のようになります。
この一文を挿入するセクションはメインセクションになります。
<b:section class='main' id='main' name='Main' showaddelement='no'>
このセクション内の・・・
<div class='post-outer'>
というところを探します。
標準（デフォルト）テンプレートでは、以下のように記述されており、自動でモバイル表示が表示されるようになっています。
<b:include data='post' name='post'/>
(中略)
<b:else/>
<b:include name='mobile-main'/>
</b:if>
(中略)
<b:else/>
<b:include name='mobile-main'/>
</b:if>
この赤い文字で強調している部分がモバイル表示をさせるタグになります。
トップページを要約する方法では以下のように記述を書きました。
<b:if cond='data:blog.pageType == "item"'>（メインページ）
<b:include data='post' name='post'/>
<b:else/>（メインページ以外なら＝つまりトップページなら）
<b:include data='post' name='youyaku'/>
</b:if>
しかしこれではモバイル専用ページにまで"youyaku"を表示してしまうことになりました。<b:include data='post' name='post'/>
<b:else/>（メインページ以外なら＝つまりトップページなら）
<b:include data='post' name='youyaku'/>
</b:if>
モバイルページを表示させる記述方法
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
メタタグにこのような記述があることを確認します。ここではモバイル専用ページの表示サイズの指定が行われています。必要であればカスタマイズしてみるといいでしょう。
<body expr:class='"loading" + data:blog.mobileClass'>
bodyタグのところでモバイル用のページがあることを記述していることを確認します。
<b:if cond='!data:mobile'>または<b:if cond='data:blog.isMobile'>
<b:else/>・・・必要であれば記入（デスクトップ用表示を記述）
</if>
この条件式を利用してオリジナルのテンプレートを作ってみましょう。 <b:else/>・・・必要であれば記入（デスクトップ用表示を記述）
</if>
