小粋空間  -  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枚撮っておきました。

昨日エントリーしたLightbox JS で画像を表示するですが、Movable Type のアーカイブページ（カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ）で正常に動作しないようでした。すいません。

下記に対処方法を記しておきます。

１．lightbox.css / lightbox.js の修正

カテゴリー・アーカイブ／月別アーカイブ（日別・週別も同じ）／エントリー・アーカイブの各ページのパスが loading.gif のパスと異なるため、lightbox.js の193行目で下記の JavaScript エラーが発生し、正常に読み込めないようです。

objLoadingImage has no properties

とりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

を

var loadingImage = 'http://www.koikikukan.com/loading.gif';
var closeButton = 'http://www.koikikukan.com/close.gif';

に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。

またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。

#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }
 
    * html #overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
    }

lightbox.css の内容を styles-site.css に転記している場合（かつ普通に再構築対象にしている場合）や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。

２．エントリー・アーカイブの修正

エントリー・アーカイブは１項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。

CEFA::Blog：Lightbox JSを組み込んだのだけれど

caramel*vanilla：lightbox.jsでサムネイルをCOOLに拡大表示してみる

対処は、安直ですがエントリーアーカイブの onload イベントハンドラ（赤色部分）

<body class="…" onload="individualArchivesOnLoad(commenter_name);>

を一旦削除して、

<body class="…">

とし、エントリー・アーカイブの一番最後に

<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>

を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。

ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。

３．ローディング画像・背景画像が表示されない場合

１項で修正した loading.gif のURL、および overlay.png のURLをブラウザのアドレス欄に直接入力してください。画像が表示されない場合、設定したURLが誤っていますので、１項で設定したURLを修正してください。

2006.03.21 追記
１項の close.gif の設定、および３項を追記しました。

最近はコメント等のやりとりがないのでご存知ないかも知れませんが、我楽のサイト管理人Border.さんとはブログを始めて間もない頃からの古いお付き合いでして、年末にちょっとしたやりとりから「お会いしましょう」という話に。
あいにく年末はスケジュールが詰まっていたため「では来年」ということで、本日お会いすることになりました。

場所は船橋の某ダイニングバー。偶然入ったお店ながら良い雰囲気で、料理はどれも美味でした。
Border.さんはイメージ通りのナイスガイで知的な印象。しかも私に負けず劣らず渋い声の持ち主（笑）。気がつくと4時間余り経っており、ブログ・その他色々な話題で大変楽しい一時を過ごすことができました。ありがとうございました。

多分、いわゆる「ブロガー」と呼ばれる方とお会いしたのは初めてで、ブログが生活の一部としてすっかり定着してしまっている私としては、そういうことに関して普通に話題にできるのが自然に感じられました。
つまりブログが普及してきているといっても日常で話題にすることはない訳です。そういう意味では同じ境遇（笑）にいる方との接触は非常に刺激があり、ブログとの関わり方について色々と共感を得るものがありましたし、継続するためのモチベーションも向上したのではないかと思います。

という訳でまた機会をみつけて行きましょう。次はダジャレ連発しようかと。（冗）

サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。 ということでこのエントリーにてご紹介したいと思います。

2006.10.10 追記：機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。

０．動作

公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。
表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。

以下、このスクリプトの設定方法です。

１．ファイルのダウンロード

動作に必要なファイル（スクリプト・スタイルシート・画像）をダウンロードします。
まず下記のサイトへ進んでください。

Lightbox JS

表示されたページ一番下にある「DOWNLOAD」より下記のファイルをダウンロードできるようになってますので、それぞれのリンクをクリックしてください（IEであれば右クリックして「対象をファイルに保存」を選択）。

• lightbox.js - JavaScriptファイル
• lightbox.css - スタイルシート
• overlay.png - オーバーレイ表示するための背景画像
• loading.gif - ローディング中に表示する画像
• close.gif - 閉じるマーク画像

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

ダウンロードした全てのファイル・画像を index.html と同じディレクトリにアップロードします。

