Movable Typeをスマートフォンに対応させるには、CSS3で採用されたMedia Queriesと、Viewportでデバイスを振り分けるアプローチもあります。

Media Queriesについては、デバイスの解像度で、480pxを境に、スマートフォン（iPhone・Android）と、PCを振り分けています。

<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,tv,screen and (min-device-width: 481px)" />
<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles_sp.css" type="text/css" media="only screen and (max-device-width: 480px)" />

ただし、Internet Explorer8 以下は対応していないので、IEハックか、jQueryなどを使う以下の方法で対処する必要があります。

関連リンク

• jQuery Media Queries Plugin
• CSS Tricks - using jQuery to detect browser size

IEハックの場合は、

<!--[if IE]><link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,screen /><![endif]-->
<![if !IE]><link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles.css" type="text/css" media="print,tv,screen and (min-device-width: 481px)" /><![endif]>
<link rel="stylesheet" href="http://www.shikidahironori.jp/music/styles_sp.css" type="text/css" media="only screen and (max-device-width: 480px)" />

Viewport

Viewportについては、

• Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）
• スマートフォン用（iPhone・Android）SerendipWebページデザイン、viewport の指定
• Viewport [iPhone生活]

などに詳しい解説がありました。これは試行錯誤するしかないようですが、次のように設定しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

配布されているテンプレート

これらを使ったテンプレートも配布されていて、Movable Typeオリジナルのテンプレートの場合は、スマートフォン用のCSSと、これを読み込む記述を既存のテンプレートに加えれば、すぐにスマートフォン用のサイトが完成します。

ダウンロードと解説

• MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログ
• iPhone(スマートフォン)対応テンプレート cssTouch for MT(Movable Type)

まとめ

このページは、「MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログ」の記事をベースにスマートフォン対応させてみましたが、メインとなるブログは、一から起こしたものなので、構造やclass名が全く異なっているため、スマートフォン用も一から作り直しましたが、これはこれで、テンプレートの見直しの機会にもなりました。

エントリーページ

コメント部分

フッタ部分

「iPhoneテンプレートfor MT」でスマートフォン対応にという記事の続きです。

カスタマイズというほどではありませんが、カテゴリリストを追加して見ました。

カテゴリリストを追加するには、<!-- ▲最新のブログ記事20件ここまで▲ -->と<!-- ▲トップページここまで▲ -->の間に、次のコードを挿入します。

<li class="group">アーカイブとプロフィール</li>
<li><a href="#monthlyArchives">過去6ヶ月の記事</a></li>
<li><a href="#categoryArchives">カテゴリ</a></li>
<li><a href="http://<$mt:BlogHost$>/profile/smartphone.html" target="_self">プロフィール</a></li>
</ul>

ここでは、フォルダーアーカイブで出力して、PC用とは別に用意したiPhone用のプロフィールページへのリンクも加えてあります。

PC用とは別に、モバイル向けのフォルダーアーカイブを作成するには、次の記事をご覧下さい。

関連エントリー

• MTWriteToFileプラグインでフォルダアーカイブ

<!-- ▲月別アーカイブ個別記事ここまで▲ -->の後ろに次のコードを追加しました。、

<!-- ▼カテゴリアーカイブリストここから▼ -->
<ul id="categoryArchives">
<li class="group">カテゴリ一覧</li>
<mt:Categories>
<mt:if tag="categoryCount">
<li><a href="#m<$mt:CategoryBasename$>"><$mt:CategoryLabel$></a>（<$mt:CategoryCount$>）</li>
<mt:else>
<li><$mt:CategoryLabel$></li>
</mt:if>
</mt:Categories>
</ul>
<!-- ▲カテゴリアーカイブリストここまで▲ -->
　
<!-- ▼カテゴリアーカイブ個別記事ここから▼ -->
<mt:ArchiveList archive_type="Category">
<ul id="m<$mt:CategoryBasename$>">
<li class="group">カテゴリが<$mt:CategoryLabel$>の記事一覧</li>
<mt:BlogEntryCount setvar="entry_count">
<$mt:Entries lastn="$entry_count">
<li><a href="<$mt:BlogArchiveURL$>i/<mt:ParentCategories glue="/"><$mt:CategoryBasename$></mt:ParentCategories>/<$mt:EntryBasename$>.html" target="_self"><$mt:EntryTitle$><br />
<span class="asset-meta"><$mt:EntryDate format="%Y%m%d年%b月%e日" japanese_year="1"$></a></span></li>
</mt:Entries>
</ul>
</mt:ArchiveList>
<!-- ▲カテゴリアーカイブ個別記事ここまで▲ -->

