小粋空間  -  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>