「iPhoneテンプレートfor MT」でスマートフォン対応に

メインページ(cremaバージョン)
メインページ(cremaバージョン)

エントリーページ(cremaバージョン)
エントリーページ(cremaバージョン)

自分自身がスマートフォンに戻したこともあって、このサイトも、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"を付けてやることも必要です。

完成したサイトは

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