Movable Type に適用させる場合の修正
Lightbox JS の Movable Type での不具合を修正するを参照ください。

FC2ブログに適用させる場合の修正
FC2ブログではファイルのアップロード先が決まっているため、lightbox.js の36行目辺りにある記述に青色部分を追加します。

var loadingImage = 'file/loading.gif';

また、lightbox.css についても、下記のように最後から2行目の部分に青色部分を追加します。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file/overlay.png", sizingMethod="scale");

３．テンプレートの修正

lightbox.js を有効にするため、テンプレートの <head>～</head> の間に下記を追加します。

Movable Type の場合

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

Serene Bach / sb の場合

<script type="text/javascript" src="{site_top}lightbox.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/lightbox.js"></script>

またスタイルシートを読み込ませるために、light.css の中身を現在利用中のスタイルシートにコピー＆ペーストするか、下記のタグを <head>～</head> 追加します。挿入位置は現在のスタイルシートを読み込んでいる link 要素のすぐ下が良いでしょう。

Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />

Serene Bach / sb の場合

<link rel="stylesheet" href="{site_top}lightbox.css" type="text/css" />

FC2ブログの場合

<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" />

４．リンクの設定

Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。

<a href="hogehoge.jpg" rel="lightbox"><img src="thumbnail.jpg" alt="…" ></a>

これでリンクをクリックすればサンプルと同じ動作を行えるようになります。

５．不具合について

注：本項の内容は解消されているようです。
IEでは半透明の背景がページ全体をうまく覆うことができない場合があるようです。下記のサイトで修正方法が紹介されていますが、いくつかの試験サイトで設定したところ、IEでも正常に表示される時もありました（原因不明）。

えび日記：Ligthbox JSを組み込んでみたけど、ちょっとおかしいのでちょっといじる。

またOpera8では iframe 部分等に半透明の背景が適用されませんでした。Firefoxは正常に表示されるようです。

６．ツールチップの文字を修正する

元画像が表示されると「Click to close」というツールチップが表示されますが、この言葉を変更したい場合は、lightbox.js の309行目辺りにある

objLink.setAttribute('title','Click to close');

を

objLink.setAttribute('title','画像をクリックすると元の画面に戻ります');

という具合に変更します。日本語を設定する場合は、lightbox.js をブログと同じ文字コードで保存するか、

<script type="text/javascript" src="<$MTBlogURL$>lightbox.js" charset="Shift_JIS"></script>

と、スクリプトの文字コードを設定します。

７．Flash ムービーが背景画像に隠れない問題について

プログペット等の Flash は拡大画像を表示した際、背景となる PNG 画像の上に表示されるという問題があります。この問題を解消するには Lightbox JS でブログパーツ等の Flash を隠すカスタマイズを参照ください（動作を保証する内容ではありません）。

以上です。
２項のCSS修正についてはSmallStyle：Lightbox JS での 背景画像 (overlay.png) の配置場所を参考にさせて頂きました。またサンプル画像はEyesPicより頂きました。ありがとうございました。

2006.03.17 追記
７項を追加しました。また記述の一部を修正しました。

元日に公開したエントリー編集画面のHTMLタグ挿入ボタンの不具合を解消するプラグインですが、「以前に送ったトラックバックを確認」もトップにジャンプするという情報を頂きまして、色々リンクをクリックしているとヘルプページのリンクも同様の事象であることを確認しました。

ということでタグ挿入ボタンだけでなく、JavaScript のイベントハンドラを利用したリンクの不具合を全て解消するようにプラグインを修正致しました。下記から修正版のアーカイブをダウンロードできるようにしています（元エントリーのダウンロードリンクも修正しています）。InvalidateLinkOfInsertTag.zip または InvalidateLinkOfInsertTag.lzh をクリックしてアーカイブをダウンロードしてください。

InvalidateLinkOfInsertTag.zip

InvalidateLinkOfInsertTag.lzh

