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については、

などに詳しい解説がありました。これは試行錯誤するしかないようですが、次のように設定しました。


<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名が全く異なっているため、スマートフォン用も一から作り直しましたが、これはこれで、テンプレートの見直しの機会にもなりました。

エントリーページ
エントリーページ
コメント部分
コメント部分
フッタ部分
フッタ部分