Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

2015年5月26日火曜日

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

イントロダクション

Google のブログサービス「Blogger」では、ブログの見栄え（デザイン）をパソコンで表示した時のもの）と、スマートフォンなどのモバイル端末で表示した時のものとで、分けることが可能です。

Blogger:モバイル表示のデザインがカスタマイズできない？そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう！
http://upa-pc.blogspot.com/2015/04/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

PC版の表示とモバイル版の表示とで、表示させる要素を制御するには、Blogger のテンプレートの HTML を編集する必要があります。

今回は、モバイル版のブログ表示をカスタマイズする上で、私が良く使っているものについて記載します。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私が良く使っているもの

要素の表示・非表示を制御するタグ

モバイル表示でのみ、要素を表示する

モバイル表示でのみ要素を表示するには、次の <b:if> タグでモバイル表示でのみ表示したい要素を囲みます。

<b:if cond='data:blog.isMobile'>
ここにモバイル表示で表示する要素を記載
</b:if>

PC表示でのみ、要素を表示する

PC表示でのみ要素を表示するには、次の <b:if> タグでPC表示でのみ表示したい要素を囲みます。

<b:if cond='data:blog.isMobile == "false"'>
ここにモバイル表示で表示しない要素を記載
</b:if>

なお、モバイル表示でのみ表示するものと、PC表示でのみ表示するものを、両方記載したい場合には、<b:else/> を使うと、簡単に記載することができます。

<b:if cond='data:blog.isMobile'>
ここにモバイル表示で表示する要素を記載
<b:else/>
ここにモバイル表示で表示しない要素を記載
</b:if>