小粋空間  -  a cheap joke and a play on words site

意外に知られていない技で、Movable Type のインデックステンプレートにはパスを設定することができます。

アーカイブファイルは管理画面の「設定」→（3.3では詳細モードに切り替え）「公開」→「アーカイブマッピング」でパスが表示されているので、直感的にパスを設定することがイメージできますが、インデックステンプレートは「出力ファイル名」欄にファイル名しか記述されていないことと、そもそも「出力ファイル名」と書かれているので、パスの設定ができないように感じてしまいます。

以下、パスの設定方法です。

テンプレート編集ページで「メインページ」のデフォルト状態は左のようになっています。

メインページを hogehoge というディレクトリの下に作成したい場合は、左のように「出力ファイル名」欄の index.html の前に「hogehoge/」を追加します。記述したディレクトリは自動的に作成されます。 例は「相対パス」で記述していますが、「絶対パス」で記述することも可能です。

ひとつ上のディレクトリに出力する場合は、「../」をファイル名の前に付与します。

エントリーリストの新着エントリーに「New!!」というテキストや画像を表示するカスタマイズです（スクリーンショットは完成イメージ）。

「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像をエントリーリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はエントリーの投稿時間を span タグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。

１．テンプレートの修正

テンプレートに下記の青色部分を追加します。例は公開テンプレートです。

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="new"><%recent_year>:<%recent_month>:<%recent_day>:<%recent_hour>:<%recent_minute>:<%recent_second></span></li>
<!--/recent-->
</ul>
</div>
 
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です（例は24時間）。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

３．CSS設定

スタイルシートに下記の設定を追加します。最初の display プロパティで１項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。下の二つはお好みに合わせて適宜修正してください。

span.new {
    display: none;
    color: #e50003;
    font-weight: bold;
}

Feedbunner のサービスのひとつである「フィード・カウント」は、FeedBurnerで測定された最新の購読者数をサイト上で画像を使って表示するものです。

英語版 Feedbunner は

ですが、日本語版は

となっているので、ついイメージしてしまいます。↓

<link rel="alternate" type="application/atom+xml" title="Atom1" href="http://feeds.feedburner.jp/koikikukan1" />
<link rel="alternate" type="application/atom+xml" title="Atom2" href="http://feeds.feedburner.jp/koikikukan2" />
<link rel="alternate" type="application/atom+xml" title="Atom3" href="http://feeds.feedburner.jp/koikikukan3" />
　　　　　　　　　　　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　　　　　　　　　（中略）
　　　　　　　　　　　　　　　　　　　　　　　　：
<link rel="alternate" type="application/atom+xml" title="Atom334" href="http://feeds.feedburner.jp/koikikukan334" />

ブロガーによる体験型クチコミプロモーションサービス「B-Promotion」に登録してみました。

B-Promotion はブロガーによる消費者のためのプロモーションサービスです。
具体的には、B-Promotion へ登録（無料）すると、新たにリリースされる商品やサービスの最新情報を B-Promotion から受け取ることができます。登録ブロガーはそれらのレビュー記事をブログで紹介します。そしてレビュー記事掲載費や紹介料として B-Promotion から数百円?数千円が支払われる、という仕組みになっています。

また、冒頭に配したエンブレムの星マークからお分かりの通り、B-Promotion には「メンバーランク」というものがあり、アクセス数、記事数、プロモーション参加回数等を審査基準として、随時ランクアップしていきます。今後は一定ランク以上のメンバーだけが参加できる、高額商品・限定サービスといったプロモーションも登場するようで、ランクを上げることでそれらに参加できる機会が拡大すると同時に、有益な情報を提供するブロガーとしてのアピールにも役立つかもしれません。

サービス自体はベータ版で、登録したメールアドレスに先程、（多分）最初のプロモーションが届きました。ネット上のクチコミを利用した新たな「広告モデル」と言えるでしょう。

それよりも、個人的には単にネタ切れ解消の一策として利用させて頂こうと思っているのですが（笑）、プロモーション自体も審査（抽選？）があるようで、まずはそこを通過するところからです。

公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。

１．概要

参考までに、上記タイトルバナーの縦幅は、スタイルシートの

/* タイトルバナー */
#banner {
    padding: 15px;
　　　　　：

の赤色部分を

/* タイトルバナー */
#banner {
    padding: 27px 15px;
　　　　　：

に変更しています。デフォルトより縦幅の広い画像を表示する場合等はこの部分を変更してください。画像の設定方法は「CSSでタイトルバナーに画像を表示する」を参照ください。

２．補正方法

サイドバーの垂直方向の開始位置を補正するには、スタイルシートの下記の赤色部分を修正（値を大きくする）してください。なお利用しているレイアウトによって変更箇所が異なりますのでご注意ください。

3カラムの場合

　　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

2カラム（左サイドバー）の場合

　　　　　　　：
/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
　　　　　　　：

2カラム（右サイドバー）の場合

　　　　　　　：
/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

　　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 119px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 119px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

Movable Type 3.31 にアップグレードして、再構築した時に下記のエラーが発生するケースがあります。

テンプレート「メインページ」に解析エラーが発生しました:
 <MTTagName>タグが閉じられていません。

１．原因

エラーが発生する原因は、インストールしている MTTagInvoke プラグインの影響で、プラグインが定義しているMTタグ「MTTagName」が、3.3 で機能追加されたエントリー・タグ機能で使われる MTタグ「MTTagName」とバッティングしており、予期しない動作になってしまうためです。

2006.09.13 追記：3.3 に対応した MTTagInvoke プラグイン1.0 が公開されています。

エラー内容より、原因をもう少し分析すると、機能追加された MTTagName は変数タグ（つまり <$MTTagName$>）ですが、MTTagInvoke が提供している MTTagName はコンテナタグ（<MTTagName>～</MTTagName>）です。おそらく、最初に出現した（機能追加された方の） MTTagName を MTTagInvoke プラグインでハンドリングしてしまい、その結果「終了タグ </MTTagName> が見つからない」となってしまうようです。

最初にこの問題を知ったのは下記のテンプレートご利用サイト様です。ありがとうございました。

Project MultiBurst：検索画面で「閉じられていません」というエラー回避(MT3.3)

２．対処方法１（推奨）

MTTagInvoke.pl を任意のエディタで開き、25行目辺りにある下記の赤色部分 *1

MT::Template::Context->add_tag(TagInvokeVersion => sub { $VERSION } );
MT::Template::Context->add_container_tag(TagInvoke => \&MTTagInvoke );
MT::Template::Context->add_container_tag(TagContent => \&MTTagContent );
MT::Template::Context->add_container_tag(TagName => \&MTTagName );
MT::Template::Context->add_container_tag(TagAttribute => \&MTTagAttribute );

を、他のMTタグと重複しない名称、ここでは「TagInvokeName」として

MT::Template::Context->add_tag(TagInvokeVersion => sub { $VERSION } );
MT::Template::Context->add_container_tag(TagInvoke => \&MTTagInvoke );
MT::Template::Context->add_container_tag(TagContent => \&MTTagContent );
MT::Template::Context->add_container_tag(TagInvokeName => \&MTTagName );
MT::Template::Context->add_container_tag(TagAttribute => \&MTTagAttribute );

のように修正します。

修正した部分はコンテナタグの <MTTagName> に該当しますので、このタグをテンプレート上で利用している場合は、<MTTagInvokeName>～</MTTagInvokeName> に変更します。Movable Type がデフォルト機能として提供している変数タグ <$MTTagName$> を変更する、という意味でありませんのでご注意ください。

３．対処方法２

検索すると、いくつかのサイト様で下記に示す方法が公開されているのですが、プログラム的に修正内容に不足があるため、この場でお知らせに代えさせて頂きます（このエントリーを書き始めてからそのことに気がつきました）。

下記の赤色2ヶ所、

MT::Template::Context->add_container_tag(TagName => \&MTTagName );

を

MT::Template::Context->add_container_tag(TagInvokeName => \&MTTagInvokeName );

に修正した場合、後方の \&MTTagName（または \&MTTagInvokeName）が Perl の「関数リファレンス」に該当します（つまり、タグとタグに対応するプログラムを対応させています）ので、この部分を修正した場合は、60行目辺りにある、

sub MTTagName {
    my ($ctx, undef, $cond) = @_;
    my $ti = tag_invoke($ctx) or return;
    defined($ti->{name} = $ctx->stash('builder')->build($ctx, $ctx->stash('tokens'), $cond))
        or return;
    return '';
}

の赤色部分も修正する必要があります。上記の修正例であれば

sub MTTagInvokeName {
    my ($ctx, undef, $cond) = @_;
    my $ti = tag_invoke($ctx) or return;
    defined($ti->{name} = $ctx->stash('builder')->build($ctx, $ctx->stash('tokens'), $cond))
        or return;
    return '';
}

とします。

実際には60行目辺りを修正しなくても、名称を変更した MTTagInvokeName をテンプレート上で利用していなければ問題は発生しません。したがってそのままでも大丈夫です。

ただし、MTTagInvokeName を利用して再構築を実施した場合は、

Undefined subroutine &MT::plugins::MTTagInvoke::MTTagInvokeName called at lib/MT/Builder.pm line 165.

というエラーが発生しますので注意が必要です。

ということで、２項の「対処方法１」を推奨します。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

ASCII 文字のみのトラックバックをフィルタリングする Movable Type プラグインを作りました。

１．プラグインの概要

Mobavle Type では 3.2 以降、Junk Filter を利用して、スパムとみなされたトラックバックは Junk フォルダに入るようになっています。また誤ってフィルタリングしたトラックバックを探索・公開できるよう、指定した一定期間、保存できる仕組みになっています。

