Home > スマートフォン
スマートフォン

Blogger のモバイルテンプレート(スマートフォン用のテンプレート)で、動的ビュー(ダイナミックビュー)のテンプレートを選択できるようになりました。

これを有効にするには、Blogger 管理画面「テンプレート」ページの「モバイル」欄の「歯車マーク」をクリック、「携帯端末では現在のテンプレートのモバイルバージョンを表示する」項目を「はい。携帯端末でモバイルテンプレートを表示する。」にして、「モバイルテンプレートを選択」項目で、「動的ビュー」を選択し「保存」ボタンを押すだけ。
もとからブログの PC 版テンプレートに動的ビューテンプレートを指定していて、なおかつモバイルテンプレートを「デフォルト」にしている場合には、上の設定なしで自動的にモバイル版も動的ビューになるとのこと。また、試してみたところ PC 版は通常のレイアウトテンプレートで、モバイル版だけ動的ビューという設定もできるようです。
現在モバイルテンプレートとして使用できる動的ビューのスタイルは「クラシック」だけみたいなんですが、それでもブログの見せ方のバリエーションが広がってきたというのはやっぱりうれしいですね。
前回、ダイナミックビューがカスタマイズ可能になったというニュースをお伝えしました。
設定は Blogger の新しいダッシュボードの「テンプレート」ページから行えます。ページを開いてみると、このような表示が出てきます。

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

これまでにモバイルテンプレートを有効にしたことがない場合でも、ここから有効にすることができます。
「モバイルテンプレートを選択」の欄で選べるのは、今のところ「デフォルト」、「シンプル」、「画像ウィンドウ」、「Awesome Inc.」、「ウォーターマーク」、「エスィリアル」、「旅行」、「カスタム」の 8 種類のテンプレート。最後の「カスタム」を選ぶと、現在の PC 用テンプレートのデータをできるだけ引き継いだモバイルテンプレートが自動的に作成されます。
モバイルテンプレートにウィジェットを表示する
Blogger Developers Network ブログには、モバイルテンプレートにブログのウィジェット(ガジェット)を表示させる方法が載っています。
ブログ上のウィジェットで、デフォルトでモバイルテンプレートに表示されるのは、次の 6 種類。
- Header … 「ページヘッダー」ウィジェット
- Blog … 「投稿」ウィジェット
- Profile … 「基本情報」ウィジェット
- PageList … 「ページリスト」ウィジェット
- AdSense … 「AdSense」ウィジェット
- Attribution … 「帰属」ウィジェット
(上級者向けの内容です。必ずテンプレートのバックアップをとってから試してください。)
新ダッシュボード「テンプレート > 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を表示
モバイルで閲覧時に
mobile (最初に空白あり) を表示します。すでにテンプレートには<body expr:class='"loading" + data:blog.mobileClass'>
と記述されており、PC での閲覧時には
<body class='loading'>
と、モバイルでの閲覧時には
<body class='loading mobile'>
と書き出されるようになっています。なので、
.mobile .post-footer {
color: red;
}
color: red;
}
といった風に、モバイル閲覧時にだけ適用される CSS が簡単に書けます。
blog.isMobile
モバイルで閲覧時に
true を、それ以外は false を表示します。テンプレートのウィジェット内に<b:if cond='data:blog.isMobile'>
(モバイル閲覧時に表示したい内容)
<b:else/>
(PC 閲覧時に表示したい内容)
</b:if>
(モバイル閲覧時に表示したい内容)
<b:else/>
(PC 閲覧時に表示したい内容)
</b:if>
と書くことで、実際の表示内容を書き分けることができます。
…ということで、随分長くなってしまいましたが、Blogger 歴の短い人も長い人も、モバイルテンプレートを選択したり、モバイルテンプレートのカスタマイズに挑戦してみたりするといいんじゃないでしょうか。
モバ造さんと so-ta さんに、メールやコメントで教えてもいらいました。ありがとうございます。

Blogger に待望の iOS 用のアプリが登場しています。
アプリから、iOS デバイスで撮った写真をつけて投稿を公開することも可能だそうです。ラベルや位置情報もつけられるというのもいいですね。
ということで、iPhone や iPad、iPod touch ユーザーの人は、ぜひ一度お試しください。アプリのダウンロードは以下からどうぞ。ちなみに、iOS のバージョンは 3.1.3 以降が必要です。
関連:
@kurikuribo iPhoneでbloggerのモバイルテンプレートを左右にフリックすると、ページを移動できるのって既出ですか?
今日はじめて知りました ^^;Fri Jul 22 07:27:00 via webM.H
realpandaya
と、NO MAC , NO LIFE ? の realpandaya さんに教えてもらっていたんですが(ありがとうございます!)、ようやく Blogger のアナウンスの方も出ました。
これによると、Blogger のスマートフォン用テンプレート、いわゆる「モバイルテンプレート」が、スマートフォン上のスワイプ操作に正式に対応したとのことです。iPhone や Android 端末をお持ちの方は、今すぐお試しを。
最近の Blogger、徐々にですが、確実に便利になっていく印象ですね。今後のアップデートにも期待です。
関連:

昨年末に紹介したのが、こちらの記事。

設定は、Blogger 管理画面「設定 > メールとモバイル」ページの「モバイルテンプレート」の項目から「モバイルテンプレートを表示する」を「はい」にするだけ。
自分のブログが、スマートフォンで実際にどのように表示されるかは、ブログ URL 末尾に
?m=1 を付け加えてアクセスすることで確認することができます。正式採用となったモバイルテンプレートで、スマートフォンの読者が増えるといいですね。
1 年以上前に、Blogger 投稿用の iPhone アプリについて紹介したことがありましたが、今回ようやく Android にも、Blogger 公式のアプリが登場した模様です。
- Google アカウントや Blogger ブログを切り替えて利用。
- ブログへの記事投稿だけでなく、ローカルに下書きを保存する。
- カメラをアプリから起動して、写真を投稿。
- ギャラリーやブラウザから、共有メニューを出して、写真を投稿。
- Android による位置情報を、投稿に含める。
- このアプリ経由で書いた投稿や下書きを確認。
- 公開済み投稿の長押しで、ブラウザで実際にブログ記事を表示。
ということで、この Android App のインストールはこちらから。
Android ユーザーの方は、ぜひぜひ試してみてください。
