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

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

で、当サイトをスマホで見てみたら、
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もらったぜ!

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

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

ガッツゴリラ

この最も大事な位置にガッツポーズをするゴリラが表示されていることに何の意味があるのだろうか?答え:何もありません。こんなところまでお読みいただきありがとうございました。

Macオンラインウエア情報検索

Loading
Macオンラインウエア情報検索についてはこちらを参照ください。 →「Macオンラインウエア情報検索」をアップデートしました2012

このブログ記事について

このページは、2015年2月 6日 07:45に書かれたブログ記事です。

ひとつ前のブログ記事は「iOSで撮ったスクリーンショットをMacで素早く使う4つの方法」です。

次のブログ記事は「(白目)の使い方がわからない(白目)(黒目)(白目)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

広告

アーカイブ