Movable Typeのサイトを簡単にレスポンシブデザイン化する方法

  • 投稿日:
  • by
  • カテゴリ:

久しぶりにアクセス解析見てみたら、
なんとスマホでのアクセスが
半分を超えてるじゃないですか!

で、当サイトをスマホで見てみたら、
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扱い。

【その2】CSSファイル内で区別させる方法

一つのCSSファイルで済ます場合はこの方法になります。

@media screen and (min-width: 641px) {
/* ここにPC、タブレット用スタイルを記述 */
}
@media screen and (max-width: 640px) {
/* ここにスマホ用スタイルを記述 */

}

こんな感じで。

当サイトでは、そもそもPC用しかなかったので、
スマホ用に以下の記述を追記。

  • ヘッダーの画像がでかかったので、スマホでは非表示に
  • スマホではサイドバーを一番下に表示

だって、いろいろ変えるのめんどくさいんだもの。


まとめ

ポイントは2つ。

  1. headerタグ内に metaタグで viewport を設定する
  2. CSSファイル内で
    @media screen and (man-width: 640px) {}
    とかやって、スマホ対応のデザインを書き込む

あ、headerタグとスタイルシートは、
再構築を忘れずに!反映されないよ!

というふうにやってみて、
Google先生から見てどうですかね?ということを、
Mobile-Friendly Test
でURLを入れて調べてみよう。

当サイトはもちろんOKもらったぜ!

ということで、未来の私が忘れっぽくても、
これを読めば安心だ。よかったね!未来の私!