その流れに逆行して、このプラグインはASCII文字のみのトラックバックを受信した場合、Junk フォルダにも入れず、送信元に 403 を返却します。

本プラグインは下記の CommentFilter コールバックのプラグインのアイデアを元に、TBPingThrottleFilter コールバック に移植させて頂いたものです。

blog.bulknews.net：MTBanASCII: コメントSPAM対策を MT3 に移植

上記のプラグインは 3.2 対応の Junk Filter を利用したものも配布されていますので、トラックバックスパムと判断されたものを Junk フォルダに入れる場合は、下記のプラグインをご利用になることをお勧めします。

blog.bulknews.net：MT BanASCII 3.2 対応

Junk Filter API では Junk フォルダに入れない方法が存在しないと思い込んで TBPingThrottleFilter コールバックを利用しましたが、勘違いでしたらご指摘ください。

２．プラグインを作った理由

概ね下記のような理由です。

1. 毎日大量のトラックバックスパムが Junk フォルダに入るが、その中に公開すべきトラックバックが時々紛れており、見つけるのに結構手間がかかる
2. サーバの負荷をできるだけ軽減したい

1.の補足として、頻繁に迷惑トラックバックリストをチェックする訳ではないので、削除日数をやや長めにしており、それが逆にトラックバックスパムを山積みにする原因を引き起こしています。

現在1週間ほど使用していますが、Junk フォルダに入る ASCII 文字のみの迷惑トラックバックは0件。またスパムと誤認識された日本語を含むトラックバックだけが Junk フォルダに入っており、作業効率が格段に向上しました。

３．動作条件

Perl 5.8 以上であることが必要です（Encode.pm を利用するため）。誤って 5.6.x の環境で利用しても処理異常にならないようにしています。

４．ダウンロード・インストール

下記リンクより asciiTBPingfilter.zip または asciiTBPingfilter.lzh をダウンロードし、アーカイブを解凍してください。

asciiTBPingfilter.zip（MT4.x用）
asciiTBPingfilter.lzh（MT4.x用）

asciiTBPingfilter.zip（MT3.x用）
asciiTBPingfilter.lzh（MT3.x用）

解凍すると中に asciiTBPingfilter フォルダがありますので、フォルダごと Movable Type の plugins ディレクトリにアップロードしてください（下記は MT3.x 版の例）。

MTディレクトリ/plugins/asciiTBPingfilter/asciiTBPingfilter.pl

MTディレクトリ/plugins/asciiTBPingfilter/tmpl/config.tmpl

MT4 版の場合、ブログ別管理画面の [設定]→[プラグイン] で、ASCII Trackback Ping Filter Plugin 2.x が表示されていればOKです。インストール直後から動作が有効になります。

MT3 版の場合、管理画面のメイン・メニューの「利用可能なプラグインの設定」に「ASCII Trackback Ping Filter Plugin ?」が表示されればOKです。デフォルトではプラグインは無効になっています。有効にするには、ブログ別管理メニューの[設定]→[プラグイン]→[ASCII Trackback Ping Filter Plugin]の右側にある「設定を表示」をクリックして、左に表示されたチェックボックスをチェックし、「変更を保存」をクリックしてください。

５．フィルタリングの状況を把握したい場合

MT4.x 版はプラグイン管理画面より設定できます（下記）。

MT3.x版は、asciiTBPingfilter.pl を任意のエディタで開き、

# logging
our $log = 0;

の "0" を "1" に変更してアップロードすれば、ASCII文字のみのトラックバックを受信した時に

Filter ascii trackback ping. URL:http://hogehoge IP:xxx.xxx.xxx.xxx

という内容がシステムメニューのログに出力されます（ブログ別のログには出力されません）。

ログはプラグインの動作確認用です。スパムによってログが大量に出力される可能性がありますので、確認後はOFFにしてください。

2007.09.14
MT4対応を追加しました。

CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td）にフォントサイズが反映されないという問題があります。

この不具合を回避するには2通りの方法があります。

１．ページ先頭のXML宣言を削除する

ひとつめの方法は、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

を削除します。
XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします（「後方互換モード」と「標準準拠モード」については後述）。

２．th 要素、td 要素に直接プロパティを設定する

後方互換モードのままでも、例えば

th, td {
  font-size: 10px;
}

と設定することで、プロパティの値を反映させることができると思います。

標準準拠モードと後方互換モード・DOCTYPE宣言について

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる！ホームページ作成リファレンス：標準モードと互換モードについて
カスタムチャンス! 雑記帖：文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

IE5.5/6.0 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blog：xml宣言について

IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない

IE5.5/6.0 の後方互換モード（および5.5以前）の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト＠CSSバグ辞典スレッド：フォントサイズの指定が表要素に継承されない

上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。

color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform

1ヶ月ほど前に発売された、「ウェブ進化論」「グーグル―Google 既存のビジネスを破壊する」に続く Web2.0 関連の新書本です。

Web2.0でビジネスが変わる
	神田 敏晶 ソフトバンククリエイティブ 2006-06-16 売り上げランキング : 303 おすすめ平均 コンパクトで読みやすい解説書 話題のキーワードへの解答 Web2.0--何をするべきかという示唆が得られる。 Amazonで詳しく見る by G-Tools

著書の神田敏晶さんはKNN代表取締役社長兼ビデオジャーナリスト。以前、セグウェイを公道で走らせた方です。

先の2冊とは異なる視点、Web2.0 サービスに関わることで（ビジネスに関わらず）実際に起こった事象や、将来考えられるビジネスやサービスを具体的に掘り下げています。
例えば「TVを検索するということ」という項では、次のように述べられています。

視聴率のとれる番組さえ作っていればいいという時代はあと数年しかもたない。（中略）放送されたものは丸ごと録画しておいて、後からなんらかの「検索」をしてから見るという、ユーザーの視聴スタイルが変わる?（中略）ゴールデンタイムといった意味は薄れる。（中略）そうなると放送局側は広告主に対して視聴率ではなく（中略）付加価値をアピールしていくことになるはずだ。

このように、技術的な内容が中心ではなく、今世の中にある既存のサービスで「こういうことが起こった」「こう変わるかもしれない」という観点で書かれているので、「Web2.0 って何？」という方でも読みやすい内容ではないかと思います。

１．基本的な設定方法

バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。

HTML

HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。

<h1><a href="http://～/">タイトル</a></h1>

CSS

この h1 タグに対し、下記のような CSS を設定すれば背景画像（リストの「画像ファイル名」）が表示されます。リストは画像以外のプロパティを省略しています。

h1 {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image

画像ファイル名を指定します。画像ファイル名の部分にはURL指定（例：http://domain/images/hogehoge.gif）・ドキュメントルートからの絶対パス（例：/blog/image/hogehoge.gif）・スタイルシートからの相対パス（例：../images/hogehoge.gif）が指定できます。

background-position

画像の表示開始位置を指定します。ここではleft（水平位置が左端）と top（垂直位置が上端）を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。

background-repeat

画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat（繰り返しなし）」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

プロパティをまとめる

各プロパティを background プロパティで次のようにまとめて記述することも可能です。

h1 {
    background: url("画像ファイル名") no-repeat left top;
}

サブタイトルがある場合

また、タイトルバナーにはタイトルの下にサブタイトルを表示している場合が少なくないと思います。

<div id="banner">
<h1><a href="http://～/">タイトル</a></h1>
<h2>サブタイトル</h2>
</div>

このような場合は h1 タグではなく、タイトルおよびサブタイトルを括っている div タグがあると思いますので、この div タグ（の id 属性）に対してスタイルを設定します。

#banner {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

２．公開テンプレートの設定方法

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>

タイトルバナー部分のCSSは下記のようになっていますので、赤色の背景色設定用の background プロパティを削除します。
そして、そのすぐ下に記述しているコメントアウトマーク（「/*」と「*/」）も削除してください。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

このコメントアウトされていたプロパティを利用して画像表示の設定をします。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

３．Movable Type デフォルトテンプレートの設定方法

Movable Type のデフォルトテンプレートも左のスクリーンショットのように青色の背景色を設定しています。参考までにデフォルトテンプレートのHTMLは下記のようになっています。

<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>

先程よりやや複雑な構造ですが、スタイルは一番外側の div タグの id 属性（banner）に設定します。スタイルシート（styles-site.css）のタイトルバナーのCSSに対して赤色を削除します。

#banner {
    width: 710px; /* necessary for ie win */
    background: #a3b8cc;
}

そして２項と同様、画像表示の関連プロパティを追加します。

#banner {
    width: 710px; /* necessary for ie win */
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

４．リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしましょう。

５．画像が垂直方向に収まらない場合

苦労して作成した画像がタイトルバナーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。公開テンプレートであれば、

/* タイトルバナー */
#banner {
    padding: 30px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

と、padding プロパティの上下方向の値を増加させることでタイトルバナー全体の縦幅が広がります。

６．タイトルを任意の位置に表示する

５項の設定ではタイトルは左中央に配置されます。タイトルを左上や右上等に表示する場合は、５項の padding プロパティを修正します。ここでは左上に表示する例で説明します。

まず、５項で修正した padding プロパティ

padding: 30px 15px;

の値は下記の意味になります。

• 30px：上下のパディング
• 15px：左右のパディング

なお、これは上下パディングと左右パディングを一括設定する場合の省略形で、

padding: 30px 15px 30px 15px;

と書いても同様の効果があります。指定する順番は、左から時計回りに「上・右・下・左」です。
ちなみにパディングを個別に指定する場合は、

padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;

とします。なお右のパディングについては

text-align: left;

と、テキストを左寄せにしていることと、テキストの右側は他のプロパティでブログ全体の幅を指定しているため、省略しても問題ありません（テキストを右寄せにする場合は必要になります）。

さて、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

padding: 15px 15px 45px 15px;

