Blogger:モバイル表示のデザインがカスタマイズできない？そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう！

イントロダクション

Google のブログサービス「Blogger」では、ブログのデザインをいろいろな方法でカスタマイズできます。

例えば、

• 任意のガジェットを追加して機能を追加すること
• デザインをCSSで変更すること
• Blogger のテンプレートを書き換えて究極的にカスタマイズする

などの方法があります。


その時に注意しなければならない点として、ブラウザで見た時とモバイル端末で見たときの見え方の違いです。


これは、Blogger ブログへの記事の投稿や設定変更などを、パソコンや比較的大きなタブレット端末などで行っていると見落としがちになる点です。

スマートフォンなどのモバイル端末でブログを見ると、それらとは異なり、モバイル端末用の表示が行われます。（デフォルトの設定の場合）

このモバイル用の表示は、画面の小さなモバイル端末でもブログが見やすくなるようになっています。

Blogger:モバイル表示のデザインがカスタマイズできない？そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう！

そのため、Bloggerブログのパソコン版の表示をいろいろとカスタマイズしたにも関わらず、モバイル版の表示は全く変わっていなかったということがあります。

ブログのカスタマイズを、モバイル版の表示にも適用するには、Blogger の設定を変更する必要があります。


Blogger の設定の「テンプレート」の「モバイル」の下にある歯車ボタンをクリックします。

Blogger : テンプレートの設定

すると、次のようなモバイルテンプレートの選択画面が表示されます。

Blogger : テンプレート > モバイル テンプレートを選択

携帯端末では現在のテンプレートのモバイル バージョンを表示する。
はい。携帯端末でモバイル テンプレートを表示する。
いいえ。携帯端末で PC テンプレートを表示する。

「はい。携帯端末でモバイル テンプレートを表示する。 」が選択されている場合、
モバイル端末に最適化されたページが表示される

もし、モバイル端末でもパソコン版と同じ表示を強制したい場合には、「携帯端末では現在のテンプレートのモバイル バージョンを表示する。」を「いいえ。携帯端末で PC テンプレートを表示する。」に設定します。

しかし、モバイル端末では様々な解像度の端末があり、解像度の低い端末を利用している人もいます。

また、モバイル端末では、ネットワーク回線が不安定・遅い環境もあります。

そして、自分自身が定額通信に慣れてしまうと忘れてしまいがちですが、通信したパケット料に応じて料金が発生する従量制で通信を行っている人もいるでしょう。

逆に、新しく登場した問題として、モバイル環境で大容量の通信を行っていると、一定以上のデータ量を通信すると、通信速度が制限されるという問題もあります。


以上のことから、私はパソコン版と同じ表示を、モバイル版には適用しない方が良いと考えています。モバイル版は軽さ重視（データ量軽減、処理の負荷軽減）が良いと考えています。


さて、前置きが長くなってしまいましたが、カスタマイズしたデザインをモバイル版にも適用するには、「モバイルテンプレートを選択」にて、「カスタム」を選択します。

この時、この変更を適用する前に必ず「プレビュー」を確認してください。
特に、パソコン版の表示をいろいろとカスタマイズした後だと、パソコン版では問題なく表示できていたものが、モバイル版だととんでもない表示（期待したとおりに表示されないなど）になっていることがあります。


プレビューは、

• QR コードをスマートフォンなどで読み込むことで、スマートフォンなどの端末でプレビューを確認する方法
• 「プレビュー」ボタンを押すことで、現在の環境（パソコン上など）でモバイル表示のプレビューを確認する方法

があります。

まとめ

Bloggerにて、モバイル表示のデザインがカスタマイズできないと思ったときには、モバイルテンプレートがカスタムになっているか確認しましょう。


ただし、モバイル表示はモバイル端末の本体の性能や回線状況に配慮したものとしましょう。

高い解像度を必要とするものや、大量のデータを読み込む必要があるもの、処理の重たい JavaScript などは、モバイル環境には適していないでしょう。
（ただし、一部の高性能スマートフォンでは、一般的なパソコンよりも高解像度のものも登場していたりするので、モバイル環境として一概には言えないところがあります。）

関連記事

Bloggerのモバイルページをパソコンから見る方法
http://upa-pc.blogspot.com/2014/12/blogger-view-mobile-page-from-pc.html
Dr.ウーパのコンピュータ備忘録

このブログ内の、他の”Blogger モバイル　テンプレート”についての情報を見る

---

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)