Kawanet Tech Blog

アクセスカウンタ

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

<<   作成日時 ： 2009/12/26 17:34   >>

なるほど（納得、参考になった、ヘー） ブログ気持玉 10 / トラックバック 2 / コメント 1

ようやく 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" />
の行の下に、
<!--[if !IE]>-->
<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" />
<!--<![endif]-->
を追記して下さい。（スタイルシートを上書きするので、後に書く必要があります）

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

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

テーマ

関連テーマ 一覧
<< 前記事(2009/12/25) ブログのトップへ 後記事(2009/12/26) >>

月別リンク

ブログ気持玉

クリックして気持ちを伝えよう！
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 ： 10
なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー）
かわいい かわいい
驚いた
面白い
ナイス
ガッツ（がんばれ！）

トラックバック（2件）

タイトル （本文） ブログ名／日時
MT5のテンプレート編集画面を軽快にする方法
Movable Type 5（以下MT5）では、テンプレート編集画面でCodeMirrorというオープンソースのコードエディタを採用しているのですが、いかんせんMT5は最先端すぎるのか、画面を開くのに時間がかかるし、編集中も重い。かといって設定で無効にできないので、強制的に無効にしてみましょう。... ...続きを見る
えぬぱすどっとねっと（双方向ブログ）
2010/01/29 19:23
MT4のブログをiPhoneに対応させてみた。JSとCSS追加だけで超簡単！！
そもそもほとんど放置状態で、思い出したときにしか更新しないこのブログなんですが。... ...続きを見る
CODE-R
2010/10/31 11:11

トラックバック用URL help


自分のブログにトラックバック記事作成（会員用） help

タイトル
本　文

コメント（1件）

内 容 ニックネーム／日時
はじめまして。

現在私は、ココログプロを使用して「<a href="http://izuru136.cocolog-nifty.com/iletter3/">i☆Letter3</a>」というブログを運営いたしております。たしかココログもMovableTypeなので、CSSのみでiPhoneに対応させる事は可能なのでしょうか。

色々と調べ回っているのですが、プログラムに関して無知なもので…失礼かとは思いますが質問させていただきました。

よろしくお願いいたします。
 satsuki
2010/01/09 02:05

コメントする help

ニックネーム
本　文
<< 前記事(2009/12/25) ブログのトップへ 後記事(2009/12/26) >>
MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる  Kawanet Tech Blog/BIGLOBEウェブリブログ
[ ]