下パディングの値が少ないと画像の表示範囲が少なくなりますのでご注意ください。
左右のパディングは一括して設定できるので、

padding: 15px 15px 45px

としても良いです（2番目の値が左右パディング）。

なおテキストを右寄せにする場合は、

text-align: right;

とします。

Movable Type で検索を行っていると、下記のようなメッセージが表示されるケースがあります。

現在検索中です。検索が終わるまでお待ちください。

これは Movable Type の仕様で、連続した検索実行を抑止しているためです。3.31 の場合、デフォルトの抑止時間は20秒で設定されていますので、検索してから20秒以内に再検索を実行すると上記のメッセージに出会うことになります。3.2 では 60秒に設定されています。

とはいっても、Movable Type に精通されていない方は検索を何回も繰り返すでしょうし、このままではサイト運営者は「検索機能がおかしいですよ」というコメントを頂くことになりかねません。下記の変更を行い、サイトを訪問された方が戸惑わないようにすることを推奨します。

１．連続実行抑止時間を短縮する

１．１ Movable Type 3.3? の場合

mt-config.cgi に

ThrottleSeconds 10

という ThrottleSeconds を追加することで、連続実行抑止時間を変更でき、エラーメッセージが表示される確率を下げることができます。数字の単位は「秒」で、上記の例は10秒（=検索してから10秒以内に再検索されたらエラーにする）を設定しています。

ThrottleSeconds

Movable TypeはIPベースのコメント帯域制御の設定を使い、コメントを溢れさせる攻撃（1つのエントリーに多量のコメントを送り付けること）に対処しています。 ThrottleSecondsはサイトの閲覧者がコメントを投稿した後に、再投稿できない時間を秒数で指定します。 たとえば、アリスがある時刻にコメントを投稿したと仮定します。すると彼女は、その時刻からこの設定に指定されている秒数の間、同じIPアドレスから別のコメントを投稿することができなくなります。 あなたのブログに対しコメントを投稿する人が多くなければ、この設定を上げることができます。

ただしこの設定項目はコメントやトラックバックについても適用されますので、値を下げ過ぎると同一投稿者からのコメント重複投稿やスパム攻撃が増加する可能性があります。またサーバにも負荷がかかりますので注意しましょう。

１．２ Movable Type 3.2 の場合

3.31 では設定ファイルで値の変更が可能ですが、3.2 はプログラムを修正する必要があります。

lib/MT/App/Search.pm

をダウンロードし、下記のパッチをあてます。

