日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

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 == &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




Kindle版 楽天 7net




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...