Bloggerのモバイルテンプレートをカスタマイズする方法

ベーステンプレートを変更しました。Ardor(@ArdorOnline)です。
この際だからモバイルテンプレートもカスタマイズしちゃいました！
今回は、モバイルテンプレートのカスタマイズについてご紹介します。

ベースに利用していた「Awesome Inc.」系テンプレートですが、
IEのみ表示がおかしくなっていました。
デフォルトで用意されているテンプレートにしては残念な結果だったので、
ベースに利用するテンプレートを変更しました。
またベースを変更すると共に、モバイルテンプレートもカスタマイズしました。

概要は、次の通りです。

• モバイルテンプレートを有効にする
• モバイルテンプレートの見分け方
• カスタマイズした箇所

今回ベースに利用したテンプレートは「シンプル」系です。
理由としては、Chrome、Safari、Firefox、IEでも正しく表示され、
カスタマイズが容易だったので採用しました。
まずはベースがしっかりしてないと作業が増えてしまいますよね。。

テンプレートを変更する際には、必ずバックアップをとっておいてください。
バックアップ方法は、以前の記事を参考にしてください。
記事：Bloggerのテンプレートをバックアップする方法

モバイルテンプレートを有効にする

モバイルテンプレートをカスタマイズするには、設定が必要です。
設定方法は、次の通りです。

「テンプレート」画面を開き、モバイルテンプレートをクリックします。

「モバイル テンプレート選択」画面が表示されます。
携帯端末では現在のテンプレートのモバイル バージョンを表示する。
→「はい。携帯端末でモバイル テンプレートを表示する。」を選択します。

モバイル テンプレートを選択では、「カスタム」を選択します。
最後に保存をクリックして完了です。

この設定を行うことで、変更したテンプレートの内容が反映されます。
モバイル テンプレートの選択で、「カスタム」以外を選択すると、
カスタマイズしたテンプレートの内容は無効になります。
スタイルやGoogle AdSenseを表示しようとしても無効になりますので、
注意が必要です。

また携帯端末は、スマートフォン用という意味です。
スマートフォン以外の端末では、データ量が多くて見られませんでした。
スマートフォン以外の端末でも見る方法は、現在検討中です。。（できるのかな？）

モバイルテンプレートの見分け方

モバイルで表示時に利用されるテンプレートは、
「mobile」から始まるIDやクラスで区別されています。
スタイルも.mobile-XXXXなどで区別されているので、
モバイルだけのスタイルを作成することが可能です。

モバイルの記事が開始されるタグを探すときは、
次のタグを目印にすると良いでしょう。

<b:includable id='mobile-post' var='post'>

このタグからがモバイルで表示される記事の開始タグです。
記事本文はPCテンプレートと同じで、<data:post.body/>です。
ソーシャルボタンやGoogle AdSenseを記事の上下に設置したい時は、
目安になります。

カスタマイズした箇所

デフォルトの状態で気になるのが、両サイドの余白でした。
イメージは"width"が指定されていれば、自動で縮小されるのですが、
レイアウトに収まっていませんでした。下図参照。
デフォルトテンプレートは、あと一歩ですね。
そもそも、スマートフォンというPCより狭い画面で余白って必要なのだろうか？

カスタマイズする際には、safariが便利ですかね？
「メニュー」→「開発」→「ユーザエージェント」と進むと、
iPhoneやiPadの設定で実行できます。
手軽に動作確認したい方は利用してみてください。

私はChromeでやりたいので、ChromeでCSSの解析を行っています。
モバイルページへは、次のURLでアクセスできます。

http://blog.asterlist.com/?m=1

お気付きですか？
URLの最後に「?m=1」と付けるだけでモバイルページが見れます。

あとはChromeの開発ツール(F12)で、CSSを探して編集するだけです。

この余白を調べると、
「.mobile .content-outer」で指定されている「padding」でした。
指定を0pxでも良かったのですが、紛らわしいので削除しました。

これで余白がなくなり、画面いっぱいに表示されるようになりました。
あとは、PCと同じように日時を編集して、タイムアップでした。
これらも少しずつカスタマイズしていきます。

最後に

モバイルテンプレートを編集している方をあまり見かけません。
モバイルテンプレートは、使われていないのでしょうか？

Bloggerでモバイル表示も綺麗だよ！
と言うブログをご存知でしたら、Twitterなどでご連絡頂けるとうれしいです。

最後までお読み頂きありがとうございます。