>--> モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | > モバイルテンプレートもカスタマイズ可能に

モバイルテンプレートもカスタマイズ可能に

Posted at: 2011-11-20 Label: , , 13

前回、ダイナミックビューがカスタマイズ可能になったというニュースをお伝えしました。

そして、今回は、モバイルテンプレートです。ご存知のとおり、iPhone や Android 端末からブログにアクセスしたときに表示されるテンプレートのことですが、今回新たにこちらもカスタマイズ可能になりました。

設定は Blogger の新しいダッシュボードの「テンプレート」ページから行えます。ページを開いてみると、このような表示が出てきます。

Blogger モバイルテンプレート設定

「モバイル」の歯車ボタンを押して、ポップアップしてくる画面がこちら。

Blogger モバイルテンプレート設定

これまでにモバイルテンプレートを有効にしたことがない場合でも、ここから有効にすることができます。

「モバイルテンプレートを選択」の欄で選べるのは、今のところ「デフォルト」、「シンプル」、「画像ウィンドウ」、「Awesome Inc.」、「ウォーターマーク」、「エスィリアル」、「旅行」、「カスタム」の 8 種類のテンプレート。最後の「カスタム」を選ぶと、現在の PC 用テンプレートのデータをできるだけ引き継いだモバイルテンプレートが自動的に作成されます。


モバイルテンプレートにウィジェットを表示する

Blogger Developers Network ブログには、モバイルテンプレートにブログのウィジェット（ガジェット）を表示させる方法が載っています。

ブログ上のウィジェットで、デフォルトでモバイルテンプレートに表示されるのは、次の 6 種類。

  • Header … 「ページヘッダー」ウィジェット
  • Blog … 「投稿」ウィジェット
  • Profile … 「基本情報」ウィジェット
  • PageList … 「ページリスト」ウィジェット
  • AdSense … 「AdSense」ウィジェット
  • Attribution … 「帰属」ウィジェット
それ以外のウィジェットをモバイルテンプレートに表示させたい場合は、ブログのテンプレートを HTML で編集する必要があります。

（上級者向けの内容です。必ずテンプレートのバックアップをとってから試してください。）

新ダッシュボード「テンプレート ＞ HTML の編集」（旧ダッシュボード「デザイン ＞ HTML の編集」）ページで、「ウィジェットのテンプレートを展開」にチェックを入れて、ウィジェット要素を見つけます。その開始タグに mobile='yes' 属性を追加すると、ウィジェットがモバイルテンプレートでも表示されるようになります。

「ブログアーカイブ」ウィジェットをモバイルテンプレートに表示する例：
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

mobile 属性で指定できる属性値は、yes、no、default、only です。no でデフォルトで表示することになっているウィジェットも非表示にすることができます。

  • yes … PC テンプレート、モバイルテンプレートともに表示
  • no … PC テンプレートのみに表示
  • default … デフォルト設定に従う
  • only … モバイルテンプレートのみに表示

モバイルテンプレート関連の新しいデータタグ

さらにマニアックな話題ですが、モバイルテンプレート関連の新しいデータタグも追加されています。

  • blog.mobileClass … モバイルで閲覧時に  mobile を表示
  • blog.isMobile … モバイルで閲覧時に true を、それ以外は false を表示
blog.mobileClass

モバイルで閲覧時に  mobile （最初に空白あり） を表示します。すでにテンプレートには

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

と記述されており、PC での閲覧時には

<body class='loading'>

と、モバイルでの閲覧時には

<body class='loading mobile'>

と書き出されるようになっています。なので、

.mobile .post-footer {
  color: red;
}

といった風に、モバイル閲覧時にだけ適用される CSS が簡単に書けます。

blog.isMobile

モバイルで閲覧時に true を、それ以外は false を表示します。テンプレートのウィジェット内に

<b:if cond='data:blog.isMobile'>
  （モバイル閲覧時に表示したい内容）
<b:else/>
  （PC 閲覧時に表示したい内容）
</b:if>

と書くことで、実際の表示内容を書き分けることができます。


…ということで、随分長くなってしまいましたが、Blogger 歴の短い人も長い人も、モバイルテンプレートを選択したり、モバイルテンプレートのカスタマイズに挑戦してみたりするといいんじゃないでしょうか。


スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:13

  1. riko03 December, 2011 19:29

    クリボウさん、助けてください!!!!

    (記事と違う件で申し訳ございません!!)

    ダッシュボード画面の新しいインターフェースで・・・ってのをクリックしてしまったら、その後からダッシュボードが消えてしまって表示されなくなってしまいました。。。
    自分のブログは出ます。
    どうしたらダッシュボードを戻せますか？
    ちなみに、お気に入りのダッシュボードをクリックすると、ブラウザ?に問題が生じてるため、クロームからやってくださいみたく出ます。
    どうかお返事をお願いします!!

    ReplyDelete
  2. Kuribo03 December, 2011 19:34

    新ダッシュボードになって、ブラウザが非対応になってしまったのかもしれませんね。

    http://www.blogger.com/opt-in-new-ui.g?useNewUi=false

    にアクセスすると、旧ダッシュボードへ戻せると思います。

    ReplyDelete
  3. riko03 December, 2011 20:48

    すごい!!!出ました!!!
    クリボウさん、本当に本当にありがとうございます!!
    いつも助けていただいて感謝してます。

    ReplyDelete
  4. riko03 December, 2011 23:06

    クリボウさん、もう１件だけ教えていただけないでしょうか？

    ブログのヘッダーをクリックしてホームに戻るようにしたいんですが、調べて、出た英語をコピーしても、ブログとかダッシュボードとか、どこの画面から入って、どこに貼りつけたらいいか判らないんです。
    そのコピーする英語も様々でよく解らないです...
    どうか教えてください!!!

    ReplyDelete
  5. port20 June, 2012 02:35

    この記事もすごい・・・

    blogger初心者ですが、読み漁っています。
    自分の技量では、全部が全部できる訳ではないのが口惜しいです（笑）。

    ライブドアブログ、羨ましいなぁとブログ友達の話を聞いていて一瞬だけ思いましたが、結局、管理人の腕次第だと、見に沁みています苦笑。

    ReplyDelete
  6. イクメンライフハッカー29 April, 2013 23:06

    This comment has been removed by the author.

    ReplyDelete
  7. Masahiro Yamaguchi18 February, 2014 22:35

    ウィジェット表示とデータタグの取り扱い、参考になりました。
    blog.isMobileを使ったif分岐まで紹介するなんて、もうbloggerテンプレートの達人ですね。

    bloggerのことならばクリボウと言えるぐらい参考にしてます。
    ありがとう。

    ReplyDelete
  8. bloog21 May, 2014 08:25

    私の場合「only」を付加して（しばらく経つと）レイアウト画面が保存できなくなるというエラーが出ました。今のところonlyはこれといって必要ないのでどうでもいいことではありますが、一応報告まで。

    ReplyDelete
  9. SPOT NOTE みなとみらい28 November, 2014 22:59

    モバイルサイトでもガジェットを表示したかったのでこの記事にたどり着いて助かりました。
    mobile='yes'を追加しようとすると「Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".」とエラーがでます。
    調べてもよく意味がわからず途方にくれてしまいました。
    もしよろしければアドバイスいただけませんでしょうか？

    ReplyDelete
    Replies
    1. redcomet31 August, 2018 02:50

      This comment has been removed by the author.

      Delete
  10. Unknown03 January, 2015 12:50

    クリボウ様
    お世話になります。
    最近ココログからBloggerに移行したBlogger初心者でこちらのBlogを参考にカスタマイズをさせていただいております。
    モバイルサイトの事でお教えをいただければと思うのですが、Blogの幅を960pxに設定しているのですがiPadを横を向けてBlogを表示するとBlog表示が左寄せとなりBlog右端にライン？影？が表示されてしまいます。
    このラインを消し、Blogのモバイルサイトをセンター表示にする事は可能なのでしょうか？
    もしよろしけてばお知恵をお貸しいただければと思います。
    よろしくお願い致します。

    ReplyDelete
  11. clara gisella20 October, 2018 10:57

    Bonus Freechip di Dealer Poker Live Samgong Online Vladimir Region Capital Situs www.rusiapoker.com Melalui BPD Aceh Syariah Kode Bank 116.

    ReplyDelete
  12. yanmaneee09 June, 2021 17:35

    yeezy boost 350
    nike off white
    supreme
    curry shoes
    jordan 4
    supreme clothing
    off white x jordan 1
    lebron 18
    jordan sneakers
    steph curry shoes

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.