.htaccessによるページの自動振り分け

あとは、.htaccessでiPod、iPhone、 Androidでアクセスしたときに、スマートフォン用のアドレスへ飛ぶようにしました。

RewriteEngine On
# iPod
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^$ /i/ [R]
# iPhone
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /i/ [R]
# Android
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^$ /i/ [R]

ヘッダーナビゲーション

このページにはありませんが、メインのブログには、ヘッダーナビゲーションをつけてあります。

toolbarというclassのdiv要素の中に入れてやればいいだけです。

<div class="toolbar">
<h1 id="pageTitle"><mt:SetVar name="replace_chr" value="/富山市議会議員 /">
<$mt:BlogName encode_html="1" regex_replace="$replace_chr",""$></h1>
<a id="backButton" class="button" href="#"></a>
<ul id="header_navi">
<li><a href="http://<$mt:BlogHost$>/gikai/i/" target="_self">議会</a></li>
<li><a href="http://<$mt:BlogHost$>/report/i/" target="_self">活動</a></li>
<li><a href="http://<$mt:BlogHost$>/blog/i/" target="_self">ブログ</a></li>
<li><a href="<$mt:BlogURL$>index.html" target="_self">PC版</a></li>
</ul>
</div>

完成したサイト

• せんむの技術ブログ（スマートフォン対応ページ）
• しきだ博紀 website（スマートフォン対応ページをカスタマイズ済）

次は、別のアプローチによるスマートフォン対応を紹介します。

自分自身がスマートフォンに戻したこともあって、このサイトも、crema designさんの「iPhoneテンプレートfor MT」でスマートフォン対応にしてみました。

ポイントは、iUIという、iPhone向けサイトのUIを提供するライブラリを使うことなんですが、若干、iUIに癖があるので覚書。

テンプレートは、トップページ生成用と個別ブログ記事生成用の2種類あります。

まずは、トップページ生成用テンプレートの基本構造です。

<body>
　
<!-- ここにh1要素など（省略） -->
<div class="toolbar">
<h1 id="pageTitle">ブログの名前</h1>
</div>
　
<!-- ここから常に表示される部分（a）： selected="true"が必要 -->
<ul id="home" selected="true">
<!-- 以下はリストで、class="group" が指定されると、リストのヘッダ的な表示になる-->
<li class="group">最新のブログ記事20件</li>
<!-- 個別記事には、target="_selfを指定" -->
<li><a href="個別記事へのリンク" target="_self">個別記事のタイトル</a></li>
<!-- ここまでがリスト部分 -->
　
<!-- ここからがリスト以外に表示する部分（b） -->
<li class="group">月別アーカイブ</li>
<!-- アンカーにmonthlyArchivesというIDを指定していることに注目 -->
<li><a href="#monthlyArchives">月別アーカイブリスト</a></li>
</ul>
<!-- ここまでが常に表示される部分 -->
　
<!-- ここからが非表示になっている部分（例えば月別アーカイブリストなど） -->
<!-- ul要素にmonthlyArchivesというIDを振っていることに注目 -->
<ul id="monthlyArchives">
<!-- アンカーに、MTArchiveDateタグでIDを指定していることに注目 -->
<li><a href="#m<$MTArchiveDate format="%j"$>">アーカイブタイトルが入る</a></li>
</ul>
<!-- ここまで月別アーカイブリスト -->
　
<!-- ここから月別アーカイブ個別記事 -->
<!-- ul要素にMTArchiveDateタグでIDを振っていることに注目 -->
<ul id="m<$MTArchiveDate format="%j"$>">
<!-- 個別記事には、target="_selfを指定" -->
<li><a href="個別記事へのリンク" target="_self">記事のタイトル</a></li>
</ul>
<!-- ここまでが月別アーカイブ個別記事 -->
　
</body>

要するに、1枚のページの中に、最初に表示されている部分（selected="true"が指定されたul要素）と、cssによって非表示にされている部分があって、アンカーをクリックすると、scriptによって、今まで非表示になっていた部分が表示される仕組みです。

また、個別記事のページなど、最初のページ以外にリンクする場合は、アンカーに、target="_self"を付けてやることも必要です。

完成したサイトは

• せんむの技術ブログ（スマートフォン対応ページ）
• しきだ博紀 website（スマートフォン対応ページでカスタマイズ済）

カスタマイズについては、次回の記事で。