ダウンロードしたアーカイブを解凍して、中にある InvalidateLinkOfInsertTag.pl を plugins ディレクトリにアップロードしてください。アップロード完了後、エントリー編集画面を開いて各リンクをクリックした時に編集画面がトップに戻らなければOKです。

プラグインの詳細につきましては元エントリーを参照ください。

Windows エクスプローラでファイルやフォルダが大量にある中から、ひとつのファイルまたはフォルダを選択するのは、マウスホイールをぐりぐり回したり、スクロールバーを上下させて探したりと結構面倒です。
ここではキー入力で素早く選択できる技をご紹介します（選択したいファイルまたはフォルダ名がある程度分かっていることが前提です）。

例えば C:\WINSOWS のフォルダにある php.ini を選択する場合、エクスプローラで WINDOWS フォルダまで進み、一番上に表示されているファイルを選択状態にします。その状態で「p」とキー入力すればファイル名の1文字目が「p」のところにジャンプします。入力文字列を増やせばさらに特定することが可能です。

この技は下記のサイトで紹介されていました。ツリーフォルダも同じ方法で選択できるようです。

@IT：エクスプローラで目的のファイル／フォルダを素早く選択する

管理画面のエントリーリストのタイトルを全て表示するのエントリーで、エントリーのタイトルを全て表示するカスタマイズ方法をご紹介した後、管理画面上の表示設定を変更することでスクリーンショット（中）のように、エントリータイトルの全表示が可能であることを知りました。
この場をお借りしてお詫び申し上げると同時に、本エントリーで変更方法をご紹介しておきます。

方法は、エントリーリスト（他の画面も同様）左下に「画面の表示設定を変更」というリンクがあり、このリンクをクリックするとスクリーンショット（下）のウィンドウが表示されます。この中にある「表示形式」について「拡張」を選択し、「保存」をクリックすることでエントリータイトルが bold で全て表示されるようになります。

ただし本文の概要もタイトル横に表示されるため、情報量がやや多くなります。ということで個人的には前エントリーの方法で結果オーライなのですが、こちらを先に気がつかなかったのは悔やまれるところです。（笑）
同じ変更画面で、表示件数・ボタン表示位置・日付表示もカスタマイズできるのでお試しください。

Plugins Directory を見に行くと、Sidebar Manager というプラグインが公開されていましたので、ご紹介したいと思います。

Sidebar Manager は説明によると、HTML や Movable Type のテンプレートに関する知識なしで、プラグインで用意された「サイドバーウィジェット（スクリーンショット）」を利用して、サイドバーのレイアウトを管理できるプラグインです。

以下、Sidebar Manager を利用したカスタマイズ方法です。なおこのプラグインはデフォルトテンプレートでの利用を前提に作られています。

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

Sidebar Manager のページ右上にある「Download」のリンクをクリックして、ジャンプした Donate and Download Sidebar Manager の右上にある Unix または Windows をクリックして、プラグインアーカイブをダウンロードします。

２．プラグインのインストール

ダウンロードしたアーカイブを解凍し、mt-static ディレクトリの中にある plugins ディレクトリを Movable Type の mt-static ディレクトリに、plugins ディレクトリの中にある SidebarManager ディレクトリを Movable Type の plugins ディレクトリにアップロードします。
アップロード後は下記のようになります。

mt-static/plugins/sidebar/…

plugins/SidebarManager/…

アップロード後、管理画面のメインメニューから「プラグイン」をクリックして、次ページで「Sidebar Manager …」が表示されていればOKです。

３．テンプレートの修正

テンプレートにプラグイン用の MTSidebar というタグを設定します。この MTSidebar タグを設定した位置に、プラグインによってサイドメニューを挿入できるようになります。
ここではメインページを例に説明します。

メインページのテンプレート編集画面を開き、右サイドバー部分にあたる下記の赤色部分を全て削除します（プラグインの動作を確認するだけであれば削除する必要はありません）。

