CSSでMovable Typeをスマートフォンに対応させる
Movable Typeをスマートフォンに対応させるには、CSS3で採用されたMedia Queriesと、Viewportでデバイスを振り分けるアプローチもあります。
Media Queries
Media Queriesについては、デバイスの解像度で、480pxを境に、スマートフォン(iPhone・Android)と、PCを振り分けています。
<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,tv,screen and (min-device-width: 481px)" />
<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles_sp.css" type="text/css" media="only screen and (max-device-width: 480px)" />
ただし、Internet Explorer8 以下は対応していないので、IEハックか、jQueryなどを使う以下の方法で対処する必要があります。
IEハックの場合は、
<!--[if IE]><link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,screen /><![endif]-->
<![if !IE]><link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,tv,screen and (min-device-width: 481px)" /><![endif]>
<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles_sp.css" type="text/css" media="only screen and (max-device-width: 480px)" />
Viewport
Viewportについては、
- Android対応スマートフォンサイトのレイアウト(viewport・コンテナ編)
- スマートフォン用(iPhone・Android)SerendipWebページデザイン、viewport の指定
- Viewport [iPhone生活]
などに詳しい解説がありました。これは試行錯誤するしかないようですが、次のように設定しました。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
配布されているテンプレート
これらを使ったテンプレートも配布されていて、Movable Typeオリジナルのテンプレートの場合は、スマートフォン用のCSSと、これを読み込む記述を既存のテンプレートに加えれば、すぐにスマートフォン用のサイトが完成します。
まとめ
このページは、「MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログ」の記事をベースにスマートフォン対応させてみましたが、メインとなるブログは、一から起こしたものなので、構造やclass名が全く異なっているため、スマートフォン用も一から作り直しましたが、これはこれで、テンプレートの見直しの機会にもなりました。
コメント