前回、テンプレートを少し書き換えましたので、それがモバイルではどう見えるかも確認してみます。
モバイル表示の設定３通り
Blogger では、モバイルでの表示には３通りの手段があります。
- Blogger が用意したモバイルテンプレートを使う (デフォルト or 数種類の中から選択)
- 現在のテンプレートを使い、モバイル版の表示をする (カスタム)
- 現在のテンプレートを使い、PC版の表示をする (モバイルバージョンを表示「いいえ」)
二つめは、現在のテンプレートをモバイル版の表示に使います。テンプレート内にはモバイル表示の時だけ適用される css があり、それによってモバイル版の表示をカスタマイズします。PC表示、モバイル表示のそれぞれに最適化できますが、テンプレートを編集する時はPC表示とモバイル表示の両方を気にする必要があります。
三つめは、現在のテンプレートをモバイル版にしないで表示するため、PCで見たときと同じ見た目、使い勝手になります。ブラウザの幅を変えるとその都度見やすいようにデザインが変わるテンプレートなどでは、モバイルの幅でも問題なく表示できるならこの設定を利用するのもいいと思います。デメリットとしては、どんな画面の大きさでも、マウス操作でもタッチ操作でも使いやすいように、と考えてデザインする手間でしょうか。
このブログでは、二つ目のテンプレートのモバイル表示でいきます。
モバイル表示の設定と確認方法
モバイルでの表示は、[テンプレート] 画面の右側にある歯車ボタンで設定します。
 |
| 歯車マークの場所 |
ブログを作った直後は [デフォルト] （Blogger が用意したテンプレートのどれか）になっていますが、これを [カスタム] に変えます。
 |
| カスタムに変える |
で、 [プレビュー] を押すと表示を確認することができます。見た目に問題がないかを確認してから [保存] を押します。プレビューでは実際に操作することができないので、操作性に問題がないかも確認します。
 |
| モバイル版プレビュー画面 |
モバイルで見るのが最適ですが、何かあった時はデバッグして確認することもあるので、まずは PC で URL をちょこっと変えて確認してみます。
https://madoug-kobo.blogspot.jp/?m=1 |
| PCでもモバイル表示できる！ |
PCのブラウザで見ているときも、このように アドレス の後に 「?m=1」 があるとモバイル表示になります。もっと厳密に、ブラウザ自身にもモバイルの動きをしてほしい場合もあるかと思いますが、それはまた別の機会に説明します。
モバイル端末でブログを見ているときは、自動的にこの URL に変わっています。
また、検索ページなどで既に 「?」 があるときは、その後に 「m=1&」 を追加します。
https://madoug-kobo.blogspot.jp/search?m=1&q=bloggerちなみに、m=0 にするとPC表示になります。これはモバイル版でフッターに出現する [PC版を表示] ボタンを押したときの URL で、モバイル端末であっても強制的に PC版が表示されます。
何もつけない URL での表示と比べて、フッターに 「モバイル版を表示」 ボタンが増えている点が異なります。
実際に確認してみると……
前回はラベルリストをメニューに使用しましたが、モバイルで表示するとメニューが消えてしまいました。
調べてみたら、 <b:widget> の mobile 属性がデフォルトの値（※ウィジェットの種類により、表示の有無が変わる。ラベルリストは非表示）だからのようです。前に勉強したのにうっかり忘れていました。
これを変えるには、
<b:widget id='Label1' locked='false' title='ラベル' type='Label' version='1' visible='true'><b:widget id='Label1' locked='false' mobile='yes' title='ラベル' type='Label' version='1' visible='true'>これでモバイル表示でもメニューが表示されるようになりました。
これでめでたしめでたし……とはいきません！
ページリストのモバイル版は <ul> 要素ではなく <select> 要素になります。画面のスペースが限られているスマホなどではありがたいですね。
これをラベルリストで再現していませんでした。次回はそれをどうにかしようと思います。
0 件のコメント :
コメントを投稿