Kawanet Blog II

アクセスカウンタ

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

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

なるほど(納得、参考になった、ヘー) ブログ気持玉 13 / トラックバック 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 ファイルは1つなので、PC でも iPhone でも同じ URL(パーマリンク)になるので、
bit.ly などの短縮 URL サービス経由の誘導や、ソーシャルブックマークでも安心。

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

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(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

ニックネーム
本 文
MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる  Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる