2011/12/10

Bloggerのモバイル表示がカスタマイズできる!

モバイルビューの時も、PC表示時のように、ラベルや人気のエントリなどを表示できたらいいなぁと思っていたら、割とあっさり出来たので、その紹介です。


詳しい内容は、Blogger公式のブログに記載されています。


設定方法は簡単で、新Bloggerインターフェースにて、「テンプレート」→「モバイル」を選んで、テンプレートを「カスタム」にします。

モバイルの歯車をクリック


テンプレートはカスタムにしましょう



Developers Networkによると、表示されるウィジェット(Widget)は

The widgets that display on mobile by default are the following:
  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution
の6つだけなので、後は表示させたいウィジェットを、HTMLを弄って表示させていく必要があります。


<b:widget>タグの中に以下のコードを入れるだけで、モバイルビューでの表示をコントロールできます。
  • mobile='yes' : PC表示・モバイル表示ともウィジェットを表示。
  • mobile='no' : モバイル表示されるウィジェットを強制非表示させる。
  • mobile='only' : モバイル表示のみ表示させる。
  • mobile='default' : デフォルト設定に従う。

私はあまりHTMLタグに明るくないので、バックアップをとってから、表示させたいウィジェットに「mobile='yes'」を入れていきました。

ただ、mobile='only'とすると、レイアウトから非表示になるのでPC表示を気にすることなく好きな順序でモバイルビューをいじることができますが、ぐちゃぐちゃになって管理しにくそうなのでやめました。


そして、とりあえずいくつか表示させたのが以下の感じ。




本文表示の後に、ソーシャルアイコン・レーベル・アーカイブ・人気の投稿を表示させてみました。
もう少し色々弄って見たいなぁ。


 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates
Related Posts Plugin for WordPress, Blogger...