Blogger(blogspot)のブログを使い始めて、レスポンシブ対応デザインのテーマを採用すれば自動的にスマホでもPCと同じような表示になっていると思いこんでました。うっかり、そうなっていなかったので、初歩的なことではありますが、その時の解決法を備忘録として、以下にまとめておきます。
スマホでどのように見えているかの確認方法
自分のブログがスマホでどのように見えているか？は、
- スマホで実際に見てみる
- Blogger(blogspot)のURLの末尾に ?m=1 のクエリ(文字列)を付け加えてみる
- webブラウザのchromeで、右上のメニュー＞その他のツール＞デベロッパー ツール で見る
など、いくつか方法があります。
スマホでの表示例
レスポンシブ対応デザインで作った自分のブログがスマホでどのように見えているか、なんとなくチェックしたところ、以下のようなテキストベース（文字だけ）の味気ない見え方になっていました。
この昔の携帯電話時代の表示のような、このテキストベースのモバイル専用表示だと、最下部に以下のような「ウェブ バージョンを表示」という箇所をクリックすれば、パソコンと同じような画面をスマホでも表示させることはできます。
事実、
このページの下部にある、「ウェブバージョンを表示」をクリックして、ウェブバージョンに切り替えてください。
といった主旨の注意書きをブログの本文やトップに掲載して誘導しようとしている方も散見しますので、パソコン版と、スマホ版の表示の違いに苦しんでいる方も多いようです。
しかしスマホ閲覧者はなかなか最下部のそこまで見ないか、そんな面倒なことをいちいちしないか、見落とす確率が高いです。そこまで端の端まで見るような能動的なスマホユーザーは少ないからです。
そのため、閲覧者が手動で切り替えるのではなく、あらかじめ自動的にスマホでも「ウェブバージョン」が見れるようにしておく必要があります。
解決方法
解決方法としては、パソコン版とスマホ版のブログの見え方を（できるだけ）統一することです。
やり方は、
- Blogger(blogspot)のテーマ（デザイン）をレスポンシブ対応のものに変える
- その上で、ブログの管理画面＞テーマ＞右下のマークをクリック＞モバイルテーマの選択＞「いいえ。モバイルデバイスでもパソコン用のテーマを表示する。」を選択して保存
そうすれば、パソコン用とスマホ用の見え方が（ほぼ）統一されます。
上記の2の工程の画面
ブログの管理画面＞テーマ＞右下のマークをクリック＞モバイルテーマの選択＞「いいえ。モバイルデバイスでもパソコン用のテーマを表示する。」を選択して保存
自分は、Blogger(blogspot)のパソコン版とスマホ版でブログをどのように見せるか？は自分の選択制になっている点を見逃していました。（上記２の切り替え工程を見逃していました。）
レスポンシブ対応のテーマ
尚、Blogger(blogspot)ではレスポンシブ対応のテーマ（デザイン）はたくさんあります。
例えば、Blogger(blogspot)管理画面のテーマから選べるものには、
- Contempo
- Soho
- Emporio
- Notable
などがあります。
また、無料で配布されている日本語対応のものにも、
- ZELO
- Tokyo(by QooQ)
- QooQ
- Vaster2(←これは今は配布されいませんが復活を望みます。）
などがあります。
その他、有料版もあります。
まだWORDPRESSのほうが.htaccessでアクセスをコントロールできるなど利はありますが、無料ブログ、特にBlogger(blogspot)もかなりWORDPRESSに肉薄してきているように感じます。
