お盆休みはずっとMovable Typeと格闘しております。
今までWordpressでしかブログ立ち上げてこなかったもんで、大分勝手が違うですね。。。
でも慣れてくると、かゆいとこまで手を伸ばしてカスタマイズできるような感じがしてきました。
さて、今回は、Movable Typeのブログをモバイル対応にしてみました。
そのやり方を備忘録として記録。
参考にしたのは以下のエントリーです。
http://kawa.at.webry.info/200912/article_4.html
まずモバイル対応を考えるにあたって、モバイルに対してHTMLを動かして、モバイル用アドレスを生成するのは避けたかった。
InstapaperやPocketでiPhoneから登録して、PCで開こうとした場合、PCでモバイル用の画面が開いてしまったりしますし、SEO的にもURLは統一されていた方がいいということなので。
http://m.〜とかなってるサイトで面倒くさいなあ、と思うのでそれはイヤ。はてなとかURL保存しておいて、あとでPCで開くと見事にモバイル用のデザインがPC画面いっぱいに間延びしててすげえ読みづらい。ああいうのはやはり避けたい。
ということで、以下の手順によりモバイル対応することに。といっても僕はAndroid端末を持っていないので、Androidでは確認できないため、まずはiPhoneに対応させます。
１：iPhone 用 JavaScript テンプレートを作成
Mobable Typeの管理画面にログイン。
まずiPhone用のjavascripファイルを作ります。
デザイン → インデックステンプレート → インデックステンプレートの作成
名前は適当にiPhone JavaScriptとかわかりやすい名前をつける。
本文には以下のコードを貼付ける。
[php](function(){
var ua = navigator.userAgent;
if(ua.match(" AppleWebKit/") && ua.match(" Mobile/")){
document.write(‘<meta name="viewport" content="width=520" />’);
}
})()[/php]
ファイル名は、「iphone.js」とし、テンプレートの種類はJavaScriptを選択。
そして保存。
↓
２：iPhone 用 CSS テンプレートを作成
次は、iPhone用のCSSを作成します。
デザイン → インデックステンプレート → インデックステンプレートの作成
名前は適当にiPhone CSSなどわかりやすい名前をつけておく。
本文には以下のコードを貼付けてください。
[php]body { width: 520px; -webkit-text-size-adjust: 150%; }
#header, #nav, 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; }
#nav { padding-bottom: 50px; }
#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; }[/php]
ソースとはちょこっと変えてます。そのままだとメニューバーが上手く表示されなかったので、#nav { padding-bottom: 50px; }を追加。下にマージン50px追加したのは、0だとブログ記事の本文が上手く表示されなかったので、スペースを設けてみたら上手くいったし、見た目にもギュウギュウ詰めな感じが緩和されて見やすくなったので。
この辺は、既存のCSSによっても多少カスタマイズの必要があります。とりあえずそのまま貼ってダメなら、ちょこちょこといじりながら調整してください。
テンプレートの種類は、スタイルシート（stylesheet）を選択、出力ファイル名は、iphone.cssとします。
↓
３：JavaScript・CSS をHTMLヘッダーに読み込む
全てのページでモバイル対応させるために、HTMLヘッダーに作成したiPhone用jsとCSSを読ませます。
デザイン → テンプレート → テンプレートモジュール → HTMLヘッダーを選択
[sourcecode language=”plain”]<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />[/sourcecode]
の下あたりに、以下のコードを挿入してください。
[php]<!–[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]–>[/php]
これで再構築をかけて終了です。
再構築した後、必ずiPhoneを開いて確認をしてみましょう。僕のブログはこうなりました。
上がPC版、下がiPhone版です。
このテンプレートでは、サイドバーはメインカラムの下に配置されます。
サイドバーを配置したくない場合は、修正が必要になります。CSSでウィジェットも読み込むように設定してありますから、そこを削除する形になりますかね。
僕はサイドバーはサイドバーでコンテンツだとも思うので、一応残してあります。ちょっと全体の見た目的には格好わるくなりますが、本文の読みやすさを損なってはいないと思います。
これでモバイルでもPCでもパーマリンクが変わらないので、ブックマークをモバイルでしてもPCでしてもアドレスを気にすることなく使うことができます。
やはりこの辺の煩わしさを少しでも解消してあげた方が読み手にとってはありがたいですから、ブログを訪れてくれた人に快適な環境を少しでも提供できるようにしましょう。
毎日コミュニケーションズ
売り上げランキング: 6045