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

当サイトで公開中のテンプレートで、リキッドレイアウトの場合にサイドバー（または中央カラム）の背景色を設定する方法です。 現在公開中のスタイルシート生成ツールではリキッドレイアウトの背景色を設定することができませんので、とりあえずこのエントリーで変更方法をお知らせします。設定することでスクリーンショット（左）のような背景色を表示させることができます。

単純に考えると、スタイルシートのサイドバー用セレクタ（#links-left/#links-right）に background プロパティ（リストの青色部分）

.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}

を設定すれば済みそうですが、top プロパティ、left（または right ）プロパティでサイドバーの情報表示位置を決めてしまっているため、このままの状態で background プロパティを与えても、左端（または右端）および中央カラムの間にあるマージン部分には背景色が反映されません。また absolute 指定で配置しているため、サイドバーの情報がある部分までしか色が設定されません（こちらの方が致命的）。 #links-left（#links-right）に background プロパティを設定した場合のサンプルをスクリーンショット（左）に示します。

ということで、ここでは

1. body 要素全体に背景色を設定
2. 中央カラムの背景色を設定

という指定を行い、サイドバーに背景色がついているように見せる方法をご紹介します。ここではサイドバーの背景色を変更していますが、中央カラムにも背景色（白）を設定しますので、この配色を反転させれば中央カラムのみに背景色を設定することも可能です。

スタイルシートに下記の青色部分を追加してください。

3カラムレイアウトの場合

body.layout-three-column-liquid {
    background-color: #ffffe0;
}
 
/* 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;
    background-color: #ffffff;
}

2カラムレイアウト（右サイドバー）の場合

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

2カラムレイアウト（左サイドバー）の場合

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

3つのレイアウトに対してまとめて設定したい場合

body.layout-three-column-liquid,
body.layout-two-column-liquid-right,
body.layout-two-column-liquid-left {
    background-color: #ffffe0;
}
.layout-three-column-liquid #content,
.layout-two-column-liquid-right #content,
.layout-two-column-liquid-left #content {
    background-color: #ffffff;
}

というCSSをそれぞれ追加してください。

サンプルでは #ffffe0 という赤色部分が背景色の設定ですのでお好きな色を設定してください。

参考にさせて頂いたのは下記のサイトです。ありがとうございました。

• 1976design.com：Easy CSS drop shadows
• A List Apart：CSS Drop Shadows
• nlog(n)：アップロードした画像に影をつけるには
• POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる
• 今日の覚え書き：cssの設定で自動的に画像に影を付ける
• 花と写真とblogと。：画像に影をつけてみる。

最初の1976design.com等で図を用いて解説されているので、仕組みがお分かりになるのではないでしょうか。

１．画像のHTML記述方法

下記のように img 要素を span 要素で括り、class 属性 "shadow" を付与します。span 要素の代わりに div 要素でも構いませんが、インライン要素の方が色々と都合がいいかも？と思い、ここでは span 要素で括ってみました。p 要素でもOKです。

<span class="shadow"><img src="hogehoge.jpg" alt="hogehoge" /></span>

２．ドロップシャドウ用背景画像のダウンロード

当サイトでは用意しておりませんのでPOCHIKING*：画像に自動的に影をつけてテキストを回り込ませるからダウンロードしてください。ダウンロードしたら任意のディレクトリ（FC2ブログは固定ですね）へアップロードしてください。

３．スタイルシートの追加

スタイルシートに下記の設定を追加します。色々な方法があるようですので他のサイトの内容もお試しください。

.shadow {
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}
 
.shadow img {
    position: relative;
    left: -5px; /* 画像を左へ移動 */
    top: -5px; /* 画像を上へ移動 */
    padding: 5px; /* 画像枠 */
    background: #ffffe0; /* paddingを設定した場合の背景色 */
    border: 1px solid #999999; /* 画像の枠線 */
}

背景画像のパスは、２項でアップロードしたドロップシャドウ用背景画像のパスまたはURLを指定してください。

表示については Windows 2000/XP+IE/Firefox/Operaで確認しております。なお画像枠のpaddingについて、当サイトではIEでは正常に表示されておりませんので予めご了承ください（試験サイトで作ったサンプルでは等しく表示されましたので、CSSの別の設定と干渉しているかもしれません）。IEで画像枠を表示する場合は標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するを参照ください。

４．その他

いろいろ試していて気がついた点をいくつか。

• div で括るときは img タグの間に改行がない方が良いみたいです。
• やや上・左よりになるので、位置補正のため下記のように magrin プロパティを .shadow セレクタに設定すると良いでしょう。値は試しながら修正してください。