--- lib/MT/App/Search.pm.bak    Thu Sep 22 13:00:26 2005
+++ lib/MT/App/Search.pm        Mon Jul 17 18:49:37 2006
@@ -36,7 +36,7 @@
         if ($DB) {
             my $ip = $app->remote_ip;
             if (my $time = $db{$ip}) {
-                if ($time > time - 60) {   ## Within the last minute.
+                if ($time > time - 10) {   ## Within the last minute.
                     return $app->error($app->translate(
                         "You are currently performing a search. Please wait until your search is completed."));
                 }

パッチが利用できない場合は下記の赤色部分 *1 を変更してください。

sub init {
    my $app = shift;
　　　　　　　：
　　　　　　（略）
　　　　　　　：
    ## Check whether IP address has searched in the last
    ## minute which is still progressing. If so, block it.
    if (eval { require DB_File; 1 }) {
        my $file = File::Spec->catfile($cfg->TempDir, 'mt-throttle.db');
        my $DB = tie my %db, 'DB_File', $file;
        if ($DB) {
            my $ip = $app->remote_ip;
            if (my $time = $db{$ip}) {
                if ($time > time - 60) {   ## Within the last minute.
                    return $app->error($app->translate(
                        "You are currently performing a search. Please wait until your search is completed."));
                }
            }
　　　　　　　：
　　　　　　（略）
　　　　　　　：

元の「60」は60秒のようです。これより少ない値に変更すればエラーに遭遇する確率が下がります。修正案は10秒にしていますが、必要に応じて値は適宜修正してください。
修正が終わったら元のディレクトリにアップロードしてください。

２．エラーメッセージを改善

冒頭のエラーメッセージを変更し、ユーザに対し再検索で待ち時間が必要であることを促します。
メッセージの修正方法は、Movable Type をインストールしたディレクトリから

lib/MT/L10N/ja.pm

をダウンロードし、任意のエディタで開いて下記の赤色部分を修正します。

　　　　　　　：
## lib/MT/App/Search.pm
'You are currently performing a search. Please wait until your search is completed.' => '現在検索中です。検索が終わるまでお待ちください。',
　　　　　　　：

例えば下記のように修正します。

'You are currently performing a search. Please wait until your search is completed.' => '再検索する時は×秒以上待ってから行ってください。',

修正したら元のディレクトリにアップロードして上書きしてください。１項の修正と併用しても良いでしょう。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

現在配布中の「新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach」に続いて、最新記事リストの新着エントリーに「New!!」というテキストや画像を表示するプラグインを作成しました。

本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「エントリー投稿後 n 時間以内」という指定を行うことで、最新記事リストの該当エントリーーに任意のテキスト（または画像）を表示することができます。スクリーンショットは公開テンプレートに適用した完成イメージですが、どのテンプレートでも利用可能です。

動作の仕組みは、プラグインを用いて、最新記事リストの各エントリーの右側にエントリー投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。

プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。なおサブカテゴリーリスト版をお使いの場合、JavaScript の設定が共用できるので設定不要です。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。

以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の LatestEntryWithTime.zip または LatestEntryWithTime.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

LatestEntryWithTime.zip / LatestEntryWithTime.lzh

ダウンロードしたアーカイブを解凍し、中にある LatestEntryWithTime.pm を plugins ディレクトリ直下に、resource/ja/latestentrywithtime.txt を、同じディレクトリの構成があると思いますので、latestentrywithtime.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に LatestEntryWithTime.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．テンプレートの修正

ベースHTMLテンプレートに対し、下記の新着表示用最新記事リストの独自ブロック・独自タグとスクリプトを追加してください。

<!-- BEGIN latest_entry_with_time -->
<div class="sidetitle">Latest Entries</div>
<div class="side" >{latest_entry_list_with_time}</div>
<!-- END latest_entry_with_time -->
 
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

前述した通り、新着表示プラグイン（サブカテゴリーリスト版）をすでにご利用の場合は、スクリプト部分の

<script type="text/javascript">
　　　　　　：
　　　　　（略）
　　　　　　：
</script>

は設定しなくても大丈夫です。

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です（例は24時間）。

新着表示の内容は、

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

３．スタイルシートの設定

スタイルシートに下記の設定を追加します。最初の display プロパティで１項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

プロパティは適宜変更して、お好みのデザインに仕上げてください。

以上です。不具合等ございましたらご連絡ください。

現在 3.2 用として公開中の StyleCatcher ライブラリを 3.3 のテンプレートにも適用できるよう修正致しました。

下記のURLをコピーして StyleCatcher プラグインの「テーマ/リポジトリへのURL: （Theme or Repository URL）」に設定し、「スタイル検索（Find Style）」をクリックしてください。

テーマ/リポジトリへのURL:

ライブラリはひとつしか登録していませんが、3.2 および 3.3 のいずれでも利用可能です。また表示に関する既存の不具合がいくつかありましたので、併せて修正致しました。

ご利用方法の詳細については下記のエントリーを参照ください。

Movable Type テンプレート（for StyleCatcher）

タグで

当サイトで配布中の duplicateTBPingfilter が Movable Type 3.31 に適用可能かどうか、トラックバック処理を調べてみました。

lib/MT/App/Trackback.pm のトラックバック受信処理を見ると、

sub ping {
　　　　：
　　　（略）
　　　　：
    my $ping;
 
    # Check for duplicates...
    my @pings = MT::TBPing->load({ tb_id => $tb->id });
    foreach (@pings) {
        if ($_->source_url eq $url) {
            return $app->_response() if $_->is_junk;
            if ($app->remote_ip eq $_->ip) {
                $ping = $_;
                last;
            } else {
                # return success to quiet this pinger
                return $app->_response();
            }
        }
    }
 
    if (!$ping) {
        $ping ||= MT::TBPing->new;
        $ping->blog_id($tb->blog_id);
        $ping->tb_id($tb_id);
        $ping->source_url($url);
        $ping->ip($app->remote_ip || '');
        $ping->junk_status(0);
        $ping->visible(1);
    }
　　　　：
　　　（略）
　　　　：

というコードが新たに追加されており、送信元URLが同一のトラックバックについては、受信済の同一URLのトラックバックデータに上書きしています。

例えば、自ブログのあるエントリーで

• タイトル：今日は暑かった
• 概要：東京都心は３６．１度と今年最高を記録しました。
• 送信元URL：http://hogehoge/2006/07/post.html

というトラックバックを受信済の状態で、

• タイトル：今年最高気温
• 概要：静岡県浜松市で３８．４度を観測しました。
• 送信元URL：http://hogehoge/2006/07/post.html

というトラックバックを新たに受信すると、先のトラックバックは後のトラックバックの内容で上書きされます。そして最初のトラックバックのタイトルと概要は

• タイトル：今年最高気温
• 概要：静岡県浜松市で３８．４度を観測しました。

という内容に置き代わります。内容の相違に関わらず、送信元URLが同一であれば一律上書きを行い、トラックバック処理を続行します。

duplicateTBPingfilter は受信済のトラックバックと新たに受信したトラックバックを比較して重複を判断していますが、Movable Type で旧トラックバックに上書きしてしまうため、比較自体ができなくなり、つまり 3.3 以降は不要となります。アップグレードによって登録されたままの場合でも特に問題ありませんが、トラックバック検索処理が動作するため、外しておくことを推奨します。

Movable Type 3.3x より Widget Manager が標準装備されて Widget を利用される方も少なくないと思います。このエントリーでは Widget の中から見栄えに不満の残る、カレンダーおよび Technorati Search のCSSを若干修正してみました。
表示は Windows2000/XP+IE6.0/Firefox1.5/Opera9.0 で確認しています。

１．Widget カレンダー

デフォルトCSSでは左のスクリーンショットのように左寄りに表示されてしまっています。ということで、スタイルシート styles-site.css から 下記のセレクタを検索し、width プロパティ値を 14% から 20px に修正します。

.module-calendar .module-content th,
.module-calendar .module-content td {
    width: 20px;
    text-align: center;
}

この修正で左のようにほぼ等幅で表示されるようになります。

２．Widget テクノラティ

Widget テクノラティは テクノラティ検索結果を表示するためのもので、fieldset 要素による罫線が目新しいのですが、レイアウトが整然としない印象です。
ここでは Fieldset による罫線表示をそのまま利用したものと、通常の検索フォームに直したものの2種類をご紹介します。

２．１ Fieldset表示あり

デフォルトCSSでは左のスクリーンショットのように表示されます。まず Widget 全体を下記のものに入れ替えてください。

<div class="module-archives module">
  <h2 class="module-header">Technorati</h2>
  <div class="module-content">
    <div id="technorati">
      <form id="ts_s" method="post" action="http://technorati.com/search.php">
      <fieldset>
        <legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
        <input type="hidden" name="sub" value="searchlet" />
        <input type="text" id="ts_search" name="s" size="28" maxlength="255" value="" /><br />
        <input type="radio" checked="checked" name="from" id="ts_yb" value="http://hogehoge/" />
        <label for="ts_yb" title="First Weblog">このブログ</label>
        <input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべて</label>
        <input type="submit" class="btn" value="検索" />
      </fieldset>
      </form>
      <p id="ts_l" class="ts_l"><a href="http://technorati.com/search/http://hogehoge/" id="ts_lh">» ここにリンクしているブログ</a></p>
    </div>
  </div>
</div>

そして下記のCSSを追加します。

.module-archives fieldset {
    padding:5px;
}
.module-archives label {
    font-size:10px;
    _font-size:8px;
}
.module-archives input {
    font-size: 10px;
}
#ts_search {
    width:100px;
}

ラジオボタンの表記を短縮して、Fieldset との padding を設け、submit ボタンの表示も整えましたので、スッキリした感じになります。

２．２ Fieldset表示なし

こちらも Widget 全体を下記のものに入れ替えてください。

<div class="module-archives module">
  <h2 class="module-header">Technorati</h2>
  <div class="module-content">
    <div id="technorati">
      <form id="ts_s" method="post" action="http://technorati.com/search.php">
      <fieldset>
        <legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
        <input type="hidden" name="sub" value="searchlet" />
        <input type="text" id="ts_search" name="s" size="20" maxlength="255" value="" />
        <input type="submit" class="btn" value="検索" /><br />
        <input type="radio" checked="checked" name="from" id="ts_yb" value="http://hogehoge/" />
        <label for="ts_yb" title="First Weblog">このブログ</label>
        <input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべて</label>
      </fieldset>
      </form>
      <p id="ts_l" class="ts_l"><a href="http://technorati.com/search/http://hogehoge/" id="ts_lh">» ここにリンクしているブログ</a></p>
    </div>
  </div>
</div>

そして下記のCSSを追加します。fieldset 要素はそのままで非表示にするプロパティを追加しています。

.module-archives fieldset {
    border:none;
    margin:0;
    padding:0;
}
.module-archives label {
    font-size:10px;
    _font-size:8px;
}
.module-archives input {
    font-size: 10px;
}
#ts_search {
    width:100px;
}

これで Movable Type の検索フォームに近いレイアウトになります。

Six Apart がフィードバックフォームによる受付を開始されたようです。

フィードバックフォーム開設のお知らせ

製品がリリースされた途端にユーザーの皆さまの声が開発チームに届かなくなるのはおかしいぞということで、このたび日本のサイトに日本語で記入できるフィードバックフォームを開設いたしました。このフォームに投稿された内容は、開発チームに直接届く仕組みになっています。バグ、機能要望、不平不満、賞賛、お褒めの言葉、励ましのお言葉など、製品の向上につながるフィードバックであればなんでもかまいません。ぜひこのフォームをご利用いただき、皆さまの声をお聞かせください。

利用者にとっては開発サイドへの窓口ができたことになり、大変ありがたいサービスです。日頃 Movable Type にお世話になっていることに感謝の意を込めながら、フィードバックさせて頂きたいと思います。

先日まで Movable Type 3.31英語版のベータ版情報を流していました が、こちらもすでにリリースされています。日本語版はダウンロード方法が変わりましたが、英語版は 3.2 と同様の方式なので、ブラウザからの操作だけでアーカイブを取得することができます（TypeKey の登録は必須）。
Movable Type のページの「Get It Now」をクリック→「PERSONAL」タブをクリック→「FREE」をクリックし、後は指示に従って進めば個人無償ライセンス版をダウンロードできます。

英語版と日本語版の差分

試しに日本語版 3.31-ja との差分をとってみました。若干の違いはありましたが、言語と日付、およびバージョンの設定以外は全く同じ内容でした。

両方に存在するもので差分があったファイルは下記です。

• index.html
• lib/MT/ConfigMgr.pm
• lib/MT.pm
• mt-check.cgi
• php/mt.php

また英語版には下記のファイルがあります。

• lib/MT/L10N/de-iso-8859-1.pm
• lib/MT/L10N/es-iso-8859-1.pm
• lib/MT/L10N/fr-iso-8859-1.pm
• lib/MT/L10N/nl-iso-8859-1.pm

英語版にはさらに feeds-app-lite プラグインがついてます。

• mt-static/plugins/feeds-app-lite
• plugins/feeds-app-lite

英語版を日本語環境で利用する

さて、上記の差分の中から

• lib/MT.pm
• mt-check.cgi

に下記のパッチをあて、mt-config.cgi にいくつかの設定項目を追加することで、英語版を日本語環境で利用することが可能になります（しかも feeds-app-lite が使える）。パッチの正常性は確認済で、MTの基本的な操作や表示については日本語で問題なく動作します。

パッチおよび mt-config.cgi の修正はインストール前に行ってください。またパッチを作るときは最後の行に改行を含めてください。
なおこの件に関しましてはご自身の責任で行ってください。

lib/MT.pm

--- lib/MT.pm        2006-07-11 20:14:46.000000000 +0900
+++ lib/MT.pm        2006-07-11 20:15:22.000000000 +0900
@@ -558,7 +558,7 @@
 
     ## Initialize the language to the default in case any errors occur in
     ## the rest of the initialization process.
-    $mt->set_language('en_US');
+    $mt->set_language('ja');
     $mt->read_config(\%param) or return;
     $mt->init_plugins(@_) or return;
     $mt;

mt-check.cgi

--- mt-check.cgi     2006-07-11 20:14:46.000000000 +0900
+++ mt-check.cgi     2006-07-11 20:15:22.000000000 +0900
@@ -25,7 +25,7 @@
 local $| = 1;
 
 my $mt;
-my $lang = 'en_US';
+my $lang = 'ja';
 eval {
     require MT;
     $mt = MT->new();

mt-config.cgi

下記の設定を追加してください。それぞれの意味をコメント（#）で記載しています。設定項目は英語版との差分、およびMovable Type 3.3 マニュアル・環境変数の掲載内容より、必要と思われるものを抽出しています。設定値については、前述のマニュアルを参考にして、必要であれば適宜修正してください。

# ブログの言語
DefaultLanguage ja
 
# Movable Typeから送信するメールの文字エンコード
MailEncoding ISO-2022-JP
 
# システム・メニューにあるサポートホームページへのリンク
SupportURL http://www.sixapart.jp/movabletype/support/
 
# メイン・メニューやシステム・メニューにあるMovable Typeニュースへのリンク
NewsURL http://www.sixapart.jp/movabletype/
 
# メイン・メニューの右上のニュース表示部分
NewsboxURL http://www.sixapart.jp/movabletype/news/newsbox.html
 
# オンライン・マニュアルへのリンク
HelpURL http://www.sixapart.jp/movabletype/manual/[バージョン]/
 
# ログ等を書き出す際のエンコーディング
ExportEncoding Shift_JIS
 
# ブログを新規作成する際の、時間帯（タイムゾーン）の初期値を設定します。
DefaultTimezone 9

DefaultLanguage は、マニュアル上は「ブログ管理画面に利用する言語」と書かれていますが、ブログの表示にも影響します。
以前、「英語版を日本語版にできないでしょうか」という質問を受けて、運用中のブログに対して DefaultLanguage を変更したのですが、 この設定項目はインストール前しか有効になりませんでした。今回も同様です。

出遅れましたが、Six Apart が Movable Type 3.31日本語版の提供を開始しました。

Movable Type 3.31日本語版の提供を開始

大変お待たせいたしました。本日より、Movable Type 3.31日本語版 (以下、3.31-jaと称します。) の提供を開始いたします。 3.31-jaは、7月3日にご案内しました下記の不具合などを修正したものです。

また上記記事からリンクされている技術情報提供ブログの先には StyleCatcher 用のスタイルライブラリ作成方法が掲載されています。

StyleCatcher 用のスタイルライブラリを作成する

これにより、ご自身のサイトで Movable Type 用のデザインを公開することができます。
以前、当サイトで以前スタイルライブラリ作成方法を hack した記事も下記にありますのでご参考まで。

StyleCatcher リポジトリ公開方法

内容は更新しておりませんので差分がありましたらご容赦ください。また当サイトで公開中の 3.2 用ライブラリも近日中に 3.3 用を作りたいと思います。

「Web 2.0への道」の第2弾、休刊になったインターネットマガジンに掲載されていた Google の関連記事を再編集し、新たに 40ページ以上が書き下ろされたものです。

Googleのすべて WEB2.0への道2 Web2.0編集部 インプレスR&D 2006-07-05 売り上げランキング : 2023 Amazonで詳しく見る by G-Tools

創業者であるラリー・ペイジ＆サーゲイ・ブリンのインタビューや日本法人取締役社長・村上憲郎のインタビュー、グーグル東京研究開発センターレポート、そして下記の各サービスが解説されています。

• Google Adsense
• Google Analytics
• Google Co-op *
• Google Base
• Google Book Search
• Google Catalogs
• Google Dashboard Widgets for MAC
• Google Earth
• Google Labs
• Google Pack
• Google Page Creator
• Google Reader
• Google Ride Finder
• Google Sets
• Google Transit
• Google Trends *
• Google Video
• Google Web Accelerator
• Google アドワーズ広告
• Google アラート
• Google カレンダー *
• Google グループ
• Google サイトマップ
• Google ディレクトリ
• Google ツールバー& Google Extensions for Firefox
• Google デスクトップ
• Google トーク
• Google ニュース
• Google ノートブック *
• Google パーソナライズドホーム
• Google パーソナライズド検索
• Googleモバイル
• Google マップ
• Google 検索
• Google 検索アプライアンス
• Google 翻訳
• Blogger
• Froogle
• Gigapixl プロジェクト
• GMail
• Orkut
• Picasa

* は雑誌発売時から追加されたサービスです。

さらに Google 検索・Gmail・Google Calendar・Google デスクトップ・Google マップ・Google Earth・Google Notebook・Google パーソナライズドホーム+ニュース・Google トーク・Picasa・Google Video の具体的な利用方法が掲載されています。

それにしても、元記事が掲載された「インターネットマガジン」が発売されてから約4ヶ月の間にサービスが4つ増えて、他のサービスが継続しているというのは驚異ですね。

Widget Manager プラグインの応用編ということで、その1 に続き、今回は公開テンプレートを Widget Manager で制御する方法を紹介します。

ここでは 3 カラムレイアウトで適用する例を基本に説明します。2カラムレイアウトについては文中で適宜説明を加えています。

１．テンプレートの修正

公開テンプレートの左カラムおよび右カラムの内容を全て削除し、下記のように MTWidgetManager タグの1行だけになるように変更します。

　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$MTWidgetManager name="First Widget Manager"$>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<$MTWidgetManager name="Widget Manager Right"$>
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
　　　　　　　：
 　　　　　（省略）
　　　　　　　：

2カラムで利用する場合は、上記から不要な方の「×カラム開始?×カラム終了」を全て削除し、残したサイドバーの方に

<$MTWidgetManager name="First Widget Manager"$>

を設定してください。

なお公開テンプレートから削除した内容は新しい Widget として後で使用しますので、エディタの画面または他のファイルに残しておいてください。

２ Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、3カラムレイアウトで利用する場合は Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします（2カラムでご利用になる場合はこの項目をスキップしてください）。

ブログの管理画面（メイン・メニューからブログ名を選択した次の画面）またはテンプレート一覧画面にある「Widgetの管理」をクリックします。

次の画面の右上にある 「Widget Managerを作成」をクリックします。

次の画面左上にある「Widget Managerの名前」に Widget Manager Right を入力します。Widget Manager の名前は何でも構いませんが、１項で作成した

<$MTWidgetManager name="Widget Manager Right"$>

の赤色部分と一致するようにしてください。

また、利用する Widget Manager に Widget がひとつも設定されていない状態で再構築するとエラーになりますので、この時点で新しく作成した Widget Manager に何かひとつ Widget を「インストールされているWidget」にドラッグ＆ドロップしておいてください。

３．テンプレートモジュールの修正

デフォルトで登録されているテンプレートモジュールの中身を、公開テンプレートの各モジュールの内容に入れ替えます。デフォルトのテンプレートモジュールの内容は元に戻すことができませんので、必要に応じてデフォルトテンプレートモジュールの内容を他のファイル等にバックアップしておいてください。
ここでは Widget に登録されている「最近の投稿」に、公開テンプレートの「エントリーリスト（最近のエントリー）」を設定してみます。

管理メニューの「テンプレート」→「モジュール」で「Widget: 最近の投稿」を開き、「テンプレートの内容」をすべて削除します。そして先ほど削除したテンプレートから「エントリーリスト」の部分（下記）をコピーして、「テンプレートの内容」にペーストします。

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<!-- エントリーリスト終了 -->

ここに示している「エントリーリスト」の一番最初の行と最後の行はコメントなので、特に含めなくても問題ありません（ここでは分かりやすくするために含めています）。

同様に、他のテンプレートモジュールも入れ替えてください。公開テンプレートの Widget が対応しているのは下記のテンプレートモジュールです。

• Widget: 最近の投稿
• Widget: カレンダー
• Widget: 最近のコメント
• Widget: 検索フォーム
• Widget: タグ クラウド (サイドバー)
• Widget: カテゴリーリスト
• Widget: 月別アーカイブリスト
• Widget: クリエイティブ・コモンズ （「CCライセンス」が対応します）

対応するテンプレートモジュールが存在しない

• Widget: 最近のトラックバック

は、新しくテンプレートモジュールを作成します。

作り方は、テンプレートモジュール一覧の画面右上にある「モジュールを新規作成」をクリックし、次の画面の「テンプレート名」欄に「Widget: 最近のトラックバック」という具合に、先頭に「Widget:」という名称を付与して適当な名前を与え、あとはテンプレートの内容を設定し、保存します。

[参考]MovableTypeで行こう！：Widget Managerに「最近のトラックバック」モジュールを追加する

また、公開テンプレートで Widget として用意されていない

• Widget: Technorati Search
• Widget: 月別ドロップダウン
• Widget: フィードを取得

については、下記のリストをご利用ください。

Widget: Technorati Search

<div class="sidetitle">Technorati</div>
<div class="side">
<form id="ts_s" method="post" action="http://technorati.com/search.php">
<fieldset>
<legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
<input type="hidden" name="sub" value="searchlet" />
<input type="text" id="ts_search" name="s" size="23" maxlength="255" value="" /><br />
<input type="radio" checked="checked" name="from" id="ts_yb" value="<$MTBlogURL$>" />
<label for="ts_yb" title="<$MTBlogName$>">このブログ</label><br />
<input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべてのブログ</label>
<input type="submit" class="btn" value="検索" />
</fieldset>
</form>
<p id="ts_l" class="ts_l"><a href="http://technorati.com/search/<$MTBlogURL$>" id="ts_lh">» ここにリンクしているブログ</a></p>
</div>

Technorati Search を利用する場合は、スタイルシートに下記を追加してください。

fieldset {
    padding:5px;
}

Widget: 月別ドロップダウン

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">Monthly Archives</div>
<div class="side">
<select onchange="nav(this)">
<option>月を選択</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</div>
</MTIfArchiveTypeEnabled>
 
<script type="text/javascript" charset="utf-8">
function nav(sel) {
   if (sel.selectedIndex == -1) return;
   var opt = sel.options[sel.selectedIndex];
   if (opt && opt.value)
      location.href = opt.value;
}    
</script>

Widget: フィードを取得

<div class="side">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>

「Widget: フィードを取得」には公開テンプレートの「RSSフィード」を使っても構いません。

設定は以上です。
あとは Widget Manager の利用方法に従って操作してください。3カラムでご利用になる場合は、Widget Managerの名前が「First Widget Manager」が左カラム、「Widget Manager Right」が右カラムになります。2カラムの場合はデフォルトの「First Widget Manager」になります。
必要に応じて新しい Widget を作ってみるのも良いでしょう。

４．アーカイブテンプレートについて

公開テンプレートではインデックステンプレート（メインページ・アーカイブページ）とアーカイブテンプレート（カテゴリー・日付・エントリー）のサイドバーの内容が異なっています（左側のみ）したがって、アーカイブテンプレートにも Widget Manager を適用される場合には

カテゴリーアーカイブ用左サイドバー
日付アーカイブ用左サイドバー
エントリーアーカイブ用左サイドバー

の3つについて、任意の名称で Widget Manager を作成して、さらにテンプレートモジュールも「カテゴリー一覧」と「月別一覧」の2つを作成して、それぞれをカテゴリーアーカイブ用 Widget と日付アーカイブ用 Widget として登録してください。
インデックステンプレートの左サイドバーの内容をアーカイブテンプレートに適用しても正常な表示になりませんのでご注意ください。

2006.07.14 追記
４項を追加しました。

<$MTWidgetManager name="Widget Managerの名前"$>

基本的な利用方法は Six Apart のページに掲載されています。

Widget Manager

ここでは応用編ということで、デフォルトテンプレートを3カラムに変更し、サイドバーを Widget Manager で制御する方法について記したいと思います。

１． テンプレートの修正

WIdget Manager を利用したいテンプレートの構成を下記のように修正します（サンプルはメインインデックス）。修正した部分を赤、追加した部分を青で示しています。*1

　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<body class="layout-three-column main-index">
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
 
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
            <$MTWidgetManager name="First Widget Manager"$>
         </div>
      </div>
 
      <div id="beta">
         <div id="beta-inner" class="pkg">
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
         </div>
      </div>
 
      <div id="gamma">
         <div id="gamma-inner" class="pkg">
            <$MTWidgetManager name="Widget Manager Gamma"$>
         </div>
      </div>
 
   </div>
</div>
　　　　　　　：
 　　　　　（省略）
　　　　　　　：

全体の構成としては

• alpha：左カラム
• beta：中央カラム
• gamma：右カラム

になります。

上記の変更手順ですが、まず body 要素の class 属性を layout-three-column にします。

次に、エントリー本文を表示している

<div id="alpha">
   <div id="alpha-inner" class="pkg">
　　　　：
　　（省略）
　　　　：
   </div>
</div>

の alpha および alpha-inner という名称を beta および beta-inner に変更します。

さらに、

<div id="beta">
   <div id="beta-inner" class="pkg">
　　　　：
　　（省略）
　　　　：
   </div>
</div>

の beta および beta-inner という名称を gamma および gamma-inner に変更します。gamma の内容はサイドバーになっていますので、これらをごっそり削除して、

<$MTWidgetManager name="Widget Manager Gamma"$>

の1行に変更します。

最後に、beta に変更したタグの直前に

<div id="alpha">
   <div id="alpha-inner" class="pkg">
      <$MTWidgetManager name="First Widget Manager"$>
   </div>
</div>

を追加します。

２ Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします。

ブログの管理画面（メイン・メニューからブログ名を選択した次の画面）またはテンプレート一覧画面にある「Widgetの管理」をクリックします。

次の画面の右上にある 「Widget Managerを作成」をクリックします。

次の画面左上にある「Widget Managerの名前」に Widget Manager Gamma を入力します。Widget Manager の名前は何でも構いませんが、１．１項で作成した

<$MTWidgetManager name="Widget Manager Gamma"$>

の赤色部分と一致するようにしてください。

また、利用する Widget Manager に Widget がひとつも設定されていない状態で再構築するとエラーになりますので、この時点で新しく作成した Widget Manager に何かひとつ Widget を「インストールされているWidget」にドラッグ＆ドロップしておいてください。

これで再構築すれば 3カラムで表示され、さらに Widget Manager によって Widget を制御できるようになります。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

英語版の Final Release Candidate 2 が出ました。

Final Release Candidate 2 is posted

You'll notice that over on the left sidebar, we've posted Movable Type 3.3b-Final Release Candidate 2. ?（中略）? Download it if you like. It's doubtful that anything else will change between now and release.

使用言語から「日本語」が選択でき、選択すると管理画面が日本語になります。

折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」をご覧ください。

１．事前準備

このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。

ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン

２．スクリプトのダウンロード

下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。

download

３．スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。

// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var archives = true;
 
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives  = '▼';
var closeMarkForArchives = '▲';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

４．スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

５．テンプレートの修正（script タグ追加）

アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します（すでに設定済の方はこの項をスキップしてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）

月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。

青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div  id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください（アクセシビリティ向上のため、1年ほど前からこの機能を提供していましたが、パフォーマンスの関係で停止していました）。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

feedburner に「フィード・フレア」という機能が追加されていたので設定しました。この機能を利用すると、RSSフィードの記事単位にブックマークやコメント数等のリンクを表示させることができます。具体的には下記の通り（ほぼ引用です）。

Technorati Cosmosリンク

Technorati で計測された、ブログへのリンク数を表示します。リンクがない場合は表示されません。

del.icio.usへ追加

「del.icio.us」への追加用リンクを表示します。

はてなブックマークへ追加

「はてな」への追加用リンクを表示します。

コメントカウント

記事に対してコメントが投稿された数を表示します。このフレアは、単体で動作するWordPressやフィードの中でwfw:commentsエレメントを使用している場合のみ利用することができます。

クリエイティブ・コモンズの確認

RSSフィードまたは個別の記事に対し設定したクリエイティブ・コモンズの内容を表示します。

RSSリーダーへ登録

RSSリーダー登録用のリンクを設定します（サイト表示のみ有効）。

Sphere関連リンク

検索エンジンSphere.comから関連性/類似性の高いブログ投稿を表示します。

フィード・フレア プレビュー画面で、表示の確認とドラッグ＆ドロップで表示順序を入れ替えることができます。

フィード・フレアはブログにも表示できるようになっており、設定画面でフィード・フレアを表示したいブログを選択するとポップアップ画面が開きます。そこに表示されたタグをブログに貼り付ければOKです（設定方法はポップアップ画面に掲載されています）。表示されるタグに class 属性が予め設定されているので、CSS による調整も可能です。
が、残念ながらサイトにさせたところ日本語が文字化けしました。

使用限界をとっくに超えるコンタクトレンズを使い続け、目の疲労も限界にきたため、諦めて買い換えることにしました。

ということで、ネットでコンタクトレンズの激安店や通販を検索。
今使っているコンタクトレンズはビックカメラで購入したものですが、ふと「コンタクトレンズ ビックカメラ」で検索してみると、少し下に、

nao3 blog | コンタクトレンズを安く買う！

という記事がヒット。偶然にも当サイトのテンプレートユーザさんでした。

何気なくその記事を読むと、中に登場する「池袋高橋医院」の評判がかなりよさそうということが判明。早速足を運ぶことに。

コンタクト量販店と池袋高橋医院の大きな違いは、前者は「お店」で後者は「病院」であるということでしょう。したがって高橋医院は、

• コンタクトレンズは「商品」ではなく「クスリ」
• 支払いは現金
• 診療結果によっては支給されない可能性もあり

と、まったくの病院です。
とはいえ、ハード・ソフト・使い捨てタイプ等、「クスリ」の選択は患者さんに任されています。

口コミで評判がひろまっているのか、私が到着した時は満員で、30名位が待合室にいました。受付で「2時間待ちになります」「外出はできません」と告げられ、そのまま待合室に。その時が受診者数のピークかと思いきや、私の番が回ってくるまでピーク状態が続いていました。

診療は、お医者さんの対応も良く、目の検査もしっかり行ってもらえて、気持ちよく購入することができました。

サイトにレンズ代・診療費込みの価格がサイトで公開（一部非公開）されているところも良心的です。受付後にすぐ価格表と在庫一覧の紙をもらえるので、待っている間にある程度決めることができます。
私の横にいた患者さんに、先生が「宅急便で?」という話をしていたので、お取り寄せの場合はそのような対応もしてくれるかもしれません（間違っていたらすいません）。

待ち時間がかなり長くなるかもしれないので、行かれる方は本を持っていくといいでしょう。

エクスプローラーを何枚も開く人は激しく便利かもしれません。

QTTabBarを「とりあえずのページ」からダウンロードしてください。インストールには Microsoft .NET Framework 2.0 が必要です。バージョン確認方法は下記のサイトで。

.NET Frameworkのバージョンを確認する方法

.NET Framework 1.x の場合は、以下の方法で 2.0 にアップグレードできます。

ブラウザの[ツール]-[Windows Update]-（読み込み）-[カスタム]-（読み込み）-[追加選択（ソフトウェア）]→".NET Framework 2.0"と書かれた項目をチェックして、「更新プログラムのインストール」をクリック。
ただし、優先度の高いプログラムがインストールされていないと[追加選択（ソフトウェア）]が表示されません（たしか）。

Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。

Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。

下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。

Litebox のブログ適用サンプル

サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と思われます。また Movable Type についてはテンプレート機能を利用した方法も併せて紹介しています。

注：ページ内に U2B Player を設定していると litebox は動作しませんのでご注意ください。 → 不具合解消されています（参考：U2B Playerに新機能「Link2B」追加）。

画像表示方法

カスタマイズの前に、記事に画像を設定する方法を説明しておきます。
すでにご存知と思われますが、Lightbox 同様、a 属性に青色 *1 で示す rel="lightbox" を設定します。

<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>

グループ化する場合は rel 属性値に "[]" を付与します。

<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" /></a>

"[]" 内の文字列が同じものについては画像に前後リンクが付与されて連続で開くことができます。

また、rel 属性を自動付与するカスタマイズも色々出回っているようですので、適用できるかもしれません。

１．アーカイブのダウンロード

Litebox のサイト後方にある Download の litebox-1.0.zip のリンクをクリックしてダウンロードします。

ダウンロードアーカイブを解凍して、その中から下記のファイルを利用します。

litebox-1.0/css/lightbox.css

litebox-1.0/images/blank.gif

litebox-1.0/images/closelabel.gif

litebox-1.0/images/loading.gif

litebox-1.0/images/nextlabel.gif

litebox-1.0/images/prevlabel.gif

litebox-1.0/js/litebox-1.0.js

litebox-1.0/js/moo.fx.js

litebox-1.0/js/prototype.lite.js

その他のファイルや画像はサンプル用ですので不要です。

以下、Movable Type のテンプレート機能を利用する方法と、利用しない方法に分けて説明します。Movable Type 以外のブログの場合はテンプレート機能を利用しない方を参考にしてください。

２．ファイルの修正

２．１ テンプレート機能を利用しない場合

SereneBach や FC2ブログ等はこちらの解説を参考にしてください。

２．１．１ lightbox.css の修正

lightbox.css にある下記の赤色部分（3ヶ所）

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

を

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(http://domain/path/to/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://domain/path/to/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://domain/path/to/images/nextlabel.gif) right 15% no-repeat; }

と、ご自身のブログのURLに修正します。

２．１．２ litebox-1.0.js の修正

litebox-1.0.js の下記の部分に、青色で示した「ドキュメントルートからのパス」を設定します。

//
//    Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";

２．２ テンプレート機能を利用する場合

ファイルを修正する際にMTタグを利用し、そのファイルをテンプレートとして登録することで修正箇所を自動変換します。テンプレートに登録するのは修正する2ファイルのみです。

２．２．１ lightbox.css の修正

lightbox.css にある下記の赤色部分

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

を

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(<$MTBlogURL$>images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(<$MTBlogURL$>images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(<$MTBlogURL$>images/nextlabel.gif) right 15% no-repeat; }

に修正します。
そしてこのファイルをインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名：lightbox用CSS（何でもいいです）

出力ファイル名：lightbox.css

このテンプレートにリンクするファイル：（設定不要）

再構築オプション：チェックを外す

テンプレートの内容：lightbox.css の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

２．２．２ lightbox-1.0.js の修正

lightbox.css の下記の部分に、青色で示したMTタグを設定します。

//
//    Configuration
//
var fileLoadingImage = "<$MTBlogRelativeURL$>images/loading.gif";
var fileBottomNavCloseImage = "<$MTBlogRelativeURL$>images/closelabel.gif";

そしてこのファイルもインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名：lightbox用JS（何でもいいです）

出力ファイル名：litebox-1.0.js

このテンプレートにリンクするファイル：（設定不要）

再構築オプション：チェックを外す

テンプレートの内容：litebox-1.0.js の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

３．ファイルのアップロード

index.html があるディレクトリに

css/lightbox.css

images/blank.gif

images/closelabel.gif

images/loading.gif

images/nextlabel.gif

images/prevlabel.gif

js/litebox-1.0.js

js/moo.fx.js

js/prototype.lite.js

という構成になるようにアップロードします。２．２項のテンプレート機能を利用する場合は、lightbox.css と litebox-1.0.js のアップロードは行わないでください。
またブログサービスの制約等で、この構成でアップロードできない場合、ファイルを同じディレクトリにアップロードして、４項の src 属性を適宜修正してください。

４．テンプレートの修正（head 部分）

メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリー・アーカイブの <head>～</head> の間の任意の行に下記を追加します。

Movable Type でテンプレート機能を利用しない場合

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>

Movable Type でテンプレート機能を利用する場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>

その他のテンプレートで利用する場合

<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>

５．テンプレートの修正（スクリプト起動の追加）

５．１ メインページ／カテゴリー・アーカイブ／日付アーカイブ／その他のブログ

body 要素に青色の onload 属性を追加します。

<body class="layout-two-column-right main-index" onload="initLightbox()">

５．２ エントリー・アーカイブ（Movable Type のみ）

body 要素に、すでに onload 属性が存在する場合の記述方法です。ここでは2通りの方法を紹介します。

ひとつめは、body 要素の onload 属性に追加する方法です。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);initLightbox();">

もうひとつは </body> の直前に追加する方法です。

<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>

2006.07.11 追記
２．１．２項の記述が誤っていたため修正しました。

2006.10.12 追記
４項の記述を修正しました。

2006.10.25 追記
U2B Player について追記しました。

2007.04.15 追記
U2B Player の不具合解消について追記しました。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Movable Type のエントリー・アーカイブでコメントを書き、「確認」をクリックしてコメント・プレビュー画面に遷移すると、コメントに書いた実体参照、例えば

<$MTBlogURL$>

が

<$MTBlogURL$>

という風に、「&lt;」や「&gt;」が通常のタグとして表示されてしまいます。

この不具合を解消するには、コメント・プレビューテンプレートのテキストエリア表示部分に用いられている MT タグ「MTCommentPreviewBody」に下記の encode_html 属性を追加します。

デフォルトテンプレート

　　　　　　：
<p id="comments-open-text">
   <label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
   <textarea id="comment-text" name="text" rows="10" cols="50"><$MTCommentPreviewBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</p>
　　　　　　：

公開テンプレート

　　　　　　：
<p id="comments-open-text">
   <label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
   <textarea id="comment-text" name="text" tabindex="10" accesskey="t" rows="10" cols="50"><$MTCommentPreviewBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></textarea>
</p>
　　　　　　：

余談ですが、この事象は Movable Type 3.2 以降かつ、3.1 以前のテンプレートを使用していない場合に発生します。理由は、3.1 まではコメント・プレビューテンプレートで MTCommentFields という、コメントフィールドを丸ごと表示するタグが使われており、タグの内部処理で encode_html が行われていたからです。

私のサイトのコメント・プレビューは最近までこの MTCommentFields を使っておりまして、3.2 のデフォルトテンプレートに準拠させてから本エントリーの不具合が発生しておりました（放置してしまってすいません）。
テンプレートを改修致しましたので、「確認」をクリックしても実体参照は正常に引き継がれるようになっています。

なお、この MTCommentFields タグ、マニュアルには掲載されていませんが、3.3 でも動作するようです（ただし 3.1 の処理のままです）。

現在配布中の「カテゴリーのプルダウン化プラグイン for Serene Bach」を改造して、新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するプラグインを作成しました（スクリーンショットは完成イメージ）。これは Movable Type のカスタマイズですでに公開している「新着エントリーのあるカテゴリーに New マークをつける」を参考に Serene Bach に適用したものです。

本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「エントリー投稿後 n 時間以内」という指定を行うことで、該当するエントリーのあるカテゴリーに任意のテキスト（または画像）を表示することができます。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。

動作の仕組みは、プラグインを用いて、カテゴリーリストの各カテゴリー名の右側に、それぞれの最新エントリーの投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。

プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。

少し前にこのプラグインについてのご要望を頂いておりましたが、Movable Type 3.3 のリリースと重なったこともあり、公開がかなり遅くなってしまって申し訳ございませんでした。またアイデアをご提供くださったこと、この場をお借りしてお礼申し上げます。ありがとうございました。

本エントリーではサブカテゴリーリストに新着表示を設定するプラグインのみを提供致しますが、他のリストについても同様のロジックで新着表示が可能と思われますので、随時公開していく予定です。

以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の FoldCategory.zip または FoldCategory.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

FoldCategoryWithTime.zip / FoldCategoryWithTime.lzh

ダウンロードしたアーカイブを解凍し、中にある FoldCategoryWithTime.pm を plugins ディレクトリ直下に、resource/ja/foldcategorywithtime.txt を、同じディレクトリの構成があると思いますので、foldcategorywithtime.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に FoldCategoryWithTime.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
すでに FoldCategory.pm をご利用の場合は、FoldCategory.pm 右側にあるチェックボックスのチェックをはずしてください。

２．スクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

５．折りたたみマークに関するカスタマイズ

２～５項については、カテゴリーのプルダウン化プラグイン for Serene Bachをご覧ください。すでに FoldCategory.pm をご利用の場合は、２～５項の設定は不要です。

６．スクリプトの追加

ベースHTMLテンプレートの、４項で設定した独自タグのすぐ後ろに、下記のスクリプト（青色）を追加してください。

　　　　　　　：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
 
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です（例は24時間）。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

７．スタイルシートの設定

スタイルシートに下記の設定を追加します。最初の display プロパティで１項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

プロパティは適宜変更してお好みのデザインにしてください。

８．その他

• 折りたたみマークをカテゴリー名の右側に表示している場合、New マークはカテゴリー名と折りたたみマークの間に表示されます。
• 子カテゴリーに新着エントリーがある場合、その親カテゴリーに New マークを表示する機能はありません。

以上です。不具合等ございましたらご連絡ください。

すでにご存知の方も多いと思いますが、Movable Type のカスタマイズ本が発売中です。

Movable Typeではじめる ビジネスブログ・テンプレートブック 中村 義和 翔泳社 2006-06-21 売り上げランキング : 4052 おすすめ平均 Amazonで詳しく見る by G-Tools

ビジネスブログを構築・制作で実績のあるアロマネット株式会社・代表取締役 中村義和氏の著書で、企業のノウハウ・テクニックが満載の一冊です。

これまで発売されたカスタマイズ解説書籍と異なるのは、MTタグやプラグイン等の個々の機能に着目した、いわゆる Tips 集的な内容を主体としたものではなく、8種類のビジネスブログサイト

• 旅行代理店
• 教育講座
• 工務店
• 情報提供
• ソフトウエア販売
• コンサルティング
• ネットショップ
• 携帯

を例に、それぞれのサイトに相応しいカスタマイズ方法について、誌面の多くを割いて紹介し、サイト全体の構築について即戦力のある内容に仕上げているところです。それぞれのテンプレートは添付のCD-ROMに収録されていますので、気に入ったサンプルをCD-ROMからコピーするだけで、ある程度まとまった形のビジネスブログが出来上がります。

また書籍の前半は Movable Type の基本的な事項に関する内容が掲載されていますので、ビジネスブログ関連業務に携わっている方で「Movable Type はよく分からない」という方でも、これ1冊で Movable Type を利用したビジネスブログの構築方法を修得できるのではないでしょうか。

ビジネスブログで大事なポイントのひとつとして、ブログが有する機能やその周辺技術を巧みに利用して、運営が容易なサイトを構築することが挙げられると思います。この本ではそのようなノウハウが掲載されている訳ですが、そこから得た知識をヒントに、さらに新しいアイデアへと結びつく可能性があります。
つまり、書籍の内容を単になぞらえるだけでなく、そこをきっかけに、例えば「このタグはこういう使い方もできるな」という風に、応用する思考へ発展する。個人的にはそれがこの本から学ぶべき一番重要な要素であると考えます。

ということで、ビジネスブログに携わる方へお勧めの一冊です。

昨日お知らせした「Movable Type 3.3 アップグレードによる月別アーカイブ・日別アーカイブの不具合」の改修も含めた修正版が出るようです。

Movable Type 3.3修正版リリースのお知らせ

6月28日に公開したMovable Type 3.3に、動作上の不具合が発生しております。近日中に修正版をリリースする予定です。

改修される内容は下記の3点です。

• 大括弧（[および]）を使ったタイトルを含むエントリーを、投稿画面で編集できなくなる
• 月別や日別など日付をベースにしたアーカイブテンプレートを再構築すると、出力結果のすべてのページに同じ最新エントリが表示される
• 英文のテンプレート名を持つテンプレートが日本語に翻訳されたテンプレート名で表示される

2番目の説明で元記事が「」となっている部分はカッコ内に記述されたMTタグが文字実体参照になっていないようです。
下記に実体参照にしたものを再掲させて頂きました。

修正版公開を待たずに公開ページを修正したい場合、不具合が出たアーカイブ中の「<MTEntries>」とタグだけになっているところに属性を追加する。 例えば「<MTEntries sort_order="descend">」などと変更する。修正版公開後は元のテンプレートに戻せるので、バックアップしておくことを推奨します。

一昨日公開した Movable Type 3.3 テンプレートに入れ替えられた方から「月別アーカイブ（日別アーカイブ）が正常に再構築されません」という質問を頂きました。

具体的には、月別アーカイブ・日別アーカイブを再構築すると、それらの全てのアーカイブが最新のエントリー数件が表示されるという、トップページみたいな内容になってしまうようです。なおアーカイブページの URL は正常に生成されています。

この不具合は 3.31 で改修されています。お手持ちの Movable Type を最新版にバージョンアップしてください。
また以降の内容は過去のものです。

この問題について、Coffee Time さんから、MTEntries タグにデフォルトテンプレートと同様の sort_by 属性および sort_order 属性を付与し、

<MTEntries sort_by="created_on" sort_order="ascend">

と変更することで正常に生成されるという情報を頂きました（関連エントリー：3.3用テンプレ追加修正）。ありがとうございました。

不具合が発生した方から頂いた情報では、問題が発生するのは 3.2 からのアップグレードのみで、正規の手順でも発生しています。DBには依存しないようです。詳細はMovable Type 3.3 テンプレートのコメント欄をご覧ください。

なお新規インストールで公開テンプレートの月別アーカイブおよび日別アーカイブが正常に表示されることは確認しています。また同じアップグレードを行ってもアーカイブが問題なく生成される方もいらっしゃるようです。

ということで、今後 3.2 から 3.3 へのアップグレードに伴って月別・日別アーカイブが正常に生成されない場合は上記の修正を行ってください。この不具合に関して、コメント・トラックバック等で情報頂ければ幸いです（製品の仕様であれば記事を訂正します）。

Batches?! We don't need no stinkin batches... で Movable Type のいろいろなタイプのバナー（下記）が公開されています。

元記事で表示されている画像をダウンロードするか、画像をまとめたアーカイブリンクからダウンロードしてください。「直リンクはご遠慮ください」ということも書かれています。

上記画像にマウスをあてるとツールチップでファイル名を表示するようにしています。アーカイブリンクからダウンロードされた方は、ファイルと画像の対応の確認にご利用ください。mtpoweredby-d.gif は正常に表示されないので除外しています。

3.2 まで慣れ親しんできたバナー（mt-static/images/powered.gif）

は

に変わったようです。

Movable Type 3.3 テンプレートを公開します。下記のリンク先よりテンプレートアーカイブをダウンロードしてお使いください。

Movable Type テンプレート

上記のリンクは Movable Type 3.2 用のテンプレートを公開しているエントリーですが、カスタマイズ内容がほぼ同じですので、そのまま利用させて頂くことにしました。

なお、テンプレートのご利用および継続的なメンテナンス等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

１．3.2 テンプレートからの変更点

3.3 MovableType テンプレートは 3.2 MovableType テンプレートをそのまま流用しており、3.3 の機能追加部分について一部変更しています。変更点は下記の通りです。
3.2 用の公開テンプレートをお使いの方で、3.3 にアップグレードされた場合は下記の内容を参考に修正するか、3.3 用公開テンプレートに入れ替えてください。

１．１ エントリー表示部にエントリー・タグ関連のMTタグを追加

3.3 の新たな機能としてエントリー・タグが追加されました（詳細は「Movable Type 3.3 エントリー・タグ詳説」をご覧ください）。これに伴い、メインページ・各アーカイブ（カテゴリー／日付／エントリー）のエントリー表示部にエントリー・タグ関連のMTタグを追加しました。3.2 テンプレートとの差分は下記の通りです。

3.2

　　　　　　：
<!-- エントリー -->
<div class="entry-content">
   <div class="entry-body"><$MTEntryBody$></div>
 
   <!-- 追記 -->
   <MTEntryIfExtended>
   <div class="entry-more">
      <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
   </div>
   </MTEntryIfExtended>
</div><!-- /entry-content -->
　　　　　　：

3.3

　　　　　　：
<!-- エントリー -->
<div class="entry-content">
   <div class="entry-body"><$MTEntryBody$></div>
 
   <!-- 追記 -->
   <MTEntryIfExtended>
   <div class="entry-more">
      <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
   </div>
   </MTEntryIfExtended>
 
   <!-- タグ -->
   <MTEntryIfTagged>
   <div class="entry-tags">
      <h4 class="entry-tags-header">タグ:</h4> 
      <ul class="entry-tags-list">
      <MTEntryTags>
         <li class="entry-tag"><a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName></a></li>
      </MTEntryTags>
      </ul>
   </div>
   </MTEntryIfTagged>
 
</div><!-- /entry-content -->
　　　　　　：

１．２ インデックステンプレートのサイドバーにタグ・クラウドを表示

同じく、インデックステンプレートのサイドバー（検索フォームの下）に下記のタグクラウド表示用のタグを追加しました。

<!-- タグクラウド開始 -->
<div class="sidetitle">
Tag Clouds
</div>
 
<div class="side">
<ul id="tags">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
<!-- タグクラウド終了 -->

各アーカイブテンプレートにはこのMTタグをセットしておりません。理由は「Movable Type 3.3 エントリー・タグ詳説」の最後をご覧ください。

１．３ カテゴリー・アーカイブに前後カテゴリーリンクを追加

カテゴリー・アーカイブでの前後カテゴリーリンクが表示可能になったことに伴い、中央カラム上部に前後のカテゴリーリンクを追加しました。3.2 テンプレートとの差分は下記の通りです。

3.2

　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<MTEntries>
<$MTEntryTrackbackData$>
　　　　　　：

3.3

　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<!-- リンク -->
<p class="content-nav">
   <MTCategoryPrevious><a href="<$MTCategoryArchiveLink$>">« <$MTCategoryLabel$></a> | </MTCategoryPrevious>
   <a href="<$MTBlogURL$>">メイン</a>
   <MTCategoryNext>| <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> » </a></MTCategoryNext>
</p>
 
<MTEntries>
<$MTEntryTrackbackData$>
　　　　　　：

１．４ 検索結果テンプレートを全面追加

3.3 では全面追加した検索結果テンプレートに差し替えてください。3.2 の検索結果テンプレートではエントリー・タグの検索結果を表示することができません。

１．５ エントリーの投稿者情報の投稿者名の有無判定用MTタグを追加

5.の補足です。3.2 のテンプレートでは投稿者名に MTEntryAuthorDisplayName を利用しており、3.3 でも同じMTタグを利用していますが、3.3 では

メイン・メニュー > システム・メニュー > 投稿者 > [投稿者名]

の「表示名」が空き文字列になっており、この部分を設定しないと投稿者名が表示されません。設定されていない場合、不適切な表示になるため、判定用タグを追加しました。
3.2 テンプレートとの差分は下記の通りです。

3.2

   <!-- 投稿者情報開始 -->
   <div class="entry-footer">
Posted by <$MTEntryAuthorDisplayName$> at <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
 | Category : <MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a></MTEntryCategories>

3.3

   <!-- 投稿者情報開始 -->
   <div class="entry-footer">
Posted<MTIfNonEmpty tag="EntryAuthorDisplayName"> by <$MTEntryAuthorDisplayName$></MTIfNonEmpty> at <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
 | Category : <MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a></MTEntryCategories>

１．６ テンプレート修正に伴いスタイルシートの修正

下記の青色を追加しています。

#search-options,
input {
    padding: 1px;
    font-size: 12px;
}
　　　　　　　： 
/* タグ */
.entry-tags-header,
.entry-tags-list,
.entry-tag {
    display: inline;
    font-size: 12px;
}
.entry-tags-list { 
    list-style:none;
    padding-left: 5px;
}
 　　　　　　　：
/* サイドメニュー(タグクラウド用) */
ul#tags {
    margin-top: 5px;
    padding-left: 0;
    list-style: none;
}
ul#tags .module-list-item {
    display: inline;
}
ul#tags li.taglevel1 {
    font-size: 13px;
font-weight: bold;
}
ul#tags li.taglevel2 {
    font-size: 13px;
}
ul#tags li.taglevel3 {
    font-size: 12px;
}
ul#tags li.taglevel4 {
    font-size: 11px;
}
ul#tags li.taglevel5 {
    font-size: 10px;
}
ul#tags li.taglevel6 {
    font-size: 9px;
}

２．既存のバグ・不具合の修正

テンプレートの既存バグおよび不具合について併せて修正しています。

1. エントリー・アーカイブの tabindex 値の修正
2. サイドバーの「最近のコメント」に lastn 属性を追加

1.はコメントフォームをタブキーによって入力項目を移動する際に途中でサイドバーの検索フォームにジャンプしてしまう不具合を修正したものです。

2.は各テンプレート（特にエントリー・アーカイブ）における再構築のパフォーマンス改善のための修正です。この修正を行ったため「最近のコメント」は新着エントリー5件のコメントしか取得できなくなります。新着コメントを正確に取得するためにはプラグインのご利用をお勧めします。
プラグインのご利用については下記の記事を参考にしてください。

• MTCollate を使って「最近のコメント」を表示する
• The blog of H.Fujimoto：最近のコメント／トラックバックをエントリーとともに表示するプラグイン(改良版)

３．月別アーカイブページ・日別アーカイブページが正常に生成されない場合

「Movable Type 3.3 アップグレードによる月別アーカイブ・日別アーカイブの不具合」をご覧ください。

2006.07.03 追記
３項を追加しました。