　　　　：
<div id="beta">
   <div id="beta-inner" class="pkg">
 
      <div class="module-search module">
         <h2 class="module-header">検索</h2>
         <div class="module-content">
            <form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
               <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
               <label for="search" accesskey="4">ブログを検索: </label><br />
               <input id="search" name="search" size="20" />
               <input type="submit" value="検索" />
            </form>
         </div>
      </div>
      
      <MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
         <h2 class="module-header">カテゴリー</h2>
         <div class="module-content">
         <MTTopLevelCategories>
         <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
            <MTIfNonZero tag="MTCategoryCount">
            <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
            <MTElse>
            <li class="module-list-item"><MTCategoryLabel>
            </MTElse>
            </MTIfNonZero>
               <MTSubCatsRecurse>
            </li>
         <MTSubCatIsLast></ul></MTSubCatIsLast>
         </MTTopLevelCategories>
         </div>
      </div>
      </MTIfArchiveTypeEnabled>
      
      <MTIfArchiveTypeEnabled archive_type="Monthly">
      <div class="module-archives module">
         <h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
         <div class="module-content">
         <MTArchiveList archive_type="Monthly">
            <MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
               <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
            <MTArchiveListFooter></ul></MTArchiveListFooter>
         </MTArchiveList>
         </div>
      </div>
      </MTIfArchiveTypeEnabled>
      
      <div class="module-archives module">
         <h2 class="module-header">最近のエントリー</h2>
         <div class="module-content">
            <ul class="module-list">
            <MTEntries lastn="10">
               <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTEntries>
            </ul>
         </div>
      </div>
      
      <div class="module-syndicate module">
         <div class="module-content">
            <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
            [<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
         </div>
      </div>
      
      <MTBlogIfCCLicense>
      <div class="module-creative-commons module">
         <div class="module-content">
            <a href="<$MTBlogCCLicenseURL$>"><img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br />
            このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
         </div>
      </div>
      </MTBlogIfCCLicense>
      
      <div class="module-powered module">
         <div class="module-content">
            Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
         </div>
      </div>
   </div>
</div>
　　　　：

削除した部分に下記のように青色の MTSidebar タグを設定してください。上記を削除していない場合は適当な位置に <$MTSidebar$> を挿入してください。

<div id="beta">
   <div id="beta-inner" class="pkg">
      <$MTSidebar$>
   </div>
</div>

４．サイドメニューの設定をする

３項の設定でお分かりの通り、MTSidebar タグの部分にプラグインでカスタマイズするサイドメニューが表示されます。

４．１ プラグインを起動する

管理メニュー一番上にあるプルダウンメニューから設定したいブログを選択して「Go」をクリックし、ブログのスタートページにジャンプします。次ページ真ん中にプラグインの表示（スクリーンショット）がありますので、「Re-arrange My Sidebar」をクリックします。

４．２ 表示するサイドメニューを選択する

スクリーンショットのようなページが表示されますので、マウスドラッグでサイドメニューを選択します。Installed Widgets と書かれた左側のエリアにあるメニューが表示されますので、左右のエリアにあるメニューをドラッグして表示するメニューをカスタマイズしてください。表示順序も配置された通りになります。

設定が完了したら、フォーム下の Save Changes をクリックします。

４．３ 再構築

クリック後、再構築のメッセージが表示されますので、通常の再構築を行ってください。ページを表示して追加したメニューが表示されていることを確認してください（英語ですが）。

５．name 属性による表示制御

３項で設定した

<$MTSidebar$>

ですが、このタグに name 属性を与え、

<$MTSidebar name="hogehoge"$>

とし、異なる name 属性値の MTSidebar タグを各サイドバーに設定することで、サイドバー単位にメニューをカスタマイズすることができます。例えば3カラムにカスタマイズしていて、左右で表示するメニューを変えたい場合や、他のアーカイブページで表示するメニューを変更する場合があると思いますので、そのような場合に name 属性が有効に利用できると思います。

…と思って試してみたのですが、α版では設定画面がうまく動作しないようです。なお name 属性を与える場合は、３項の画面にある Rename Sidebar: に、スクリーンショットのように任意の name 属性値を設定します。

FC2ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーの解説を参照ください。

FC2ブログではサービス内に「共有テンプレート」というコーナーがあり、そちらに数多くのテンプレートが登録されていますが、メンテナンスを考慮してとりあえずこのサイトでのみの公開とさせて頂きたいと思います。
FC2ブログの登録および当サイトの公開テンプレート設定方法については下記の記事を参考にしてください。

• FC2ブログ登録方法
• FC2ブログでのテンプレート設定方法

１．動作確認環境

動作確認は下記の環境で行っています。

• OS：Windows2000/XP
• ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
• FCブログ：http://koikikukan.blog42.fc2.com/

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．テンプレート

以下の内容をコピーしてご利用ください。

４．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

• 3カラム固定レイアウト
• 3カラム固定レイアウト（右サイドバー）
• 3カラムリキッドレイアウト
• 2カラム固定レイアウト（右サイドバー）
• 2カラム固定レイアウト（左サイドバー）
• 2カラムリキッドレイアウト（右サイドバー）
• 2カラムリキッドレイアウト（左サイドバー）
• 1カラム固定レイアウト
• 1カラムリキッドレイアウト

の計9種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

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

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

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

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム（左サイドバー）に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　　　　：
　（ここに書かれているものをコピー）
　　　　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている必要なメニュー（検索・カテゴリー・バナー等）をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　　　：
　　　　（ここにペースト）
　　　　　　　　：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
　　　　　　　：
<!-- 右カラム終了 -->

を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

５．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<div id="footer-one"><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
<%ad> | <%ad2><br />
<p style="margin:10px 0 0 0">Copyright © 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

の赤色部分を削除してください（これでFC2ブログの広告とクレジットバナーがページの一番下に表示されます）。

６．記事の日付表示等について

FC2ブログでは投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。また個別ページのトラックバックタイトルも同様の制御を行っています。
また複数記事が存在する場合のページ下のナビゲーションリンクについては、前後のリンクが存在しない場合は非表示にしています。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
elements = document.getElementsByTagName('h3');
work;
work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
if (document.getElementById('nav_previous') || 
    document.getElementById('nav_next')) {
    document.getElementById('nav_main').style.display = 'inline';
} else {
    document.getElementById('nav_main').style.display = 'none';
}
//-->
</script>

を削除してください。

７．XHTML1.0 Transitional valid

当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

８．プラグインについて

プラグインカテゴリー1を左カラム下に、プラグインカテゴリー2を右カラム下に配置しています。

９．その他

基本的な動作は確認したつもりですが、FC2ブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

2006.02.04
投稿したコメントを編集できるように修正しました。またコメントで絵文字等の挿入ができなかった不具合を修正しました。

2006.02.26
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。

2006.08.13
テンプレートの見出しレベルを変更しました。

2006.08.26
コメントタイトル・トラックバックタイトルについて、JavaScript なしで複数表示されないように修正しました。

2006.12.08
見出しレベル変更により同じ日付が表示される不具合を修正しました。また見出しレベルを一部修正しました。

2010.01.26
テンプレートをリニューアルしました。

2010.08.03
リキッドレイアウトのスタイルが漏れていた不具合を修正しました。

2011.02.21
SEO対策版に変更しました。

2011.12.03
本文の構成を見直しました。また冒頭の画像を大きくしました。

2011.12.09
title要素の内容を見直しました。

XOOPS（現在はXOOPS Cube）はPHP・MySQLで構築するコミュニティサイト構築用ソフトです。以下にご紹介するのは南大沢BB研究所で出されているXOOPSの解説書です。縁あってこの本を読む機会を頂くことができましたので、簡単ですが紹介させて頂きます。

XOOPSでつくる!最強のコミュニティサイト 小川 晃夫 南大沢ブロードバンド研究会 ソーテック社 2005-01 売り上げランキング : 9,138 Amazonで詳しく見る by G-Tools

XOOPSは Movable Type と同じCMSツールですが、個人で運営するブログとは異なり、ユーザ投稿によるサイト構築・更新を目的としています。この本ではXOOPSのインストールから各機能の設定・利用方法が詳細に記されており、XOOPSを初めて利用される方はこの1冊で充分活用できると思います。
次に、著書の内容から把握できたXOOPSの構造について、Movable Type と比較しながら簡単に説明したいと思います。

Movble Type で用いられる「モジュール」という概念がXOOPSにも存在します。ただしモジュール自体がひとつの大きなプログラム、例えば「フォーラム」や「ニュース」という単位になっており、必要なモジュールをブラウザから操作する管理メニューで簡単にインストール・アンインストールすることが可能です。

モジュールは、デフォルトで用意されているものから外部モジュールまで数多く用意されており、スケジュール管理やブログとしての運営（RSSもあり）、また「PukiWiki」をXOOPSに移植した B-WiKi モジュールによるWebサイト構築も可能です。さらに「セクション」モジュールを用いることで静的なホームページを公開することもできます。

また Movable Type ではテンプレートを編集して、カラムレイアウトや情報の配置を行いますが、XOOPSでは「ブロック管理」という機能を使ってレイアウトを行います。モジュール内で扱う情報の単位が「ブロック」で、例えば「フォーラムでの最近の投稿」やニューストピック等を左・中央（上・左下・右下）・右の計5ヶ所のいずれかに自由に配置することができます。デザイン自体は公開されている「テーマ」によって変更できます。
つまり、HTMLの知識が全くなくてもレイアウトのカスタマイズを行えることが大きなメリットではないでしょうか。

また「グループ管理」機能によって管理者の権限およびユーザのアクセス権限をかなりきめ細かく設定することができ、複数でサイトを運営することを前提としたツールの大きな特徴と言えるでしょう。

管理画面の操作については Movable Type と比較するとやや慣れが必要ですが、この本に書かれた内容を順に追っていけば簡単にサイトを構築することができると思います（私がそうでした）。

著書後半にはテーマのカスタマイズ方法や、いわゆるテンプレートのカスタマイズについても掲載されていますので、機会があればこちらにも着手するかもしれません。

１．エントリータイトルを全て表示する

tmpl/cms/entry_table.tmpl をダウンロードして（またはPCに保存しているファイルでもOK）、任意のエディタで開き、77行目（そのファイルの中で一番長い行）の赤色部分を削除します。

<TMPL_IF NAME=VIEW_EXPANDED><strong><TMPL_VAR NAME=TITLE_LONG></strong><TMPL_IF NAME=EXCERPT> — <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&_type=entry&id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>" ><TMPL_VAR NAME=TITLE_SHORT></a>

修正したファイルを同じディレクトリにアップロードしてください。長いタイトルは自動的に折り返して表示されます。

２．エントリータイトルリンクのツールチップでタイトルを表示する

画面の表示自体は変更しませんが、ハイパーリンクになっているエントリータイトルのツールチップでエントリータイトルを全て表示します。
tmpl/cms/entry_table.tmpl をダウンロードして（またはPCに保存しているファイルでもOK）、任意のエディタで開き、77行目（そのファイルの中で一番長い行）に青色部分を追加します。

<TMPL_IF NAME=VIEW_EXPANDED><strong><TMPL_VAR NAME=TITLE_LONG></strong><TMPL_IF NAME=EXCERPT> — <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&_type=entry&id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>" title="<TMPL_VAR NAME=TITLE>"><TMPL_VAR NAME=TITLE_SHORT></a>

修正したファイルを同じディレクトリにアップロードしてください。

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

BigPAPI用のプラグインも用意しました（１項の動作と同じになります）。
下記の DisplayEntryTitle.zip または DisplayEntryTitle.lzh をクリックしてアーカイブをダウンロードしてください。

DisplayEntryTitle.zip

DisplayEntryTitle.lzh

アーカイブを解凍して、中にある DisplayEntryTitle.pl を plugins ディレクトリにアップロードしてください。
このプラグインはBigPAPIプラグインがインストールされている必要があります。BipPAPIのインストールは、下記のサイトへジャンプし、Download のリンクまたは、Plugin Code のリンクをクリックしてプラグインをダウンロードしてください。

staggernation.com：BigPAPI Plugin for Movable Type

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

４．プラグインご利用の場合

エントリーリストが表示される仕組みは、ページ全体を表示する list_entry.tmpl から

<TMPL_INCLUDE NAME=entry_table.tmpl>

というインクルード用タグを用いて、実際のリスト表示部分である entry_table.tmpl を引き込み、エントリーリストを表示しています。このインクルード部分についてBigPAPIでは対応していないようなので（間違っていたらすいません）、本プラグインでは list_entry.tmpl にあるインクルード部分（上の1行）を entry_table.tmpl の中身（にちょっと修正を加えたもの）とごっそり置き換えています。
ということで、Movable Type のバージョンアップで entry_table.tmpl が変更になると、エントリーリストの表示に何らかの影響が発生する可能性があります。個人的にはしばらく変更されることはないと思ってますが、念のためお知らせしておきます。変更があればプラグインも適宜修正したいと思います。

サーバ移転後、旧サーバで稼動していた機能がいくつかデッドリンクになってまして、その中で StyleCatcher 用のリポジトリについてご指摘頂いておりました。が年末のことで、実家に持ち帰ったノートPCにデータがなかったため保留になっておりました。
先ほど自宅に帰宅し、早々に新サーバ側へデータを転送致しまして、動作も確認致しました。ご迷惑おかけ致しましたことお詫び申し上げます。

StyleCathcer は、誤解を恐れずに申しあげれば、テンプレートのデザインを一発で切り替えるためのプラグインです。プラグイン設定方法と当サイトで公開しているリポジトリ（「貯蔵庫」「倉庫」といった意味）が下記にありますので、テンプレートをデフォルトでご利用の方はお試しください。

• StyleCatcher によるスタイル変更方法
• Movable Type 3.2 テンプレート（for StyleCatcher）

他にデッドリンクがありましたら、適宜ご連絡頂けると幸いです。

• Document_Not_Bound...：エントリー編集画面でのタグ挿入ボタンの謎の挙動、解決・・・の巻
• web-conte.com：【続】MTの編集ボタンを追加・改造する

トップへのジャンプを解消するため、# の部分を javascript:void(0); に置き換える方法が紹介されています（これでリンクへのジャンプが無効になります）。リンク先にジャンプさせないもうひとつの方法は、イベントハンドラの後に return false; を記述することですが、うまく動作しないようですので、前者の方法を拝借して簡単なプラグインを作成してみました。

このプラグインはBigPAPIを利用したものです。以下プラグインの設定方法を説明します。
なお BigPAPI 用プラグイン作成にあたっては、いつもの通り下記の記事を参考にさせて頂きました。ありがとうございます。

The Blog of Fujimoto：管理画面のカスタマイズをプラグインで行う「BIGPAPI」

BigPAPI プラグイン作成方法は、次項で紹介する公式サイト BigPAPI Plugin for Movable Type またはそのリンク先のダウンロードアーカイブの中にある BigPAPIDoc.txt に掲載されています。

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

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

staggernation.com：BigPAPI Plugin for Movable Type

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

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

３．不具合解消用プラグインのダウンロード

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

InvalidateLinkOfInsertTag.zip

InvalidateLinkOfInsertTag.lzh

４．不具合解消用プラグインのアップロード

アーカイブを解凍して、中にある InvalidateLinkOfInsertTag.pl を plugins ディレクトリにアップロードします。

以上です。
管理画面からのプラグイン設定等は不要です（メインメニューの「プラグイン」のリンク先で「Invalidate link of insert tag」が表示されていればOKです）ので、上記の設定を終えたらエントリー編集画面で動作をご確認ください。