せんむの技術ブログ

メインページ

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に癖があるので覚書。

このサイトは複数ブログで構成されています。テンプレートの管理を楽にするため、検索結果を共通の代替テンプレートを指定しています。

複数ブログの運用で、代替の検索結果テンプレートを指定したとき、mt-config.cgiに環境変数　SearchAltTemplate altsearch altsearch.tmpl　を指定しますが、検索結果がページ分割されていると、クエリーパラメータに、Template=altsearch　がつかないので、指定した代替テンプレートが利用されません。

記事本文で和暦を使っているのに、全体では西暦表示だったのがいまいちでしたが、2つのサイトから解決策が。

jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。

外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。

サイドバーの最新記事リストについては、小粋空間さんで紹介されている、「Ajax によるモジュール化（jQuery版）」を利用していますが、maRkのMyOwnよりさんで「jQuery.ajaxでモジュール読み込み」というのが紹介されていました。

jQuery.loadではなく、jQuery.ajax()という関数を使うようです。

解説サイト

• テスト：jQuery.ajaxでモジュール読み込み « maRkのMyOwn