.shadow {
    margin: 10px 0 0 5px;
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}

2006.03.15 追記
IEで画像枠を表示する場合の記述を追加しました。

１．CMS.pm の修正

エントリー一覧ではパーマリンク情報を取得していないため、これを取得できるよう、lib/MT/App/CMS.pm をダウンロードし、下記のパッチをあてます。パッチのあて方についてはパッチをあてる（その1：適用方法）をご覧ください。パッチがよく分からない＆面倒という方はパッチをあてる（その1：適用方法）の４項をご覧ください。

--- CMS.pm.bak  Thu Jan 29 23:24:40 2006
+++ CMS.pm      Thu Jan 29 23:26:58 2006
@@ -5038,6 +5038,7 @@
         $row->{author_name} = $author ? $author->name : $app->translate('(author deleted)');
         $row->{category_name} = $obj->category ? $obj->category->label : '';
         $row->{title_short} = $obj->title;
+        $row->{entry_permalink} = $obj->permalink;
         if (!defined($row->{title_short}) || $row->{title_short} eq '') {
             my $title = remove_html($obj->text);
             $row->{title_short} = MT::I18N::substr_text($title||"", 0, MT::I18N::const('DISPLAY_LENGTH_EDIT_ENTRY_TITLE')) . '...';

パッチをあてた後はアップロードして元の CMS.pm に上書きしてください。

２．エントリーリスト表示用テンプレートを修正する

BigPAPI用プラグインを利用する方法と、テンプレートを直接修正する方法の2通りを紹介します。２．１項または２．２項のいずれかお好きな方を選んでカスタマイズしてください。

２．１ BigPAPI用プラグインを利用する

２．１．１ BigPAPI プラグインのダウンロード

注：すでに BigPAPI プラグインをお使いの方は、２．１．１項および２．１．２項の作業をスキップして２．１．３項に進んでください。
下記のサイトより BigPAPI のプラグインをダウンロードします。Download のリンクまたは、Plugin Code のリンクをクリックしてください。

staggernation.com：BigPAPI Plugin for Movable Type

２．１．２ BigPAPI プラグインのアップロード

Download のリンクをクリックした場合は、アーカイブを解凍した中にある BigPAPI.pl を、Plugin Code のリンクをクリックした場合は、保存した BigPAPI.pl をそのまま plugins ディレクトリにアップロードします。

２．１．３ リンク表示用プラグインのダウンロード

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

DisplayEntryTitleAndPermalink.zip

DisplayEntryTitleAndPermalink.lzh

２．１．４ リンク表示用プラグインのアップロード

アーカイブを解凍して、中にある DisplayEntryTitleAndPermalink.pl を plugins ディレクトリにアップロードします。なおこのプラグインでは管理画面のエントリーリストのタイトルを全て表示するプラグインの機能も入っています。
注：管理画面のエントリーリストのタイトルを全て表示するプラグイン DisplayEntryTitle.pl をアップロードしている方は必ずこのプラグインに差し替えてください。

２．２ テンプレートを直接修正する

tmpl/cms/entry_table.tmpl をダウンロードし、任意のエディタで開き、77行目に青色部分を追加します。修正後、元のディレクトリにアップロードします。修正前に必ずバックアップをとっておきましょう。

<TMPL_IF NAME=VIEW_EXPANDED><strong><TMPL_VAR NAME=TITLE_LONG></strong>&nbsp;<a href="<TMPL_VAR NAME=ENTRY_PERMALINK>"><img src="<TMPL_VAR NAME=BLOG_URL>mt-static/images/status_icons/link.gif" alt="<TMPL_VAR NAME=ENTRY_PERMALINK>" width="16" height="9" /></a><TMPL_IF NAME=EXCERPT> &mdash; <TMPL_VAR NAME=EXCERPT></TMPL_IF><TMPL_ELSE><TMPL_IF NAME=HAS_EDIT_ACCESS><TMPL_IF NAME=IS_POWER_EDIT><input name="title_<TMPL_VAR NAME=ID>" value="<TMPL_VAR NAME=TITLE ESCAPE=HTML>" /><TMPL_ELSE><a href="<TMPL_VAR NAME=SCRIPT_URL>?__mode=view&amp;_type=entry&amp;id=<TMPL_VAR NAME=ID>&amp;blog_id=<TMPL_VAR NAME=BLOG_ID>"><TMPL_VAR NAME=TITLE_SHORT></a>&nbsp;<a href="<TMPL_VAR NAME=ENTRY_PERMALINK>"><img src="<TMPL_VAR NAME=BLOG_URL>mt-static/images/status_icons/link.gif" alt="<TMPL_VAR NAME=ENTRY_PERMALINK>" width="16" height="9" /></a>

2ヶ所に同じものを追加しているのは、エントリー一覧の左下にある「画面の表示設定を変更」のカスタマイズで、「コンパクト」と「拡張」の両方に対応させているためです。

３．新しいウィンドウで開く場合

本カスタマイズでは同一ウィンドウでリンクを開く設定になっています。新しいウインドウで開く場合は下記の修正を行ってください。

２．１項ご利用の方はプラグイン DisplayEntryTitleAndPermalink.pl、２．２項ご利用の方は tmpl/cms/entry_table.tmpl の

<a href="<TMPL_VAR NAME=ENTRY_PERMALINK>">

を検索して、taret 属性（青色部分）

<a href="<TMPL_VAR NAME=ENTRY_PERMALINK>" target="_blank">

を追加してください（いずれも修正部分が2ヶ所あります）。
なお本設定を行わなくてもリンクを右クリックすることで新しいウィンドウに表示することは可能です。

４．リンク画像が表示されない場合

リンクの画像は

mt-static/images/status_icons/link.gif

を利用していますが、mt-static のパスは index.html があるディレクトリを起点としています。もし cgi-bin 等に mt-static を配置している場合は正常に表示されない可能性がありますので、下記の修正を行ってください。

２．１項ご利用の方はプラグイン DisplayEntryTitleAndPermalink.pl、２．２項ご利用の方は tmpl/cms/entry_table.tmpl の

src="<TMPL_VAR NAME=BLOG_URL>mt-static/images/status_icons/link.gif"

の赤色部分を

src="[mt-staticまでのURL]/mt-static/images/status_icons/link.gif"

に変更してください（いずれも修正部分が2ヶ所あります）。

現在公開中のMovable Type 3.2 テンプレート（for StyleCatcher）に、カレンダーを設置する場合のカスタマイズです。スタイルシートをすでにカスタマイズされている方は下記の手順で実施してください。なおリポジトリのスタイルシート内容もカレンダー追加を想定して先ほど修正致しました（不具合ありましたらご連絡ください）。

１．カレンダーテンプレートの設定

カレンダーを表示したページのサイドメニュー（デフォルトテンプレートでサイドメニューがあるのはトップページだけですが）に、下記のタグを追加します。ここでは Movable Type ユーザー・マニュアルに記述されたカレンダーを使っています。

<div class="module-calendar module">
<h2 class="module-header">カレンダー</h2>
<div class="module-content">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar">
<caption><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center">Sun</th>
<th abbr="Monday" align="center">Mon</th>
<th abbr="Tuesday" align="center">Tue</th>
<th abbr="Wednesday" align="center">Wed</th>
<th abbr="Thursday" align="center">Thu</th>
<th abbr="Friday" align="center">Fri</th>
<th abbr="Saturday" align="center">Sat</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td <MTCalendarIfToday> bgcolor="#EEEEEE" </MTCalendarIfToday> align="center">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</div>

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

デフォルトのスタイルではうまく表示されないため、下記の青色部分の内容をスタイルシート（styles-site,css または リポジトリの classic.css）に追加します。ここでは styles-site.css への追加イメージを掲載しておきます。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/../base-weblog.css);
@import url(/../classic.css);
/* end StyleCatcher imports */
 
