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

フッタ(cremaバージョン)
フッタ(cremaバージョン)

「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用とは別に、モバイル向けのフォルダーアーカイブを作成するには、次の記事をご覧下さい。

関連エントリー

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

<!-- ▼カテゴリアーカイブリストここから▼ -->
<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>
完成したサイト

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