MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる: Kawanet Blog II

2009年12月26日

MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる

ようやく iPhone 3GS を買ったので、MT4 のブログを iPhone に対応させてみました。
HTML は共通で、PC ブラウザと iPhone の切り替えを、JavaScript・CSS のみで実現します。
Movable Type 4 のシステム自体は標準のままで、テンプレートを編集します。

iPhone 用 JavaScript テンプレート

デザイン→テンプレート→インデックステンプレート→インデックステンプレートを作成
名前：iPhone JavaScript

(function(){
  var ua = navigator.userAgent;
  if(ua.match(" AppleWebKit/") && ua.match(" Mobile/")){
    document.write('<meta name="viewport" content="width=520" />');
  }
})()

テンプレートの種類：JavaScript (javascript)
出力ファイル名：iphone.js
再構築オプション：OFF

AppleWebKit の Mobile 版（＝iPhone/iPod）を判別して、横幅を520ピクセルにします。
iPhone のデフォルトでは、ウェブページの画面横幅が 960ピクセルとして扱われます。
viewport の指定については、PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法を参照してください。

iPhone 用 CSS テンプレート

デザイン→テンプレート→インデックステンプレート→インデックステンプレートを作成
名前：iPhone CSS

body { width: 520px; -webkit-text-size-adjust: 150%; }
#header, #main-navigation, h1, h2 { -webkit-text-size-adjust: 100%; }
#header { background-image: none; }
#header-inner { padding-bottom: 0; }
#header-content { margin: 1em 0; padding: 0 1em; width: 100%; min-height: 1em; }
#header-inner, #main-navigation-inner, #content-inner, #footer-inner { width: 100%; padding-left: 0; padding-right: 0; }
#container-inner { width: 100%; }
#container #content-inner { background: none; }
#container #alpha { width: 100%; left: 0; display: block; float: none; }
#container #beta { width: 100%; left: 0; display: block; float: none; }
#container #gamma { width: 100%; left: 0; display: block; float: none; }
.asset-header, .asset-content, .asset-footer { margin: 1em 0; }
.widget-archive li.widget-list-item { display: inline; margin-right: 1em; }
#homepage-image { width: 100%; margin: 1em 0; }
#footer-content { margin: 1em 0; }

テンプレートの種類：スタイルシート (styles)
出力ファイル名：iphone.css
再構築オプション：OFF

要は body の横幅520ピクセルを指定した上で、各ブロックの横幅を100％としています。
2カラム(beta)、3カラム(gamma) 部分は、横に並べずに、ページ下部に表示させます。
ただし、左側にナビゲーションを持つテンプレートでは動作確認していません。
テンプレートによっては、いくつか書き換えたり、追記する必要があると思います。

「-webkit-text-size-adjust:」は Apple 拡張で、iPhone での文字の拡大率を指定します。
本文は150％に拡大表示して、ヘッダ部分は100％で見た目が崩れにくくしています。
もともと表示が大きいh1, h2についても、100％にして、大きすぎないようにしました。

JavaScript・CSS を読み込む

最後に、全ページで iphone.css および iphone.js を読み込むようにします。

デザイン→テンプレート→テンプレートモジュール→ヘッダー

<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />

の行の下に、

<script src="<$MTLink template="iphone.js"$>" type="text/javascript"></script>
<link media="only screen and (max-device-width: 480px)" href="<$MTLink template="iphone.css"$>" type="text/css" rel="stylesheet" />

を追記して下さい。（スタイルシートを上書きするので、後に書く必要があります）

以上で、CSS＋JS のみで、MT4 のサイトを iPhone 対応することができました。
無駄なナビゲーションをページ下部に追いやって、快適にブログが閲覧できるようになります。
HTML ファイルは１つなので、PC でも iPhone でも同じ URL（パーマリンク）になるので、
bit.ly などの短縮 URL サービス経由の誘導や、ソーシャルブックマークでも安心。

今回、ページの横幅を520ピクセルとしているのは、左右に余白をとった上で、Flickr の
Medium サイズの画像（横幅500ピクセル）を貼り込めるようにしたかったためです。
横幅など、利用サイトに合わせて調整してください。
また、MT3 のテンプレートでは、一部の要素の名前が違うので、少し追記が必要です。