2011年5月アーカイブ

メインページ

CSS3で採用されたMedia Queriesを利用して、スマートフォン（iPhone・Android）とPCのスタイルシート（CSS）を振り分ける方法については、メリット、デメリットがありますが、デバイスのOSやUAが何であるかよりも、どのような解像度や画面の大きさでサイトを見るという観点に立てば、こちらのほうがメリットがあると思っています。

デメリットとしては、PC向けサイトをそのまま利用して、不必要なところを"display: none;で"非表示にしているだけなので、レンダリングされなくても、ソースそのものは変わらないので、スマートフォン向けにテンプレートをシンプルにしたものに比べればパケットが多くなることでしょうか。

前々回の記事では、iPhone(スマートフォン)対応テンプレート cssTouch for MT(Movable Type)のテンプレートを利用した方法を紹介しましたが、商業利用が有償であることや、もう少しプレーンなスタイルが欲しかったので、今回は、MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログで紹介されている記事ををベースに、カスタマイズしてみます。

スタイルシートの追加

スマートフォンは表示領域が小さく、pre要素とcode要素からはみ出した内容が表示されないままなので、次のスタイルを追加しました。

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

フッタ（cremaバージョン）

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

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

エントリー全件を出力させる場合、<MTEntries lastn="9999">などと、エントリーを通常想定されるはるか上限の9999をモデファイアで指定することが多いのですが、エレガントではないので、WingMemoさんの、「WingMemo: <MTEntries>で全件出力する方法　MT4版」というエントリーに書かれた方法を利用しています。

<mt:SetVarBlock name="ecount"><$mt:BlogEntryCount$></mt:SetVarBlock>
<mt:Entries lastn="$ecount">
内容
</mt:Entries>

あるいは、

<mt:BlogEntryCount setvar="entry_count">
<$mt:Entries lastn="$entry_count">
内容
</$mt:Entries>

としています。

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

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