「iPhoneテンプレートfor MT」でスマートフォン対応に
自分自身がスマートフォンに戻したこともあって、このサイトも、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"を付けてやることも必要です。
カスタマイズについては、次回の記事で。
コメント