モバイルで見やすいように、表示の幅や、
拡大縮小の可否について指定しました。
モバイルで見やすいようにカスタムviewport
まずは
main-wrapper
です。
.mobile #main-wrapper{width: 100%}
が既にテンプレートにあれば、そのままでいいです。
いくつかのテンプレートでは
もともとあるようです。
意味は私もよくわかっていないのですが、
なんとなく意味をイメージしてみますと、
モバイル内コンテンツは
main-wrapperの幅の範囲、width: 100%
以内でおさまるようになります。
みたいなものでしょうか。
違ったらごめんなさい。
では続きまして。
viewport について。
<head>
のすぐ下に、
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
と記入します。
<meta content='width=1100' name='viewport'/>は
デフォルトで挿入されていたと思います。
これに少しプラスする感じです。
このコードの意味は、モバイル表示の時に
・幅はそれぞれのデバイスの幅に合わせる
・標準で等倍（1倍）にする
・最小で等倍にする
・最大で等倍にする
そして、
PCでは、
幅1100までですよ、
という意味です。
なんとなく書いてあることが、コードの中にあるのが
わかってきますね。
レスポンシブデザインかどうかで決める
モバイルの等倍については、
拡大や縮小が出来ないようにしています。
理由は、
Bloggerはモバイル表示に対応しているからですね。
拡大や縮小をする必要がないからです。
誤作動を防ぐ為にも、
あえて拡大や縮小をしないようにしました。
もし、PC表示のサイトをスマホで見るのであれば、
拡大、縮小出来た方が便利です。
自由にユーザーが変えられるようにしたいですね。
なので、PCでは、等倍の指定をしていないのです。
実際に、
画面の大きなタブレットからだと、
スマホ表示よりもPC表示の方が見やすいと思います。
ということで、
これでモバイルでも見やすくなりました。
いつも思いますが、
スマホからのアクセスは増えてきています。
今後は、PCを超える日が来るかもしれませんね。
さすがに超えはしないでしょうか？
とにかくモバイルからのアクセスは多いので、
しっかりメンテナンスしましょう。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク