ベーステンプレートを変更しました。Ardor(@ArdorOnline)です。
この際だからモバイルテンプレートもカスタマイズしちゃいました！
今回は、モバイルテンプレートのカスタマイズについてご紹介します。
ベースに利用していた「Awesome Inc.」系テンプレートですが、
IEのみ表示がおかしくなっていました。
デフォルトで用意されているテンプレートにしては残念な結果だったので、
ベースに利用するテンプレートを変更しました。
またベースを変更すると共に、モバイルテンプレートもカスタマイズしました。
概要は、次の通りです。
- モバイルテンプレートを有効にする
- モバイルテンプレートの見分け方
- カスタマイズした箇所
今回ベースに利用したテンプレートは「シンプル」系です。
理由としては、Chrome、Safari、Firefox、IEでも正しく表示され、
カスタマイズが容易だったので採用しました。
まずはベースがしっかりしてないと作業が増えてしまいますよね。。
テンプレートを変更する際には、必ずバックアップをとっておいてください。
バックアップ方法は、以前の記事を参考にしてください。
記事：Bloggerのテンプレートをバックアップする方法
モバイルテンプレートを有効にする
モバイルテンプレートをカスタマイズするには、設定が必要です。
設定方法は、次の通りです。
「テンプレート」画面を開き、モバイルテンプレートをクリックします。
「モバイル テンプレート選択」画面が表示されます。
携帯端末では現在のテンプレートのモバイル バージョンを表示する。
→「はい。携帯端末でモバイル テンプレートを表示する。」を選択します。
モバイル テンプレートを選択では、「カスタム」を選択します。
最後に保存をクリックして完了です。
この設定を行うことで、変更したテンプレートの内容が反映されます。
モバイル テンプレートの選択で、「カスタム」以外を選択すると、
カスタマイズしたテンプレートの内容は無効になります。
スタイルやGoogle AdSenseを表示しようとしても無効になりますので、
注意が必要です。
また携帯端末は、スマートフォン用という意味です。
スマートフォン以外の端末では、データ量が多くて見られませんでした。
スマートフォン以外の端末でも見る方法は、現在検討中です。。（できるのかな？）
モバイルテンプレートの見分け方
モバイルで表示時に利用されるテンプレートは、
「mobile」から始まるIDやクラスで区別されています。
スタイルも.mobile-XXXXなどで区別されているので、
モバイルだけのスタイルを作成することが可能です。
モバイルの記事が開始されるタグを探すときは、
次のタグを目印にすると良いでしょう。
このタグからがモバイルで表示される記事の開始タグです。
記事本文は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などでご連絡頂けるとうれしいです。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