久しぶりにアクセス解析見てみたら、
なんとスマホでのアクセスが
半分を超えてるじゃないですか！
で、当サイトをスマホで見てみたら、
PCの画面そのままじゃないですか！
字ちっさ！
WordPressだと、勝手にスマホ対応とか
してくれたりするんだけど、
MovableTypeはそんなことないのね。
で、レスポンシブ化ってどうやるの？
プラグインとかでできるでしょ。
と思って調べたところ、有料だったのでやめて、
以下のサイトの情報を元に、
手作業でレスポンシブ化してみることにした。
1 headerタグ内にviewportを設定する
headerタグに、以下のようなmetaタグを仕込む。
<meta name="viewport" content=";width=device-width,initial-scale=1" />
上のサイトとは変更してある。
「user-scalable=no」とか「maximum-scale=1」とかやると、
ピンチアウトでズームできなくなるから注意だ。
2 スタイルシート内で、スマホかどうか判別する
めんどくさいので、タブレットはPC扱い。
【その２】CSSファイル内で区別させる方法
一つのCSSファイルで済ます場合はこの方法になります。
@media screen and (min-width: 641px) {
/* ここにPC、タブレット用スタイルを記述 */
}
@media screen and (max-width: 640px) {
/* ここにスマホ用スタイルを記述 */}
こんな感じで。
当サイトでは、そもそもPC用しかなかったので、
スマホ用に以下の記述を追記。
- ヘッダーの画像がでかかったので、スマホでは非表示に
- スマホではサイドバーを一番下に表示
だって、いろいろ変えるのめんどくさいんだもの。
まとめ
ポイントは2つ。
- headerタグ内に metaタグで viewport を設定する
- CSSファイル内で
@media screen and (man-width: 640px) {}
とかやって、スマホ対応のデザインを書き込む
あ、headerタグとスタイルシートは、
再構築を忘れずに！反映されないよ！
というふうにやってみて、
Google先生から見てどうですかね？ということを、
Mobile-Friendly Test
でURLを入れて調べてみよう。
当サイトはもちろんOKもらったぜ！
ということで、未来の私が忘れっぽくても、
これを読めば安心だ。よかったね！未来の私！