MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる
ようやく iPhone 3GS を買ったので、MT4 のブログを iPhone に対応させてみました。
HTML は共通で、PC ブラウザと iPhone の切り替えを、JavaScript・CSS のみで実現します。
Movable Type 4 のシステム自体は標準のままで、テンプレートを編集します。
デザイン→テンプレート→インデックステンプレート→インデックステンプレートを作成
名前:iPhone JavaScript
テンプレートの種類:JavaScript (javascript)
出力ファイル名:iphone.js
再構築オプション:OFF
AppleWebKit の Mobile 版(=iPhone/iPod)を判別して、横幅を520ピクセルにします。
iPhone のデフォルトでは、ウェブページの画面横幅が 960ピクセルとして扱われます。
viewport の指定については、PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 を参照してください。
デザイン→テンプレート→インデックステンプレート→インデックステンプレートを作成
名前:iPhone CSS
テンプレートの種類:スタイルシート (styles)
出力ファイル名:iphone.css
再構築オプション:OFF
要は body の横幅520ピクセルを指定した上で、各ブロックの横幅を100%としています。
2カラム(beta)、3カラム(gamma) 部分は、横に並べずに、ページ下部に表示させます。
ただし、左側にナビゲーションを持つテンプレートでは動作確認していません。
テンプレートによっては、いくつか書き換えたり、追記する必要があると思います。
「-webkit-text-size-adjust:」は Apple 拡張で、iPhone での文字の拡大率を指定します。
本文は150%に拡大表示して、ヘッダ部分は100%で見た目が崩れにくくしています。
もともと表示が大きいh1, h2についても、100%にして、大きすぎないようにしました。
最後に、全ページで iphone.css および iphone.js を読み込むようにします。
デザイン→テンプレート→テンプレートモジュール→ヘッダー
以上で、CSS+JS のみで、MT4 のサイトを iPhone 対応することができました。
無駄なナビゲーションをページ下部に追いやって、快適にブログが閲覧できるようになります。
HTML ファイルは1つなので、PC でも iPhone でも同じ URL(パーマリンク)になるので、
bit.ly などの短縮 URL サービス経由の誘導や、ソーシャルブックマークでも安心。
今回、ページの横幅を520ピクセルとしているのは、左右に余白をとった上で、Flickr の
Medium サイズの画像(横幅500ピクセル)を貼り込めるようにしたかったためです。
横幅など、利用サイトに合わせて調整してください。
また、MT3 のテンプレートでは、一部の要素の名前が違うので、少し追記が必要です。
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 のテンプレートでは、一部の要素の名前が違うので、少し追記が必要です。
この記事へのコメント
現在私は、ココログプロを使用して「i☆Letter3」というブログを運営いたしております。たしかココログもMovableTypeなので、CSSのみでiPhoneに対応させる事は可能なのでしょうか。
色々と調べ回っているのですが、プログラムに関して無知なもので…失礼かとは思いますが質問させていただきました。
よろしくお願いいたします。