.module-calendar .module-content {
    margin: 0 -10px 0 2px;
    _margin: 0 -2px 0 -3px;
    padding-bottom: 5px;
    font-size: 9px;
}
.module-calendar .module-content th {
    padding-bottom: 3px;
    font-size: 9px;
    _font-size: 8px;
    width: 20px;
}
.module-calendar .module-content td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
    _line-height: 100%;
}

なお style-site.css に追加した場合、他のスタイルに切り替えた際に追加部分が消去されると思いますので、classic.css への追加を推奨します。

Serene Bach / sb でツリー化スクリプトを利用した場合、個別エントリー用HTMLでスクリーンショットのようにサブカテゴリーリストのツリーが正常に表示されない（リストマークが二重で表示される）という情報を頂きました。

Serene Bach / sb の個別エントリー用HTMLではサブカテゴリーツリーにJavaScriptを使っておりまして、ツリー化スクリプトがそのJavaScriptをうまく解析できていなかった、というのが原因です。具体的には、サブカテゴリーリストで初回に出現する要素が ul であればツリー表示用の class 属性を追加していますが、個別エントリー用HTMLのサブカテゴリーツリー表示スクリプトでは script 属性が初回に出現し、そのケースでの処理がもれていました（つまりツリーが表示されない）。

修正したスクリプトに差し替えましたので、下記のリンク先にある maketree.js をダウンロードしてください。

download

なお修正箇所は下記の通りです。

--- maketree.js.bak     Wed Jan 25 23:54:52 2006
+++ maketree.js Wed Jan 25 23:55:49 2006
@@ -27,9 +27,12 @@
     }
 
     // 最初の要素がULの場合, class属性(tree)を設定
-    if(nodes[0].nodeName == 'UL'|| nodes[0].nodeName == 'ul'){
-        nodes[0].setAttribute('class', 'tree');
-        nodes[0].setAttribute('className', 'tree');
+    for (var i = 0; i < nodes.length; i++) {
+        if(nodes[i].nodeName == 'UL'|| nodes[i].nodeName == 'ul'){
+            nodes[i].setAttribute('class', 'tree');
+            nodes[i].setAttribute('className', 'tree');
+            break;
+        }
     }
 
     for (var i = 0; i < nodes.length; i++) {

ツリー化スクリプトをver1.05以降のものに差し替えることで、個別エントリー用HTMLページでも左のように正常に表示されるようになります。

しんしんと

先日エントリーしたパッチをあてる（その1：適用方法）で「patch コマンド配布元のサイト（プログラマの道具箱）がデッドリンクになっています」とお伝えしましたが、サーバ移転されたようでした。

タイトルの新サイトは下記にあります。

ソフトウェア工房α

patch コマンドはサイト内にある下記のページからダウンロードできます（元エントリーのリンクも修正済）。

プログラミング・ツール（移植ソフト）

patch コマンドを Cygwin から取得する作戦もありますが、そもそも Cygwin は Windows 上に UNIX（Linux）の擬似環境を構築するアプリケーションのためのツールで、インストールに時間がかることやアンインストール手順がやや面倒（らしい）という理由から、patch コマンドを利用するだけであれば上記サイトからの入手をお勧めします。

Movable Type 用に公開しているサイドメニューのツリー化スクリプト（改）をSerene Bach / sb で適用する方法です。
なお当サイトで公開しているツリー化スクリプトを適用すると、ツリーがきれいにつながって表示されないという情報を頂いておりますので、その点に関しましては８項を参照ください。

注：本カスタマイズと「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

１．maketree.js ダウンロード

下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください（scriptタグの設定方法につきましてては３項に記します）。

２．maketree.js 配置

ダウンロードした maketree.js を index.html と同じディレクトリにアップロードしてください。

３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定

ベースHTMLテンプレート（個別エントリー用HTMLテンプレートを使っている方は両方）のサイドバーのメニューリストのMTタグを修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定している独自タグで、青色部分が新たに追加する部分です。赤色は任意の名称を設定します（タグの id 属性とスクリプト部分の名称が一致するように設定してください）。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。

Latest Entries

<!-- BEGIN latest_entry -->
<div class="sidetitle">Latest Entries</div>
<div class="side" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments

<!-- BEGIN recent_comment -->
<div class="sidetitle">Recent Comments</div>
<div class="side" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->
 
<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>

Recent Trackbacks

<!-- BEGIN recent_trackback -->
<div class="sidetitle">Recent Trackbacks</div>
<div class="side" id="trackbacklist">{recent_trackback_list}</div>
<!-- END recent_trackback -->
 
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories（他と若干設定内容が異なります）

<!-- BEGIN category -->
<div class="sidetitle">Categories</div>
<div class="side"><div id="categories">{category_list}</div></div>
<!-- END category -->
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

Archives

<!-- BEGIN archives -->
<div class="sidetitle">Archives</div>
<div class="side" id="monthlylist">{archives_list}</div>
<!-- END archives -->
 
<script type="text/javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>

Links

<!-- BEGIN link -->
<div class="sidetitle">Links</div>
<div class="side" id="linklist">{link_list}</div>
<!-- END link -->
 
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>

４．maketree.js インクルード文挿入

ベースHTMLテンプレート（個別エントリー用HTMLテンプレートを使っている方は両方）の </head> の直前に下記のタグを追加してください。スクリプトの文字コードとブログの文字コードが異なる場合は青色の charset 属性を指定する場合は maketree.js の文字コードを指定してください。

<script type="text/javascript" src="{site_top}maketree.js" charset="utf-8"></script>

５．画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

６．画像の配置

ダウンロードした画像を index.html と同じディレクトリにアップロードしてください。

７．スタイルシート追加

スタイルシート（style.css）の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0px!important;
    padding: 0px!important;
}
ul.tree li {
    margin: 0px!important;
    padding: 0px 0px 0px 16px!important;
    background-image: url(tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

赤字部分については、先ほどダウンロードした画像のファイル名にそれぞれ変更するか、画像のファイル名をスタイルシートに設定されているファイル名に修正してください。また上の設定はスタイルシートと同じディレクトリ（=ローカル・サイト・パス）に画像を配置した場合です。異なるディレクトリに配置する場合は http://? のようにURLで画像を指定してください。

８．不具合の修正

Movable Type の設定をそのままお使いの場合、冒頭に記した通りツリーがきれいにつながって表示されません。
これを修正するにはスタイルシートに

ul.tree li {
　　　：
    background-position: 0 0;
　　　：
}

を追加することできれいに表示されるようになります（７項のCSSには設定済です）。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

2007.02.06 追記
４項の記述を修正しました（「<head>～</head> の間」→「</head> の直前」）。また、「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合の注意書きを追加しました。

以前、カスタマイズを色々紹介する中で「パッチをあてる」という作業の具体的な方法について、認識不足のため誤った説明をしておりましたので、その適用方法についてお詫びを兼ねて改めて紹介したいと思います。ここでは Windows での作業について説明します。

１．パッチとは

「パッチ」はプログラムの一部を修正することです。「パッチワーク」を思い出して頂ければ分かりやすいと思います。「パッチファイル」はプログラムを修正するための差分が記述されたファイルです。
「パッチをあてる」というのは実際にプログラムを修正する行為を指します。

２．patch コマンドの準備

パッチの適用にあたっては patch コマンドを使用します。Linux ではデフォルトで用意されているようですが、Windows では用意されていません。
ということで、まず patch コマンドを入手します。

patch コマンドは Cygwin・ソフトウェア工房α・Vector 等で配布されていますが、ここではソフトウェア工房αから入手します。

プログラミング・ツール（移植ソフト）に表示されている、

patc254w.zip

をクリックし、解凍した中にある

patch.exe

をPCの任意のディレクトリに配置します。C:\WINDOWS 配下または C:\WINDOWS\system32 配下に
配置できれば、後述するMS-DOSコマンドプロンプトからの起動でパスを指定せずに実行することができます。
配置できない場合はとりあえず C:\ 配下においておきましょう。

３．パッチをあてる

パッチをあてる作業は、パッチファイル（またはパッチとなるテキスト）とパッチをあてる元のプログラムを用意し、その2つが用意された状態で patch コマンドを実施すると元のプログラムが書き換えられます。
以下、順を追って作業内容を説明します。

３．１ パッチファイルを保存する

下記のような内容のパッチファイルがあると想定します。

--- Util.pm.bak Fri Jan 06 14:19:44 2006
+++ Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
-        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {
+        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

これは Movable Type の lib/MT/Util.pm の 404 行目あたりにある、エントリー保存時、エントリーに改行を付与する処理を修正するパッチで、プログラム内に改行タグを付与する基準となるタグが列挙されており、そのタグを一部変更するものです。
具体的な変更内容は、行頭に "-" のある行を "+" がある行に変更します。つまり並んでいるタグから、table/ul/ol/dl/blockquote が取り除かれます。

さて、ここで行う作業ですが、C:\ 配下に work ディレクトリを作り、patch.txt というファイル名で上記パッチの内容をマウスコピーして保存します。最初からファイルになっている場合はそのまま C:\ 配下に保存します。
実際に作業を行う場合、ディレクトリ・ファイル名は任意の名称で構いません。
注：ファイルの最後の行（上の例では "}"）の末尾には必ず改行を含めてください。

３．２ パッチをあてるファイルを配置する

次に、パッチをあてる元のファイル lib/MT/Util.pm を先ほどの work ディレクトリにコピーします。ファイル名は Util.pm のままで結構です。
興味のある方は、このファイルを任意のエディタで開き、404 行目がパッチファイルの "-" と同じ内容であることを確認しましょう。

３．３ パッチをあてる

MS-DOS コマンドプロンプトを起動し、

C:¥>cd work

で、work ディレクトリへ移動し、patchコマンド

C:¥work>patch < patch.txt

を実行します。この実行イメージは patch コマンドが C:\WINDOWS 配下または C:\WINDOWS\system32 配下にある場合（つまり patch コマンドのパスが認識されている場合）を想定しています。コマンドが認識されない場合は、patch コマンドが置かれているパスを記述します（パスの設定する方法もありますがここでは省略します）。
C:\ 直下に patch を置いている場合は

C:¥work>C:¥patch < patch.txt

とします。

コマンド実行が成功すると画面の最後に

patching file Util.pm

と表示されます。これで完了です。
これで Util.pm の 404 行目が変更されていますので、この変更された Util.pm を元のディレクトリに上書きしてください。なお、patch コマンドに -p0 というオプションがついている場合がありますが、この使用方法については「パッチをあてる（その3：patchコマンドの-pオプションについて）」で説明します。

なお、以前の説明では、Utll.pm を任意のエディタで開き、「"-" の部分を削除して "+" の部分を追加する」という内容を記述してました。正常に動作すれば結果オーライなのですが、パッチの適用方法について適正な方法を最初にお伝えできていなかったことについては反省しております。

３．４ パッチをはずす

３．３項であてたパッチを外したい（元に戻したい）場合は、MS-DOS コマンドプロンプトで

C:¥work>patch -R < patch.txt

と入力してください。成功すると画面の最後に

patching file Util.pm

と表示されます。

４．パッチが分からない方＆面倒な方へ

要は、パッチの行頭に「+」が記された行を追加して、「-」の行を削除すればOKです。３．１項のパッチを例に示します。赤色が削除行で青色が追加行です。この変更内容と３．１のパッチの表示を見比べ、どこを修正すればよいかを把握してください。

修正前

--- Util.pm.bak Fri Jan 06 14:19:44 2006
+++ Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

修正後

--- Util.pm.bak Fri Jan 06 14:19:44 2006
+++ Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

なおこの方法による修正の場合、事前に該当ファイルのバックアップをとっておきましょう。修正を誤るとMovable Type が正常に動作しなくなる可能性があります（失敗した場合は修正前のファイルに戻せば良いので心配することはありません）。

以上です。
参考サイトは下記です。ありがとうございました。

• diff/patch Tips
• Azrael：Tagwire、MT-XSearch、Cygwin導入メモ
• プログラマの道具箱

2007.04.25 追記
ファイルを保存する際の注意事項を追加しました。

背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサンプルも作ってみました。

１．背景を固定する

CSSの body 要素に背景画像を指定し、背景画像の指定に対して下記のように青色のプロパティ background-attachment プロパティを追加します。このプロパティの値が fixed の場合、画像が固定表示されます。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

公開テンプレートの場合、この設定を styles-site.css の一番下に追加してください（場所はどこでも大丈夫だと思います）。画像の配置位置は background-position プロパティで指定します。上のリストでは「右下」を指定していますが、プロパティの値は

水平方向：左：left／中央：center／右：right

垂直方向：上：top／中：center／下：bottom

のいずれかお好きなものを指定してください（"%"指定等、他の設定方法についてはここでは割愛します）。

また上のサンプルでは background-repeat プロパティで画像を繰り返し表示しない設定になっています。水平方向に繰り返し表示する場合は background-repeat プロパティに repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を指定してください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

２．他の背景に隠れないようにする

上記のサンプルでお分かりの通り、画像の上に表示される各オブジェクトに対し背景色を指定していると部分的に隠れてしまいます。固定レイアウトは画像の影も形もありません。これは日付やエントリー部分、固定レイアウトの場合は全体に背景色として「白」を指定しているため、画像が隠れてしまう訳です。

画像を隠さないようにするためには、該当のセレクタ（.entry）の background プロパティ（下記赤色）

.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
　　　　　　：
　　　　　（略）
　　　　　　：
}

を削除してください。
固定3カラムや固定2カラムの場合は、さらに下記の赤色部分を削除してください。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
　　　　　　　　：
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

３．画像を透過する

２項の設定でかなり画像の露出度が向上しましたが、日付やサイドメニュータイトルといった background を指定しているものについては隠れてしまっているのがお分かりになると思います。そこでさらに透過指定を行うことで、画像を日付やサイドメニュータイトルの下からうっすらと表示させることができます。

下記の filter プロパティおよび opacity プロパティ（青色部分）の追加で透過することができます（方法は他にも色々あると思いますがとりあえず）。

3カラムリキッドレイアウトの場合

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column-liquid #links-left{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
.layout-three-column-liquid #links-right{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

3カラム固定レイアウトの場合

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column #links-left,
.layout-three-column #links-right {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」が透明度を表しますのでお好きな比率に調整してください。また2カラムの場合は設定するセレクタが異なります（layout-two-column や layout-two-column-liquid-left 等）ので、ご注意ください。
なお半透明にする詳細については、背景を半透明にするを参照ください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。
これぞまさしく、

現在のドメイン取得・公開から約半年が経過しました。旧ドメインはダイナミックDNSの無料ドメインだったのでそのまま使用しており、旧ドメインへのアクセスは新ドメインに .htaccess を利用してリダイレクトしていたのですが、SEOを考慮して停止することに致しました（事後報告で申し訳ありませんがすでに停止しています）。
サイトを検索すると 「meta 要素での新しいURLへの誘導なら大丈夫」らしいですが、現状はとりあえず止めています。

このため、旧ドメインへのリンクが全てデッドリンクとなります。考えられる影響範囲は下記の通りですので、申し訳ございませんが必要に応じて適宜変更くださいますよう、よろしくお願い致します。

• ブログ記事からのリンク（2005年7月10日以前）
• RSS
• クレジットバナー（現行のサイトから画像をダウンロード・ご自身のサイトへアップロードし、そちらへリンクをお願い致します）
• ブックマーク類

一つ目の問題については meta タグを利用した誘導を実施するかも知れません。

スクリーンショットのように、指定したURLが存在しない場合等にしばしば表示されるエラーページですが、「ErrorDocument ディレクティブ」というものを利用することでオリジナルのエラーページを表示することができるようになります。

エラーページに関するご質問を頂きましたので、本エントリーにて設定方法をご紹介致します。とりあえず確認の意味も含めて当サイトもエラーページを作ってみました。

１．エラー表示用のHTMLファイルを作る

任意のエディタで、「404.html」のファイル名でHTMLファイルを作成し、index.html が置かれているディレクトリへアップロードします。

Movable Type の場合

プロフィールのページを作るを利用して作るとブログと同じようなデザインのファイルを簡単に作れます。ダイナミックパブリッシングをご利用であれば、システムテンプレートの「ダイナミックページ・エラー」が該当しますので、これを編集すれば以下の項目は全て不要です。

WordPress の場合

ご利用のテーマに「404 Not Found（404.php）」が含まれていれば、それをテーマエディタで編集するだけで、下記の設定は全て不要です。含まれていない場合は、index.php を 404.php というファイル名でコピーし、あとはテーマエディタでお好きな内容に変更しましょう。

設定後、ブラウザからこのファイルのURLを入力し、正常に表示されることを確認しましょう。

２．.htaccess を作る

.htaccess は特殊なファイルで、指定したURLが存在しない場合にエラーページへジャンプさせるための設定を行います。

まず任意のエディタで下記の内容をコピーしてください。そしてこれを「.htaccess」という名前で保存します。Windows の場合、エクスプローラ上でこの特殊な名前に変更することはできませんので、ご注意ください。
また自宅サーバの方は .htaccess ではなく httpd.conf を開いて下記の設定を追加します（追加後、Apache の再起動をお忘れなく）。

ErrorDocument 404 /404.html

ErrorDocument ディレクティブの説明は下記にあります。

Apache HTTP サーバ：ErrorDocument ディレクティブ

行末の /404.html は相対パス（この書き方）または http 指定が可能です。/404.html としているのは .htaccess と同じディレクトリに配置するのでこのような設定にしています。エラー用ファイルを他のディレクトリに配置する場合は、ディレクトリ名をファイルの前に追加します。
なお初めて .htaccess を作る場合はこの1行しかありませんので、行末で必ず改行を入力してください。

３．.htaccess をアップロードする

作成した .htaccess を index.html が置かれているディレクトリへアップロードします。
パーミッションによって正常に動作しない場合があるようです。現在利用しているさくらインターネットでは「644」でOKでした。ロリポップは「604」のようです。

アップロードと同時にこの機能が動作しますので、存在しないURLをブラウザで指定して１項で作成したファイルが表示されることを確認してください。また index.html 等の存在するファイルも正常に表示されることを確認してください。
正常に動作しない場合は一旦ファイルを削除しましょう。

４．注意事項

サイト検索でみつけた内容を引用しておきます。
ロリポップ！レンタルサーバー - エラーページの変更では「エラーページで画像を使用する場合には、「 http://から始まるURL 」 で表示を行ってください」と書かれていました。これは「ErrorDocumentは、エラー発生時のページを基点にエラーページ表示を行なう」ためのようです。JavaScript や CSS を参照する場合も同様です。
また「404エラーページに限り?（中略）?ページの容量が１Kバイトを超えるように、ファイルを作ってください」ということです。 このことは先のErrorDocument ディレクティブにも「一般的にはエラーの文書を 512 バイトよりも多きくすると、MSIE は サーバが生成したエラーを隠さずに表示します」とあります。

５．その他のエラーも追加する

上記は404（指定したURLが存在しない）の場合のみの説明でしたが、401（認証エラー）/403（パーミッション異常）/500（CGIエラー等）のエラーも下記のような設定を追加することで表示することができます（当サイトでは404のみ）。

ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

この場合も行末では必ず改行を入力してください。

2007.02.25 追記
Movable Type ダイナミックパブリッシング・WordPress についての記述を追加しました。

以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと JavaScript を OFF にした場合、追記文章が読めないという不具合が残っていました（今更ですいません）。

もともとこのスクリプトのオリジナルはscriptygoddess：another revision to the show/hide scriptで、折りたたみを戻す時に指定したアンカー位置にずれないためのカスタマイズ方法を公開していました。その後エントリー・アーカイブでも折りたためますという記事を書いたのですが、当時はアクセシビリティまで考えが及んでおりませんでした。

このスクリプトをメインページ・カテゴリー・アーカイブ・月別アーカイブに導入されている場合は、JavaScript が OFF でもエントリー・アーカイブにジャンプするように作られています（オリジナルからそうなっています）。ただしジャンプした先のエントリー・アーカイブで折りたたみを導入していると読めなくなるケースが発生します。

このエントリーではその点も踏まえ、また 3.2-ja に合わせて過去の記事を書き直してみました。
追記が読めない状態はアクセシビリティ上良くないため、すでに導入されている方は、下記の２項の青色部分を追加されることをお勧めします。

１．JavaScript の追加

エントリー・アーカイブテンプレートの編集画面を開き、<head>～</head> の間に下記を追加します。

<script type="text/javascript">
<!--
function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else { 
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}
//-->
</script>

なお、テンプレートにスクリプトを直接埋め込むよりも、外部ファイルにした方が良いでしょう。

外部ファイルにする場合は、上記リストから先頭と末尾の script タグを削除し、任意のファイル名（拡張子は ".js"）で保存し、そのファイルを index.html があるディレクトリにアップロードします。またファイルの文字コードはブログの文字コードと一致させておく方が良いでしょう。
そしてテンプレートの <head>～</head> の部分に下記の1行を追加します。

<script type="text/javascript" src="<$MTBlogURL$>[ファイル名]"></script>

[ファイル名]の部分に保存したファイル名を設定してください。

２．テンプレートの修正

１項と同様、エントリー・アーカイブテンプレートの編集画面を開き、下記の赤色部分を探してください。

3.2/3.3 デフォルトテンプレートの場合

<div id="more" class="entry-more">
    <$MTEntryMore$>
</div>

公開テンプレートの場合

<MTEntryIfExtended>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</MTEntryIfExtended>

上記の赤色部分を下記の内容に書き換えます。

<noscript>
<$MTEntryMore$>
</noscript>
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

に変更します。青色の noscript タグで括った MTEntryMore が JavaScript がOFFの場合に表示される部分です。

JavaScript が動作しない場合、「続きを読む」のリンクは表示されっぱなしになりますですので、上記リストではリンクの上に追記を表示するようにしていますが、もう少し説明を加えて、

<noscript>
<$MTEntryMore$>
<p>下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。</p>
</noscript>

としておくと分かりやすいでしょう。

３．ブラウザの JavaScript を無効ににする方法

IEの場合は、[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]-[アクティブ スクリプト]の「無効にする」を選択してOK→OKをクリックします。Firefoxの場合は、[ツール]-[オプション]-[Web機能]-[JavaScriptを有効にする]のチェックを外してOKをクリックします。
いずれも再起動は不要です。

2006.08.23 追記
１項の説明を修正しました。

昨年の12月に車の修理や車検でお世話になっているカーショップから、

「今年の10月、車検じゃなかったですか？」

と電話がかかってきました。そういえば昨年から今年前半にかけて色々バタバタしていたこともあり、車検に出すことをすっかり失念。幸い車検が切れている間、乗りたくても乗れない状態だったのが不幸中の幸いでした。
とうことで年末に車検をお願いして、一昨日、無事に戻ってきました。

また、そこの社長さんから聞いて初めて知ったのですが、「自動車リサイクル法」なるものが昨年の1月から始まったようで（TVでも放映されていたようですがそれも知らず）、「その費用が車検費用に加算されています」とのことです。
約数千円かかっていましたが車検費用全体に比べると誤差の範囲です。

車検切れに気がついて駐車場の付近の車を見ると、フロントウィンドウに貼られているステッカー（検査標章）がどれも小さくなっていました。いつ頃か不明ですがそうなったようです（自動車検査法人：有効期間の更新）。 そういう訳でとりあえず記念に1枚撮っておきました。