Movable Typeの最近のブログ記事

メインページ

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　がつかないので、指定した代替テンプレートが利用されません。

検索テンプレートは&とかが、&と実体参照されていないので、Validになりません。が、どうしてもValidにしたい場合の、あまり役立たないTipsのMT5版です。MT4の場合は、そちらをごらんください。

どうしても検索テンプレートでValidにしたい場合でのカスタマイズではMT5はValidになりません。

mtインストールフォルダ/lib/MT/Template/Tags/Pager.pmに手を加えます。

147行目以降

if ( $link ) {
    if ( index($link, '?') > 0 ) {
        $link .= '&';
    }
    else {
        $link .= '?';
    }
}
$link .= "limit=" . encode_url($limit);
$link .= "&page=" . encode_url($page) if $page;
$link .= "&Template=" . encode_url($template) if $template;

を

if ( $link ) {
    if ( index($link, '?') > 0 ) {
        $link .= '&';
    }
    else {
        $link .= '?';
    }
}
$link .= "limit=" . encode_url($limit);
$link .= "&page=" . encode_url($page) if $page;
$link .= "&Template=" . encode_url($template) if $template;

とします。

検索テンプレートは&とかが、&と実体参照されていないので、Validになりません。が、どうしてもValidにしたい場合の、あまり役立たないTipsです。

【2009-11-28 追記】

保存していたつもりが、途中で切れていました。

【2010-12-21 追記】

MT5の場合は、どうしても検索テンプレートでValidにしたい場合（MT5版）をごらんください

mtインストールフォルダ/lib/MT/Template/ContextHandlers.pmとmtインストールフォルダ/lib/MT/Template/Context/Search.pmを書き換えます。

LightBoxプラグインで自動化という記事で、「a要素にrel="lightbox"を毎回書くのは大変なので、自動化させたいが、ソースコードを書きかえるのは面倒だし、間違いのもとにもなりですし、かといって完全に自動化するのもどうか？」と書きましたが、LightBoxで画像のタイトルを表示させるには、画像へのアンカーにtitle属性がないといけません。LightBoxを使わないにしろ、title属性が有るに越したことはありません。

というわけで、禁断のソースコードに手を加えます(笑)必ずバックアップを取ってください。

mt/lib/MT/Asset/Image.pmに手を加えます。334行目あたりの

if ( $param->{thumb} ) {
    $text = sprintf(
        '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,
    );
}

を

if ( $param->{thumb} ) {
    $text = sprintf(
        '<a href="%s" title="%s"><img alt="%s" src="%s" %s %s /></a>',
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,
    );
}

と書きかえれば、画像へのアンカーにtitle属性が付加されます。一応アイテムの名前が、title="アイテムの名前"というふうに挿入されます。

参考までに、

MT::Util::encode_html( $asset->label ),

を

MT::Util::encode_html( $asset->description ),

とすれば、アイテムの概要が挿入されます。

関連エントリー

• LightBoxプラグインで自動化
• Lightbox2を導入