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 == &quot;false&quot;'>
ここにモバイル表示で表示しない要素を記載
</b:if>



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

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

ウィジットの表示・非表示を制御する属性

ウィジットタグ（b:widget）に、次の属性を付与することで、ウィジットの表示・非表示を制御することができます。

PC版でのみ表示：
mobile='no'

モバイル・PC版の両方で表示：
mobile='yes'

モバイル版でのみ表示：
mobile='only'

詳細な情報

ここに記載したのは、Blogger のモバイル表示に関わる部分の一部の機能（私がよく使っているもの）です。

更に詳しい情報を知りたい場合には、次のページが参考になります。

モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips 
http://www.kuribo.info/2011/11/blog-post_20.html

このブログ内の、他の”Blogger モバイル”についての情報を見る

---

SEO対策のための Webライティング実践講座

Kindle版 楽天 7net