Blogger:モバイル表示を初めてカスタマイズする場合、モバイルテンプレートのプレビューを確認しながら作業すると便利

イントロダクション

Google のブログサービス「Blogger」では、PCで表示した場合と、モバイル端末で表示した場合とで、表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、今までずっとモバイルテンプレートとしてデフォルトを使ってきた場合には、いきなりカスタム設定にするのは危ないかもしれません。

なぜならば、モバイルテンプレートとしてデフォルト設定を使ってきた場合には、いままでブログの PC 表示に行ってきたカスタマイズがほとんど反映されていないからです。

そのため、モバイルテンプレートをデフォルト設定からカスタム設定に変更する場合には、モバイル表示にて意図せぬ表示（文字が大きすぎる、要素が重なってしまう等）が行われる可能性があります。


そこで、初めてモバイル表示をカスタム設定にする場合には、モバイルテンプレートのプレビューを表示させた状態で、修正作業を実施すると便利です。

Blogger:モバイル表示を初めてカスタマイズする場合、モバイルテンプレートのプレビューを確認しながら作業すると便利

Blogger では、モバイルテンプレートを変更する場合には、事前に変更後のテンプレートにてプレビューを実施することができます。

プレビューは、以下の手順で行えます。

(1) Blogger の設定のテンプレートにて、モバイルテンプレートをカスタマイズ（モバイルの下にある歯車アイコン）をクリック
(2) 表示された「モバイルテンプレートを選択」画面にて、「カスタム」モバイルテンプレートをコンボボックスから選択
(3) プレビューボタンを押す


すると、モバイルテンプレートとして、カスタムを選択したときの表示をプレビューすることができます。


ここで、「モバイルテンプレートを選択」画面の「保存」を押すと、カスタムのテンプレートが実際にモバイル表示に適用されてしまうため、「保存」は押さずに、「モバイルテンプレートを選択」画面を閉じます。


すると、モバイルテンプレートとしてカスタムを適用したプレビュー画面が、画面上に残ります。

この状態で、Blogger のガジェットのレイアウトの設定や、テンプレートの HTML の編集を実行します。

そして、画面上に残っている「モバイルテンプレートとしてカスタムを適用したプレビュー画面」を更新（リロード/再読み込み）すると、モバイルテンプレートとしてカスタムを適用した場合のモバイル表示への影響をすぐにチェックすることができます。

特に、モバイルテンプレートとしてデフォルトを選択している場合にはモバイル表示には反映されないものについて、事前にモバイル表示のプレビューを見ながら十分に修正を行うことができます。

まとめ

Bloggerにて、モバイル表示を初めてカスタマイズする場合には、モバイルテンプレートにカスタムを適用した結果のプレビューを確認しながら、モバイル表示として問題のある点を修正すると便利です。

このブログ内の、他の”Blogger モバイル”についての情報を見る

---

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで

Kindle版 楽天 7net