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

Movable Typeでスマホ用トップページのURLに、PCサイトと異なるURLを設定する方法を紹介します。

１．サイトパスがドメイン直下の場合

例えば、サイトパスがドメイン直下、

http://user-domain/

となっている状態でスマホ用のトップページのURLを

http://user-domain/i/

としたい場合、スマホ用トップページ（インデックステンプレート）の出力ファイル名を次のように設定します。

ファイル名にパスを設定することで、再構築時に「i」というパスを自動生成し、その直下にindex.htmlを出力します。

２．サイトパスがサブディレクトリの場合

サイトパスがサブディレクトリ、

http://user-domain/blog/

になっていて、スマホ用のパスを

http://user-domain/i/blog/

と、サブディレクトリの間に挿入したい場合もあると思います。

このケースでは、インデックステンプレートの出力ファイル名を先程と同様、「i/index.html」と設定しても、URLは、

http://user-domain/blog/i/

となり、期待するパスになりません。

このような場合は、スマホサイト用トップページのインデックステンプレートのファイル名に、次のように相対パスで指定します。

../i/blog/index.html

これでスマホサイト用トップページのURLを

http://user-domain/i/blog/

にすることができます。

３．アーカイブページのURLについて

アーカイブページのURLについてスマホ用のURLを設定したい場合、ArchivePathSelectorプラグインを利用してください。

詳細は下記のエントリーをご覧ください。

スマホサイト制作に役立つ「ArchivePathSelectorプラグイン」バージョンアップ

MTQに「MTの管理画面上でCSSファイルやJSファイルの編集を行い、任意の場所に保存する方法はないでしょうか」というような質問がありましたので、こちらで情報展開します。

MTQ - フォルダにHTML以外のファイルを保存できるか？

このエントリーは以前書いた「インデックステンプレートにパスを設定する」のMovable Type 5版＋αになります。

１．インデックステンプレートで管理する

Movable TypeでCSSファイルやJavaScriptファイルなどのテキストファイルを管理するには、インデックステンプレートを利用する方法があります。

CSSファイルやJavaScriptファイルにテンプレートタグを使えるという利点の他、テンプレートタグを使わないファイルでもFTPを行う必要がなく、管理画面上で編集・保存が行えるというメリットがあります。

２．出力ファイル名にパスを設定して任意のディレクトリに出力

インデックステンプレートでファイルを管理する場合、インデックステンプレートの「出力ファイル名」にはパスを指定することができます。パスを指定することで、ファイルを任意のディレクトリに出力することができます。

ファイル名の先頭にパス名を指定した場合、そのインデックステンプレートが属するウェブサイト（またはブログ）のサイトパス直下に、指定したパスが作成されます。

「../」から始まる形式で指定することも可能です。この場合サイトパスの1つ上のディレクトリにcssというディレクトリが作成され、その直下にファイルが出力されます。

絶対パスを指定することも可能です。

ただし、絶対パスや「../」形式の相対パスで指定した場合、上位のパスに書き込みのパーミッションがないと、再構築時に次のようなエラーになるので注意してください。

３．インデックステンプレートの「公開」を「手動」にする

インデックステンプレートでファイルを管理する場合、再構築を毎回行う必要はないので、該当のインデックステンプレートの「公開」を「手動」に変更しておきます。こうしておけば、全体の再構築やインデックステンプレート全体の再構築で、このテンプレートは再構築の対象外になります。

再構築が必要な場合は、該当のテンプレート編集画面にある「保存と再構築」をクリックします。

または、インデックステンプレート一覧画面から該当のテンプレートをチェックし、「公開」をクリックします。

４．アイテムを利用する

インデックステンプレート以外でファイルを管理するには、「アイテム」を利用してアップロードする方法があります。

アイテムにはフォルダを選択する機能があるので、それを利用すれば便利でしょう。フォルダは「ウェブページ」→「フォルダ」で作成できます。

５．アイテムでアップロードしたファイルを編集する

アイテム機能でアップロードしたファイルは、基本的に管理画面上で編集することはできません。

ただし、FTPなどが使えない状況で編集を行う必要が生じた場合、中身が空のインデックステンプレートを作成し、アイテムを使ってアップロードしたファイルのパスとファイル名を「ファイルのリンク」に指定します。「ファイルのリンク」も相対パス・絶対パスが使えますが、アイテムでアップロードしたファイルは相対パスで指定します。「出力ファイル名」にも「ファイルのリンク」と同じ内容を設定しておきます。

この状態で「保存」をクリックすれば、アップロードしたファイルの内容が取り込まれ、編集できるようになります。

アイテム一覧からこのファイルを削除すればファイルは消されますが、再構築すればファイルは出力されます（アイテムの管理対象外）。

Movable Type 5（MT5）用のテーマ（テンプレート）の配布を開始します。このエントリーで配布するのはウェブサイト用のテーマです。ブログ用のテーマは「Movable Type（MT）5 テーマ：ブログ用」を参照ください。

Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。

１．Movable Type 5（MT5） テーマのダウンロード

Movable Type 5（MT5）テーマのアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type（MT） テーマの利用方法です。

２．Movable Type 5（MT5）テーマのインストール

ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_website フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。

ウェブサイト管理画面の「デザイン」→「テーマ」で「小粋空間テーマ（ウェブサイト用） 5.0」が表示されていればインストールOKです。

テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。

３．Movable Type 5（MT5）テーマの入れ替え

２項で表示されている「小粋空間テーマ（ウェブサイト用） 5.0」の右上にある「適用」をクリックします。

少し待つと、次のように現在のテーマの表示が切り替わります。

あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。

2010.04.14
スタイルに関する記述を変更しました。

Movable Type 5（MT5）用のテーマ（テンプレート）の配布を開始します。このエントリーで配布するのはブログ用のテーマです。ウェブサイト用のテーマは「Movable Type（MT）5 テーマ：ウェブサイト用」を参照ください。

Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。

１．Movable Type 5（MT5） テーマのダウンロード

Movable Type 5（MT5）テーマのアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type（MT） テーマの利用方法です。

２．Movable Type 5（MT5）テーマのインストール

ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_blog フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。

ブログ管理画面の「デザイン」→「テーマ」で「小粋空間テーマ（ブログ用） 5.0」が表示されていればインストールOKです。

テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。

３．Movable Type 5（MT5）テーマの入れ替え

２項で表示されている「小粋空間テーマ（ブログ用） 5.0」の右上にある「適用」をクリックします。

少し待つと、次のように現在のテーマの表示が切り替わります。

あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。

2010.04.14
スタイルに関する記述を変更しました。

現在配布中の「Movable Type 4.2 用のテンプレートセット（コミュニティブログ対応版）」にいくつか不具合があったため修正しました。修正内容は次の通りです。

1. サインインした状態でコメント投稿および確認ができない不具合を修正
2. サインイン時に実行中のローディング画像が表示されない不具合を修正
3. ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正

１．サインインした状態でコメント投稿および確認ができない不具合について

この不具合は、具体的には、「投稿」または「確認」をクリックすると、ボタンが disabeled 状態になるところまでは正常なのですが、その後、それぞれの CGI が起動しません。

原因は、このテンプレートセットは、MT4.2（通常版）の配布テンプレートを流用して作っており、コメント投稿フォーム部分を XHTML valid にするために、form 要素の name 属性を削除したマークアップにしていたのですが、コミュニティブログではグローバルテンプレートの mt.js を利用するため、name 属性がないと正常に動作しません。

以下の name 属性を追加することでこの不具合は解消します。

<form method="post" action="<mt:CGIPath /><mt:CommentScript />" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

２．サインイン時に実行中のローディング画像が表示されない不具合について

サインイン時にローディング画像が表示されないため、画面が停止したように見えます。

コミュニティブログのサインイン（変更前）

コメントのサインイン（変更前）

原因はローディング画像をテンプレートセットに含んでませんでした。修正後のサインイン時の画面は、次のようになります。

コミュニティブログのサインイン（変更後）

コメントのサインイン（変更後）

３．ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正

サインイン中だけフォントサイズが大きくなる不具合です。違いは２項の画像を参照してください。該当のスタイルシートを下記のように修正しました。

変更前

#header div.widget-sign-in #signin-widget-content {
    color: #fff;
    font-size: 14px;
}
#header div.widget-sign-in #signin-widget-content a {
    font-size: 83%;
}

変更後

#header div.widget-sign-in #signin-widget-content {
    color: #fff;
    font-size: 83.3%;
}
#header div.widget-sign-in #signin-widget-content a {
    font-size: 100%;
}

４．ダウンロード

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版（フッタ付きリキッドレイアウト対応）」にコミュニティ用のテンプレートを追加したものです。

Movable Type（MT）テンプレート

配布中の Movable Type 4.2 テンプレートセット（コミュニティ用）を修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

• template_4_2_utf8_1_2_community_style_liquid.zip

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、３項の修正を行ってください。

今回の問題で改修するテンプレートは、「スタイルシート」インデックステンプレートのみです。

１．問題点

IE7 で表示すると、内側のボックスが外側のボックスの高さを越えて表示される（下記）。

２．原因

CSS2.0 の仕様で、float させている要素の高さが、回り込んだ要素の高さより大きい場合や、ボックス内の最後の要素を float 指定している場合、float させた要素が親ボックスからはみ出てしまいます。

IE7 以外のモダンブラウザは after 擬似要素を利用して、上記を回避する設定を行なってますが、IE7 は after 擬似要素に対応しておらず、上記の仕様にしたがった動作を行なうようになったため、このような不具合が発生しているようです（認識が誤まっていたらご指摘ください）。

３．対処内容

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

.clearfix {
    display: inline-table;
    min-height: 1%;
}

調べると、下記の設定に修正することで解消するようですが、解消されなかったので上記の対処にしています（あまり調べきれてません）。

.clearfix {
    display: inline-block;
}

修正後の IE7 での表示は下記のようになります。

先日配布を開始した、「Movable Type 4.2 用のテンプレートセット（コミュニティブログ対応版）」を修正しました。修正内容は次の通りです。

• プロフィールページにサイドバー追加
• プロフィールページのレイアウト修正

修正後のプロフィールページは、次のようになります。

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版（フッタ付きリキッドレイアウト対応）」にコミュニティ用のテンプレートを追加したものです。

Movable Type（MT）テンプレート

Movable Type 4.2 用のテンプレートセット（コミュニティブログ対応版）の配布を開始します。現状はα版という位置づけでお試しください。

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版（フッタ付きリキッドレイアウト対応）」にコミュニティ用のテンプレートを追加したものです。

Movable Type（MT）テンプレート

追加機能は次の通りです。

１．サインアップ・サインイン

ブログのページからサインアップやサインインが行なえます。

サインイン前

サインイン後

２．ブログ記事の投稿

メインページ下にある「新しいブログ記事を作成」をクリックすれば、ブログのページからブログ記事の投稿が行なえます。

３．プロフールページ

ユーザー名をクリックすれば、ユーザーのプロフィールページを表示します（サイドバー部分は未作成です）。

配布中の Movable Type 4.2 テンプレートを修正しました。修正内容は次の2点です。

• カテゴリーアーカイブに月別カテゴリーリストが表示されない不具合を修正
• 「スタイル」機能で、コメント完了ページのカラムレイアウトが変更されるよう改善

カテゴリーアーカイブに月別カテゴリーリストが表示されない原因は、カテゴリアーカイブでのカテゴリ月別リスト表示の判定に使用していた予約変数 module_category-monthly_archives が、4.2 ではカテゴリアーカイブで「1」が設定されなくなったためです（4.1からの動作変更）。

テンプレートをご利用中で不具合を修正したい場合は、下記のリンクから最新版のテンプレートセットをダウンロードしてください。

Movable Type（MT） テンプレート

ダウンロードしたテンプレートセットを plugins ディレクトリにアップロードして、下記のテンプレートを個別に初期化すればOKです。

• システムテンプレート：コメント完了
• ウィジェット：カテゴリ月別アーカイブ

テンプレートを初期化したくない場合は、次に示す内容にしたがって変更してください。

１．システムテンプレート：コメント完了

赤色部分を削除して青色部分を追加してください。

<__trans_section component="koikikukantemplateset">
<mt:setVar name="page_layout" value="layout-one-column" />
<mt:if name="body_class" eq="mt-comment-confirmation">
...中略...
<mt:include module="ヘッダー" />
 
<mt:unless name="page_layout" eq="layout-three-column-right">
  <mt:if name="page_layout" like="three|left">
<div id="links-left-box">
  <dl id="links-left">
<mt:include module="サイドバー2" />
    <mt:if name="page_layout" like="two">
<mt:include module="サイドバー" />
    </mt:if>
  </dl>
</div>
  </mt:if>
</mt:unless>
 
<div id="content">
<div class="blog">
...後略...

２．ウィジェット：カテゴリ月別アーカイブ

赤色部分を削除して青色部分を追加してください。

<mt:if name="module_category-monthly_archives">
<mt:if name="archive_class" like="category-archive|category-monthly-archive">
  <mt:ifArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <mt:categoryLabel />
</dt>
 
<dd class="side">
    <mt:archiveList archive_type="Category-Monthly">
      <mt:archiveListHeader>
  <ul>
      </mt:archiveListHeader>
    <li><a href="<mt:archiveLink />"><mt:archiveTitle /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
  </ul>
      </mt:archiveListFooter>
    </mt:ArchiveList>
</dd>
  </mt:ifArchiveTypeEnabled>
</mt:if>

現在配布中の Movable Type 4.2 テンプレートセットを修正しました。

修正内容は次の通りです。

• アーカイブインデックスの追加
• テンプレートセットにバージョン番号付与（プラグイン一覧画面に表示）
• 不要な制御テンプレートタグの削除

１．アーカイブインデックスの追加

デフォルトテンプレートと同様のアーカイブインデックスを追加しました。アーカイブインデックスへのリンクはメインページの下部に表示しています。

２．テンプレートセットにバージョン番号付与

テンプレートセットにバージョン番号を付与しました。バージョン番号はプラグイン一覧で確認することができます。なお、各テンプレートセットはレイアウト機能以外の機能追加や不具合を統一して、v1.11 としました。

プラグイン一覧での各バージョンの表記は次のようになります。

ノーマル

スタイル対応

フッタリ付きキッドレイアウト対応

３．不要な制御テンプレートタグの削除

4.2 テンプレートセットは、4.1 テンプレートセットを流用していたため、一部のテンプレートに不要な制御テンプレートタグ（特に MTSetVar タグ）が残っており、これらを整理しました。

４．ダウンロード

修正版の最新のテンプレートセットは次のリンク先からダウンロードしてください。

Movable Type（MT）テンプレート

現在配布中のMovable Type テンプレート（4.2 対応）を、Movable Type 3 のテンプレート構成に見直したものを配布します。
テンプレートの機能やデザインは変わっていません。

見直した箇所は下記の部分です。

• テンプレートモジュールを一切使用せず、ヘッダー・フッターや他のモジュールをメインとなるテンプレートにすべて移動
• アーカイブテンプレートの「ブログ記事リスト」を「カテゴリアーカイブ」と「日付アーカイブ」に分割

また、モジュール化をやめたことに伴い、ヘッダーなどに記述していた振り分け用テンプレートタグ（MTIf タグなど）も削除しているので、テンプレートの見通しは良くなったと思います。
ただし、ウィジェットについては利便性を考慮して、Movable Type 4.2 のままにしています。

以下のテンプレート一覧を見て頂ければ、おおよその構成が分かると思います。

テンプレートセットは下記のリンクからダウンロードしてください。

template_4_2_utf8_1_3_like_mt3.zip

2008.11.19 v0.01 初版
2008.11.20 v0.02 MTIfタグをさらに削除
2008.11.25 v0.03 コメントプレビューテンプレートの不具合を修正

テンプレートセット設定方法やカラムレイアウト切り替え方法については、次のページを参考にしてください。

Movable Type 4.2 テンプレートセット（スタイル対応版）

配布中の Movable Type 4.2 テンプレートをバージョンアップしました。変更内容は、検索結果画面について、4.2 の検索結果ページのページ分割機能への対応です。

テンプレートをご利用中で検索結果機能を利用したい場合は、下記のリンクから最新版のテンプレートセットをダウンロードしてください。

Movable Type テンプレート

ダウンロードしたテンプレートセットを plugins ディレクトリにアップロードして、下記のテンプレートを初期化すればOKです。

• インデックステンプレート：スタイルシート
• システムテンプレート：検索結果
• ウィジェット：検索

変更箇所は次の通りです。テンプレートを初期化したくない場合は、該当する内容を追加または変更してください。ただし、システムテンプレートの「検索結果」は全面的に作り直しているため、初期化をお願い致します。

１．インデックステンプレート：スタイルシート

下記のセレクタを追加してください。

.search-results-header {
    margin: 8px 0 15px;
    font-size: 120%;
}

２．ウィジェット：検索

下記の青色部分を追加してください。

<dt class="sidetitle">
Search this site
</dt>
 
<dd class="side">
  <form method="get" action="<mt:CGIPath /><mt:SearchScript />">
    <fieldset>
      <input type="hidden" name="IncludeBlogs" value="<mt:blogID />" />
      <input type="hidden" name="limit" value="<mt:searchMaxResults />" />
      <input id="search" tabindex="8"  accesskey="t" name="search" size="20" value="" />
      <input type="submit" tabindex="9" accesskey="s" value="Search" />
    </fieldset>
  </form>
</dd>

配布中の Movable Type 4.2 テンプレートセットを修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

• template_4_2_utf8_1_4
• template_4_2_utf8_1_4_style
• template_4_2_utf8_1_6_style_liquid

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、下記の修正を行ってください。

今回の問題で改修するテンプレートは、「ウェブページ」アーカイブテンプレートのみです。

１．問題点

• ウェブページの表示時に JavaScript エラーが発生する。
• スタイル対応版で、切り替えたスタイルがウェブページに反映されない（常に3カラム固定レイアウトで表示）。

２．原因

JavaScript エラーについては、Movable Type 4.1 まで使用していた mt.js に実装されている関数 individualArchivesOnLoad を起動していたため。エラー自体は引数に設定している commenter_name が未定義によるものです。

スタイルが反映されない問題については、body 要素で設定する CSS レイアウト用の変数 page_layout の値が、body 要素の直前にある MTSetVar タグで layout-three-columns という値で上書きされてしまっていたため。

３．対処

JavaScript エラーが発生する問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを次のように修正してください。

変更前（赤色部分を削除）

<mt:setVar name="body_onload" value="individualArchivesOnLoad(commenter_name)" />

変更後（青色部分を追加）

<mt:setVar name="body_onload" value="mtEntryOnLoad()" />

スタイルが反映されない問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを1行削除してください。

<mt:setVar name="page_layout" value="layout-three-column" />

Movable Type 4.1 と 4.2 のコメント入力フォームの差分を掲載します。

Movable Type 4.2 では、インデックステンプレートの JavaScript（mt.js）の実装がほぼすべて新しくなり、それに伴い、コメント入力フォームのマークアップもかなり変更されています。

4.1 から 4.2 にアップグレードした場合、JavaScript（mt.js）やコメント入力フォームはそのままでも問題ないと思いますが、4.2 のコメント関連機能を活用するには、インデックステンプレートの JavaScript（mt.js）を初期化、つまり 4.2 の JavaScript（mt.js）を利用し、コメント入力フォームのテンプレートについては、以下に示す変更を行うと良いでしょう。

１．コメントプレビュー用データ

表示されているページがコメントプレビューであることを示すための情報を設定します。
コメントプレビューテンプレートに下記の青色のスクリプトを、mt.js が読み込まれる前に実行されるよう、挿入してください。

4.1

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

4.2

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript">
/* <![CDATA[ */
var user = <mt:userSessionState />;
var is_preview = true;
/* ]]> */
</script>
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

この設定がもれていると、サインインしていないコメントでプレビューした場合、CAPTCHA フィールドがデフォルトで表示されないといった不具合が発生します。

２．メッセージ表示用エリアのマークアップ

「サインインできます」などのメッセージを表示するエリアのサブテンプレートは、4.1 で使われていた MTIfRegistrationAllowed タグがなくなり、(X)HTML の div 要素に変わりました。div 要素の id 属性値は comment-greeting としてください。

4.1

<MTIfRegistrationAllowed>
        <div id="comment-form-external-auth">
            <script type="text/javascript">
            <!--
            <MTIf name="comment_preview_template">is_preview = true;</MTIf>
            writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
            //-->
            </script>
        </div>
</MTIfRegistrationAllowed>

4.2

<div id="comment-greeting"></div>

３．form要素

onsubmit 属性値が変わりました。この変更を行わないと、コメント投稿時に「不正なエラーです」というエラーになります。

4.1

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">

4.2

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

４．hidden属性のinput要素

4つの input 要素が追加されています。parent_id は親コメントへの返信コメントのときの親コメントIDです。armor（よろい）はスパムコメント対策用のデータです。

4.1

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />

4.2

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id" />
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />
<input type="hidden" name="sid" value="" />

4.2（コメントプレビュー）

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<mt:IfCommentParent>
    <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
</mt:IfCommentParent>
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />

５．input要素（名前・メール・URL）

名前・メール・URLの input 要素に、CAPTCHAを表示するための onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面で起動する関数が異なります。ブログ記事／ウェブページでは入力フィールドをクリックするとCAPTCHAを表示し、コメントプレビューではデフォルトで表示します。

4.1

<input id="comment-author" name="author" size="30" value="<MTIf name="comment_preview_template"><$MTCommentAuthor encode_html="1"$></MTIf>" />
...中略...
<input id="comment-email" name="email" size="30" value="<MTIf name="comment_preview_template"><$MTCommentEmail encode_html="1"$></MTIf>" />
...中略...
<input id="comment-url" name="url" size="30" value="<MTIf name="comment_preview_template"><$MTCommentURL encode_html="1"$></MTIf>" />

4.2

<input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />

６．input要素（情報を保存）

onclick 属性値が変わりました。またコメントプレビューでは非表示になるため、全体をMTUnlessタグで括ります。

4.1

<div id="comment-form-remember-me">
    <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
        <__trans phrase="Remember personal info?"></label>
</div>

4.2（コメントプレビューでは表示させない制御を追加）

<mt:Unless name="comment_preview_template">
    <div id="comment-form-remember-me">
        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
    </div>
</mt:Unless>

７．返信表示用チェックボックス

コメント返信機能が標準装備されたので、返信用のチェックボックスが追加になりました。

4.1

なし

4.2

<div id="comments-open-data">
...中略...
</div>
<div id="comment-form-reply" style="display:none">
    <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
    <label for="comment-reply" id="comment-reply-label"></label>
</div>

８．textarea要素

CAPTCHA表示用の onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面によって内容が異なります。

4.1

<textarea id="comment-text" name="text" rows="15" cols="50"><MTIf name="comment_preview_template"><$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></MTIf></textarea>

4.2

<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>

９．CAPTCHA用フィールド

4.1 で使われていた テンプレートタグがなくなり、div 要素だけになりました。

4.1

<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>

4.2

<div id="comments-open-captcha"></div>

１０．確認用フォームボタン

name 属性値が変更になり、onclick 属性が追加されました。

4.1

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="<__trans phrase="Preview">" />

4.2

<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />

１１．投稿後、フォームボタンをdisableにするJavaScript（二重送信の防止）

コメントフォームの最後に script 要素が追加されました。

4.1

なし

4.2

<div class="comments-open" id="comments-open">
...中略...
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>

１２．4.1のテンプレート構成で4.2にバージョンアップする場合のコメント入力フォームサンプル

4.2 の「既定のブログ」テンプレートセットでは、「コメント入力フォーム」テンプレートモジュールがなくなり、ブログ記事・ウェブページ用のコメント入力フォーム（「コメント」テンプレートモジュール）とコメントプレビューのコメント入力フォーム（コメントプレビューテンプレートに直接記述）が独立してしまったので、4.1 の「既定のブログ」テンプレートセットの構成に対応できるよう、

• ブログ記事
• ウェブページ
• コメントプレビュー

のテンプレートで使える「コメント入力フォーム」テンプレートモジュールを作ってみましたので、よければお使いください。
また、不具合がありましたらご連絡ください。

<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
    <h2 class="comments-open-header"><__trans phrase="Leave a comment"></h2>
    <div class="comments-open-content">
        <div id="comment-greeting"></div>
        <form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
            <input type="hidden" name="static" value="1" />
            <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
            <input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
            <mt:IfCommentParent>
                <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
            </mt:IfCommentParent>
            <input type="hidden" name="armor" value="1" />
            <input type="hidden" name="preview" value="" />
            <div id="comments-open-data">
                <div id="comment-form-name">
                    <label for="comment-author"><__trans phrase="Name"></label>
                    <input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-email">
                    <label for="comment-email"><__trans phrase="Email Address"></label>
                    <input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-url">
                    <label for="comment-url"><__trans phrase="URL"></label>
                    <input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <mt:Unless name="comment_preview_template">
                    <div id="comment-form-remember-me">
                        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
                        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
                    </div>
                </mt:Unless>
            </div>
            <div id="comment-form-reply" style="display:none">
                <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
                <label for="comment-reply" id="comment-reply-label"></label>
            </div>
            <div id="comments-open-text">
                <label for="comment-text"><__trans phrase="Comments">
                <mt:IfAllowCommentHTML><__trans phrase="(You may use HTML tags for style)"></mt:IfAllowCommentHTML></label>
                <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>
            </div>
            <div id="comments-open-captcha"></div>
            <div id="comments-open-footer">
                <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />
                <input type="submit" accesskey="s" name="post" id="comment-submit" value="<__trans phrase="Submit">" />
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>
</mt:IfCommentsAccepted>

Movable Type 4.2 用のテンプレートセット（スタイル対応版）の配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

バージョン 4.1 では、ウィジェットセットがテンプレートセットに未対応でしたが、バージョン 4.2 からウィジェットセットもテンプレートセットに含めることができるようになったため、サイドバーのパーツをウィジェットに移動しました。

１．テンプレートセットのダウンロード

「4.2 スタイル対応版」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

４．スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

「既定のスタイル」の左側にある + マークのアイコンをクリック（「既定のスタイル」の部分は選択状態によって異なります）。

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ（mt-static ディレクトリがある位置）までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトの対応は次の通りです。このテンプレートセットには3カラム（右サイドバー）を新しく追加しました。

選択後、「デザインを適用」をクリック。

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

５．スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート（styles-site.css）」を編集してください。

配布中の Movable Type 4.1 テンプレートセットを修正致しました。

Movable Type テンプレート

修正したテンプレートは template_4_1_utf8_1_3 および template_4_1_utf8_1_3_style で配布しています。template_4_1_utf8_1_2_style または template_4_1_utf8_1_2 以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、下記の修正を行ってください。

なお、今回の問題で改修したテンプレートは、「サイドバー」テンプレートモジュールのみです。

１．問題点

月別アーカイブリストが正常に機能しない場合がある。

２．原因

月別アーカイブリストで MTArchiveListHeader タグ（MTArchiveListFooter タグ）を用いていないため。

この問題は以前エントリーした「「月別アーカイブリスト」が月別アーカイブで正常に表示されない不具合について」の類似問題と思われます。

３．対処

月別アーカイブリスト、月別カテゴリリストにMTArchiveListHeader タグ、MTArchiveListFooter タグを追加。

変更前（赤色部分を削除）

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <$MTCategoryLabel$>
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Category-Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>

変更後（青色部分を追加）

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <$MTCategoryLabel$>
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader><ul></MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader><ul></MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</dd>
</MTIfArchiveTypeEnabled>

すでにあちこちで紹介されていますが、黒野明子さんが iPhone 用のテンプレートを公開されました。Good Job!!

「iPhoneテンプレートfor MT」を公開いたします。

「既にPC用のコンテンツを公開しているMovable Typeに追加するだけで、別途iPhone用のコンテンツを生成するテンプレート」を作ってみました。これを、オープンソースで公開いたします。

このブログでも設置してみました。PCでも操作可能なので面白いです。

テンプレートの設定方法は、既存のテンプレートに対し、iPhone 用のメインページとなるインデックステンプレートと、ブログ記事テンプレートを追加するだけです。

設定方法については、ダウンロードアーカイブの readme.txt に詳しく紹介されていますので、ここでは、当ブログ（アーカイブパスを設定している場合）のパスの設定方法を加えておきます。

注：以下の内容の、「MTBlogURL を MTBlogArchiveURL に変更」は、バージョンアップされた配布元テンプレートに反映されているので、対処の必要はありません。

１．iPhone 用トップページのテンプレート

青色部分が変更箇所です。アーカイブパスを設定している場合、MTBlogURL を MTBlogArchiveURL に変更します。

また、ここでは個別ページへのパスは MTEntryDate タグとformatモディファイアを用いて、このブログのPC用のパスと同様にタイムスタンプを利用してみました（この変更はアーカイブパスの設定とは関係ありませんので、変更しなくても大丈夫です）。

...前略...
<!-- ▼トップページここから▼ -->
<ul id="home" selected="true">
    <!-- ▼最新のブログ記事20件ここから▼ -->
        <li class="group">最新のブログ記事20件</li>
    <MTEntries lastn="20">
        <li><a href="<$MTBlogArchiveURL$><MTEntryDate format="i/%Y/%m/%d-%H%M%S.html">" target="_self"><$MTEntryTitle$>［<$MTEntryDate$>］</a></li>
    </MTEntries>
<!-- ▲最新のブログ記事20件ここまで▲ -->
        <li class="group">過去記事アーカイブ</li>
        <li><a href="#monthlyArchives">過去6ヶ月の記事を見る</a></li>
</ul>
<!-- ▲トップページここまで▲ -->
...中略...
<!-- ▼月別アーカイブ個別記事ここから▼ -->
    <MTArchiveList archive_type="Monthly" lastn="6">
    <ul id="m<$MTArchiveDate format="%j"$>">
        <MTEntries lastn="9999">
            <li><a href="<$MTBlogArchiveURL$><MTEntryDate format="i/%Y/%m/%d-%H%M%S.html">" target="_self"><$MTEntryTitle$>［<$MTEntryDate$>］</a></li>
        </MTEntries>
    </ul>
    </MTArchiveList>
<!-- ▲月別アーカイブ個別記事ここまで▲ -->
...後略...

２．iPhone 用個別ページのテンプレート

青色部分が変更箇所です。

...前略...
    <MTEntryPrevious><p class="previousEntry"><a href="<$MTBlogArchiveURL$><MTEntryDate format="i/%Y/%m/%d-%H%M%S.html">">&laquo;&nbsp;前の記事へ</a></p></MTEntryPrevious>
    <MTEntryNext><p class="nextEntry"><a href="<$MTBlogArchiveURL$><MTEntryDate format="i/%Y/%m/%d-%H%M%S.html">">次の記事へ&nbsp;&raquo;</a></p></MTEntryNext>
...後略...

３．iPhone 用個別ページのパス

このブログでは、

i/%y/%m/%d-%h%n%s.html

としています。この変更はアーカイブパスの設定とは関係ありませんので、変更しなくても大丈夫です。

４．元の設定をそのまま使用+アーカイブパスを利用している場合

私の場合はパスにタイムスタンプを利用しましたが、元の設定をそのまま使用してアーカイブパスを利用している場合、元のテンプレートの MTBlogURL を MTBlogArchiveURL にすればOKと思います。

下はトップページの抜粋です。

<li><a href="<$MTBlogArchiveURL$>i/<MTParentCategories glue="/"><$MTCategoryBasename$></MTParentCategories>/<$MTEntryBasename$>.html" target="_self"><$MTEntryTitle$>［<$MTEntryDate$>］</a></li>

パスは、

i/%c/%f

のままで大丈夫です。

Movable Type（MT） 4.2 用のテンプレートセット配布を開始します。

2008.09.02
フッタ付きリキッドレイアウト対応 Movable Type テンプレートセットの配布を開始しました。

Movable Type 4.2 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

バージョン 4.1 では、ウィジェットセットがテンプレートセットに未対応でしたが、バージョン 4.2 からウィジェットセットもテンプレートセットに含めることができるようになったため、サイドバーのパーツをウィジェットに移動しました。

１．Movable Type（MT）テンプレートセットのダウンロード

Movable Type（MT）テンプレートセットアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type（MT）テンプレートセットの利用方法です。

２．Movable Type（MT）テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

また、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリにアップロードしてください。

３．Movable Type（MT）テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

不具合がありましたら、本エントリーにご連絡ください。

Movable Type 4 のスタイル用テーマを公開します。

カラムレイアウトは固定レイアウト（3カラム・2カラム）のみ動作を確認しています。4.1 以降で利用可能です。動作確認は 4.2 RC3 で行っていますので 4.1 で不具合がありましたらご連絡ください。
テンプレートをリキッドレイアウトにする方法については別途エントリーします。

１．スタイル切り替え

ブログ管理画面より「デザイン」-「スタイル」を選択。

プラスマークのアイコンをクリック。

「スタイルシートまたはリポジトリのURL」に http://www.koikikukan.com/styles/library/ を入力。

表示された「KOIKIKUKAN Classic for Movable Type 4」のサムネイル画像をクリック。

クリックすると、右側の「選択されたデザイン」に選択したスタイルが表示されるので、「デザインを適用」をクリック。

「テーマを適用しました。」が表示されればスタイルの切り替えが完了です。ただし、この状態ではテンプレートの「スタイルシート」の内容が切り替わっただけですので、ページに反映させるには、全ての再構築を行ってください。

２．カラムレイアウトの切り替え

スタイル適用後に、異なるカラムレイアウトに切り替える方法です。

ブログ管理画面より「デザイン」-「スタイル」を選択すると、「選択されたデザイン」に適用中のスタイルが表示されるので、「レイアウト」のセレクトボックスから「３カラム、小・大・小」「２カラム、大・小」「２カラム、小・大」のいずれかを選択します。

選択後、「デザインを適用」をクリックし、全体を再構築すれば、カラムレイアウトが切り替わります。

Movable Type 4.1 用のテンプレートセット（スタイル対応版）の配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

このテンプレートセットは、先日公開した「Movable Type 4.1 テンプレートセット」に「スタイル」機能によるカラムレイアウト切り替え機能を追加したもので、テンプレートを編集せずに、8種類のカラムレイアウトを自由に切り替えることができます（下）。

CSS は配布済の Movable Type 4.1 テンプレートと互換性があります（ファイル名のみ変更が必要）。

１．テンプレートセットのダウンロード

「スタイル対応版」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

４．カラムレイアウトの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

「既定のスタイル」の左側にある + マークのアイコンをクリック（「既定のスタイル」の部分は選択状態によって異なります）。

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ（mt-static ディレクトリがある位置）までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトの対応は次の通りです。

選択後、「デザインを適用」をクリック。

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

５．スタイルの変更

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート（styles-site.css）」を編集してください。

Movable Type でコメント用の RSS フィードを出力するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。

ネットで検索すると過去の記事がいくつかヒットしましたが、それを使ってみると RSS リーダーで正常に読み込めないケースがあったため、新たに作り直してみました。

livedoor reader、Google リーダー、feedpath Rabbit で正常に購読できることを確認しています。

livedoor reader のサンプル

Google リーダーのサンプル

feedpath Rabbit のサンプル

１．設定方法

「デザイン」→「テンプレート」より「インデックステンプレートを作成」をクリック。

次の画面で以下の内容を設定してください。

• テンプレート名：Comment RSS
• テンプレートの内容：下記
• テンプレートの種類：RSS
• 出力ファイル名：comments.xml（何でもいいです）
• 再構築オプション：チェック

<$MTHTTPContentType type="application/rss+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
    <link><$MTBlogURL$></link>
    <description><$MTBlogName remove_html="1" encode_xml="1"$>へのコメント</description>
    <language><$MTBlogLanguage ietf="1"$></language>
    <pubDate><MTComments lastn="1"><$MTCommentDate format_name="rfc822"$></MTComments></pubDate>
    <generator>http://www.sixapart.com/movabletype/</generator>
    <MTComments lastn="15" sort_order="descend">
    <item>
      <title>「<MTCommentEntry><$MTEntryTitle remove_html="1" encode_xml="1"$>」へのコメント</MTCommentEntry></title>
      <link><MTCommentEntry><$MTEntryPermalink encode_xml="1"$></MTCommentEntry>#comment-<$MTCommentID$></link>
      <dc:creator><$MTCommentAuthor$></dc:creator>
      <pubDate><$MTCommentDate format_name="rfc822"$></pubDate>
      <guid><MTCommentEntry><$MTEntryPermalink$>#comment-<$MTCommentID$></MTCommentEntry></guid>
      <description><$MTCommentBody remove_html="1" encode_xml="1"$></description>
      <content:encoded><![CDATA[<$MTCommentBody$>]]></content:encoded>
    </item>
    </MTComments>
  </channel>
</rss>

下は設定イメージです。

保存後、再構築すれば完成です。

２．公開方法

テンプレートモジュールの「ヘッダー」にある link 要素のところに青色の link 要素を追加すれば、RSS リーダーで登録しやすくなります。併せてブログ上にコメント用RSSのリンクを表示すると良いでしょう。

    <MTIf name="main_template">
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTLink template="rss"$>" />
<link rel="alternate" type="application/rss+xml" title="Comment RSS" href="<$MTLink template="Comment RSS"$>" />
   </MTIf>

title 要素の名称が相応しくないようでしたらご指摘ください。

３．表示コメント数の変更

MTComments タグの lastn モディファイアの値を変更してください。デフォルトは15件にしています。

<MTComments lastn="15" sort_order="descend">

４．link 要素と guid 要素について

item 要素内の link 要素と guid 要素は、ユニークな値でなければならないため、このテンプレートではブログ記事のURLに、フラグメント（リンクの#以降の部分）としてコメントIDを付与した形式にしています。

この要素の設定が、ブログの設定ときちんと合っていれば、RSS リーダーで表示される記事へのリンク（ここでは記事+コメントのリンク）をクリックした時に、ブログの該当記事の該当コメントの位置にジャンプしてくれます。

デフォルトテンプレートではフラグメントは、

<$MTEntryPermalink$>#comment-<$MTCommentID$>

となっていますので、このエントリーで配布しているテンプレートもそれにあわせています。

他のテンプレートを利用している場合はフラグメントを確認して適宜修正してください（修正箇所は2つあります）。ちなみに、当サイトのテンプレートをご利用の場合は、

<$MTEntryPermalink$>#c<$MTCommentID$>

としてください。

５．MTHTTPContentTypeタグについて

先頭の MTHTTPContentType タグは、ダイナミックパブリッシングで出力するときに必要なものです。スタティックパブリッシングの場合は何も処理されないので削除する必要はありません。

６．更新日時について

参考までに、更新日時は、下記の MTCommentDate タグに format_name モディファイアで取得しています。

<$MTCommentDate format_name="rfc822"$>

format_nameモディファイアに"rfc822"を設定しておけば、RSS2.0 の仕様に合った形式で更新日付が出力されます。
format_nameモディファイアには、"rfc822"の他、"iso8601"も設定できます。

６．関連記事

• RSS2.0
• rfc822

Movable Type 4.1 用の配布テンプレートセットで、カラムレイアウトの変更方法についてご質問を頂いてますので、本エントリーにて紹介します。テンプレートセットは下記のページよりダウンロードしてください。

Movable Type テンプレート

なお、ここで紹介する方法は暫定版です。時間をみてテンプレートをバージョンアップし、もう少し楽な変更方法に改善したいと思います。

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

ここでは「メインページ」をサンプルにカラムレイアウトを変更する方法を紹介します。

ブログ管理メニューより「デザイン」→「テンプレート」→「メインページ」を開き、テキストエリア1行目より、下記の MTSetVar テンプレートタグを探し、変数 page_layout の値（赤色部分）を２項に示すレイアウトに書き換えてください。

<MTSetVar name="page_layout" value="layout-three-column">

変数 page_layout でカラムレイアウトを決定しています。

また、他のアーカイブのカラムレイアウトはそれぞれ個別に設定しています。それらのカラムレイアウトを変更する場合は、次のメニューから同じ手順で行ってください。

• ブログ記事アーカイブ：「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事」
• 月別アーカイブ／カテゴリーアーカイブ：「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」
• ウェブページアーカイブ：「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ウェブページ」
• コメントプレビュー：「デザイン」→「テンプレート」→「システムテンプレート」→「コメントプレビュー」
• コメント完了：「デザイン」→「テンプレート」→「システムテンプレート」→「コメント完了」
• 検索結果：「デザイン」→「テンプレート」→「システムテンプレート」→「検索結果」

なお、コメントプレビュー／コメント完了／検索結果の3テンプレートはデフォルトを1カラムレイアウトにしています。

<MTSetVar name="page_layout" value="layout-one-column">

２．カラムレイアウト

レイアウトの設定値は次の通りです。

３．カラム数の変更

3カラムから2カラム／1カラム、あるいはその逆等、カラム数を変更する場合は下記の変更を行ってください。

３．１ 2カラム左レイアウトにする場合

１項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」の内容（一番外側の div 要素と di 要素を除く）を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」にコピー。

３．２ 2カラム右レイアウトにする場合

１項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー2"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」の内容（一番外側の div 要素と di 要素を除く）を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」にコピー。

３．３ 1カラムレイアウトにする場合

１項の該当テンプレートより下記の MTInclude タグ（2つ）を削除。

<$MTInclude module="サイドバー2"$>
　　　　：
<$MTInclude module="サイドバー"$>

Movable Type 4.1 用のテンプレートセット配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

１．テンプレートセットのダウンロード

テンプレートセットアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

また、images フォルダにある koikikukan.gif（クレジットバナー）をブログディレクトリ（index.html のあるディレクトリ）にアップロードしてください。ブログディレクトリにアップロードすれば、テンプレートを修正せずにクレジットバナーを表示します。

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

Movable Type 4.1 ではテンプレーセットをプラグインとして配置することによるテンプレートの入れ替え（テンプレートの初期化）が可能になりましたが、選択方法によって入れ替えの動作が若干異なりますので、本エントリーにて紹介致します。

１．テンプレートの初期化

テンプレートの初期化は、「デザイン」→「テンプレート」→「ブログのテンプレートを初期化」のリンクから行います。

「ブログのテンプレートを初期化」のリンクをクリックすると次のような選択画面が表示されます。

以下、選択状態に応じたテンプレートの初期化、およびバックアップを行います。

２．デフォルトテンプレートとの差分だけを新しいテンプレートに入れ替える

１項の画面で、「テンプレートセット既定のブログの初期化」を選択して「次へ」をクリックすると、下のような画面が表示されます。

これは、現在使用中のテンプレートをデフォルトテンプレート、またはプラグインに登録しているテンプレートセットがあればそれを優先して入れ替えます。

この作業を行った後で、テンプレート一覧画面左上にある「テンプレートの初期化（個別テンプレートの初期化）」を行うと、デフォルトテンプレートに戻ります。

３．デフォルトテンプレートを新しいテンプレートに入れ替える

１項の画面で、「新しいテンプレートセットを適用」を選択して「次へ」をクリックすると、下のような画面が表示されます。

これは、デフォルトテンプレートがすべて削除され、プラグインに登録しているテンプレートセットをデフォルトテンプレートとして入れ替えます。

ここの作業を行った後で、テンプレート一覧画面左上にある「テンプレートの初期化（個別テンプレートの初期化）」を行うと、プラグインに登録しているテンプレートセットの内容にしか戻りません。

また、新しいテンプレートに登録していないテンプレート（JavaScriptやダイナミックパブリッシングエラー等）も削除されてしまいますので、入れ替えには注意が必要です（プラグイン内の記述によってはウィジェット等は残るかもしれませんが詳細は確認できておりません）。

４．既存のテンプレートのバックアップを作成

１項の画面で「既存のテンプレートのバックアップを作成する」をチェックしておけば、これまで使用していたテンプレートのバックアップを作成します。バックアップは［バックアップされたテンプレート］に、すべてが一括して保存されます。

元に戻す時は、ひとつずつ該当のテンプレート種別に手作業で戻さないといけないので、面倒です。

最近、「このタグ（例えば body 等）はどのテンプレートありますか？」という質問を時々頂きます。

Movable Type 4 になってから、テンプレートモジュールがデフォルトで利用されるようになったため、バージョン3の時のようにひとつのテンプレートでいわゆるウェブページ全体のマークアップを俯瞰できなくなってしまいました。

保守性は向上した反面、テンプレートの構造に慣れるのが大変かと思われますが、このエントリーでは(X)HTMLやテンプレートタグを探す便利な方法をお伝えします。

１．検索を利用する

あまり知られていないようですが、一番手っ取り早いのはこの方法です。

ブログ管理画面の一番下にある「検索」のリンクをクリック。

検索文字列入力フィールド上にある「テンプレート」をクリック。

検索したいタグ名等（例では body 要素）を入力して「検索」をクリック。

これで該当するテンプレートが表示されます。
タグや class 属性等をどこに書いたのか調べる時に、テンプレート編集画面を開いて探し回る必要はありません。

上記は body 要素の検索例ですが、単に「body」で検索すると、テンプレートタグの MTEntryBody や MTCommentBody 等が大量にヒットしてしまう（下）ので注意しましょう。

また、検索フォーム下の「項目を指定する」をチェックすれば、検索範囲を、

• 出力ファイル名
• 本文
• テンプレート名
• リンクされたファイル名

から選択することができます。

２．TemplateHammer プラグインでひとつのテンプレートにまとめる

TemplateHammer プラグインを導入すれば、あるテンプレートに記述されている MTInclude 先のテンプレートモジュールの内容を、MTInclude 元に展開してくれます。

インストール方法は下記の記事を参考にしてください。

• Template Hammer
• The blog of H.Fujimoto：MTInclude系のタグを展開するTemplateHammerプラグイン

使用方法は、テンプレート一覧より展開したいテンプレートをチェックして、セレクトボックスの「Smash Template」を選択して「Go」をクリック。

下は「Smash Template」実行前の「メインページ」の冒頭部分です。

下は「Smash Template」を実行後の「メインページ」の冒頭部分です。<$MTInclude module="ヘッダー"$> の部分が展開されているのが分かります。

これでテンプレートモジュールによってバラバラになっているテンプレートをひとつのテンプレートで俯瞰することができます。ただし、MTInclude 先の内容は複数のテンプレートに読み込まれることを前提に振り分け処理が多く含まれているので、読みやすくなるかどうかは分かりません（テンプレートを渡り歩く手間はなくなります）。

当ブログで配布中の Movable Type 4 テンプレートに一部不具合がありましたのでお知らせ致します。

この不具合はtruth さんよりご指摘頂きました。ありがとうございました。

１．問題点

コメント投稿フォームで、「ログイン情報を記憶」をチェックしても、次回投稿時に投稿者情報が反映されない。

２．原因

コメント投稿フォームの form 要素の name 属性記述もれにより、name 属性を利用してクッキーに投稿者情報を保持する JavaScript が正常に動作していなかった。

３．対処方法

2007年12月5日以前にテンプレートをダウンロードされた方（=template_4_0_utf8_1_6 以前をご利用の方）は、下記のいずれかの方法で修正を行ってください。

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

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、下記の青色部分（name 属性）を追加してください。

修正前

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後、「ブログ記事」を再構築してください。

３．２ テンプレートを入れ替える

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、「Movable Type テンプレート」より template_4_0_utf8_1_7.zip（または template_4_0_utf8_1_7.lzh）またはそれ以降のバージョンのアーカイブをダウンロードし、解凍した中にある、comment_form.mtml の内容と入れ替えてください。

テンプレートをカスタマイズしている場合は、３．１の方法で修正されることをお勧めします。

以上です。
ご利用の皆様にはご迷惑おかけして申し訳ございませんが、よろしくお願い致します。

当サイトで公開している Movable Type テンプレート（Movable Type 4.0 対応）の設定方法です。

注：この記事は Movable Type 4.0x 限定です。

以前、MT3.x 用に「Movable Type 公開テンプレート設定方法」をエントリーしたのですが、MT4に適用するには、内容がかなり乖離しているため、今回 MT4 向けに書き直しました。

初めてテンプレートを入れ替える方を対象にしています。

１．テンプレートとは

設定方法の前に「テンプレート」の説明です。テンプレートは Movable Type によるブログのデザインを決める元ネタです。言い換えると単なるHTML（とスタイルシート）に過ぎないなのですが、HTMLタグとは異なる「MTタグ」というものがあちこちに書かれています。MTタグは、別の場所に保存されている実際の記事（エントリー）や各種データを埋め込むという動作を行ってくれます。

２．テンプレートの種類

テンプレートには下記の5種類があります。

• インデックステンプレート
• アーカイブテンプレート
• テンプレートモジュール
• システムテンプレート
• ウィジェット（今回はテンプレート設定対象外のため、説明を省略）

「インデックステンプレート」はメインページやアーカイブインデックス・RSSフィード等のページを作るためのものです。ひとつのインデックス・テンプレートから作られるページはひとつだけです。デフォルトで用意されているテンプレートとは別に、好きなページを作ることができます。

「アーカイブテンプレート」は、カテゴリ別・月別・週別・日別・ブログ記事といった、ある単位のページのかたまり（=アーカイブ）を作るためのものです。ひとつのテンプレートから複数のページが生成されます。例えば1年分の記事を書いて月別アーカイブを作ると、合計12ページ（12ヶ月分）の（X）HTMLができあがります。

このテンプレートも新しく作ることができます。
また、「アーカイブマッピング」を追加することで、デフォルトで用意されているテンプレートに新しいアーカイブ種別を追加することもできます。例えば、「ブログ記事リスト」テンプレートは、デフォルトでは月別・カテゴリ・カテゴリ-月別・ユーザー-月別の4種類のアーカイブページが生成されますが、日別・年別といったアーカイブ種別を追加することも可能です。

「テンプレートモジュール」は、各ページで共通に使われるヘッダーやフッター、サイドバー等、テンプレートの部品が定義されています。MT3では「テンプレートモジュール」はオプション的な役割でしたが、MT4ではこのテンプレートモジュールがデフォルトテンプレートで多用されており、テンプレートが細分化されています。
当サイトの配布テンプレートもデフォルトテンプレートにほぼあわせた構成に変更しています。

「システムテンプレート」はコメントのプレビューや検索結果一覧等を表示します。このテンプレートはシステム固定のため新たにテンプレートを作ることはできません。

３．ダウンロードアーカイブの内容・テンプレートとの対応

Movable Type テンプレートで配布している Movable Type 4 用のダウンロードアーカイブの内容は、下記のようになっています。

/Archives
　entry.mtml
　entry_listing.mtml
　page.mtml
 
/Indexes
　styles.mtml
　main_index.mtml
 
/Modules
　categories.mtml
　comment_detail.mtml
　comment_form.mtml
　comments.mtml
　entry_detail.mtml
　entry_metadata.mtml
　entry_summary.mtml
　footer.mtml
　header.mtml
　page_detail.mtml
　sidebar.mtml
　sidebar2.mtml
　tags.mtml
　trackbacks.mtml
 
/System
　comment_error.mtml
　comment_response.mtml
　search_results.mtml

上記の各ファイルがテンプレートと1対1になっており、ファイルとテンプレートの対応は下記の通りです。これを元に、５項に示す手順にしたがってデフォルトテンプレートと入れ替えてください。

*：テンプレートモジュール名を変更、または新規作成する必要があります。

それでは以下にテンプレートの設定方法を記します。

４．管理画面を開く

ブラウザに、アプリケーションディレクトリのURL、または mt.cgi までのURLを入力して実行。

Movable Type の管理画面が開いたら、ナビゲーションより「デザイン→テンプレート」を選択してクリック。

これでインデックステンプレート一覧画面に遷移します。以降はこの画面をスタートページとして説明します。

５．各テンプレートの設定

上記4種類の各テンプレートの具体的な設定方法について説明します。

５．１ インデックステンプレート（メインページ／スタイルシート（メイン））

インデックステンプレートのメインページの設定方法を説明します。

４項で開いたテンプレート一覧より「メインページ」をクリック。

構文強調表示のアイコンから「強調表示なし」を選択し、テキストエリアの構文強調表示を無効にします。構文強調表示のままテキストコピーやペーストを行うと、テキストに含まれている改行が除去されるので、テキストエリアの表示がおかしくなります。
この操作を1回行えば、後は常にこの設定で画面が表示されます。

テンプレートの内容を全て削除します。下は削除前の状態。

これが削除した状態です。

そして、Movable Type テンプレートからダウンロードしたテンプレートアーカイブに含まれる「main_index.mtml」を任意のエディタで開き、その内容を全てコピーし、先ほど削除した「テンプレートの内容」へペースト。設定が終わったら保存をクリックします。

注：保存・再構築をクリックすると、まだ未設定のモジュールを読み込もうとするエラーが発生するので、この時点では「保存」をクリックしてください。

「スタイルシート（メイン）」の設定は、インデックステンプレート一覧より「スタイルシート（メイン）」のリンクをクリックします。後はメインページと同様の手順で入れ替えてください。

５．２ アーカイブテンプレート（ウェブページ／ブログ記事／ブログ記事リスト）

ここでは「ブログ記事リスト」の設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「アーカイブテンプレート」をクリック。

アーカイブテンプレート一覧が表示されるので、「ブログ記事リスト」をクリック。

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。

ブログ記事リスト、ウェブページも同様の設定を行います。

５．３ テンプレートモジュール

「ウェブページの詳細」の設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「テンプレートモジュール」をクリック。

テンプレートモジュール一覧が表示されるので、「ウェブページの詳細」をクリック。

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。他のモジュールも同様の設定を行ってください。

ただし、サイドバー用のモジュールについては、「サイドバー(2カラム)」を、

「サイドバー」に、

「サイドバー(3カラム)」を、

「サイドバー2」に、

それぞれテンプレート名を変更してください。「サイドバー2」の「2」は半角文字です。また「サイドバー」と「2」の間に空白文字を含まないように気をつけてください。

または「サイドバー(2カラム)」「サイドバー(3カラム)」はそのままで、「サイドバー」「サイドバー2」という新しいテンプレートモジュールを作成してもOKです。

５．４ システムテンプレート（コメントプレビュー／コメント完了／検索結果）

コメントプレビューの設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「システムテンプレート」をクリック。

システムテンプレート一覧が表示されるので、「コメントプレビュー」をクリック。

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。

コメント完了・検索結果も同様の設定を行います。

６．再構築

ナビゲーションメニューから「サイトを再構築」をクリック。

ポップアップ画面が表示されますので、セレクトボックスより「すべてのファイル」を選択して「再構築」をクリック。

正常に完了すれば成功です。ブログを表示して、入れ替えたテンプレートが反映されていることを確認してください。

７．日別アーカイブページの追加

公開テンプレートの3カラムレイアウトでは、左上にカレンダーを表示するようにしていますが、Movable Type のデフォルト状態ではカレンダー用の「日別アーカイブページ」が生成されないため、カレンダーは表示されません。
ということで、ここでは日別アーカイブページを生成するための設定を行います。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「アーカイブテンプレート」をクリック。

アーカイブテンプレート一覧が表示されるので、「ブログ記事リスト」をクリック。

テキストエリア下にある「新しいアーカイブマッピングを作成」をクリック。

セレクトボックスから「日別」を選択して「追加」をクリック。

アーカイブマッピングに「日別」が追加されれば完了です。「保存」はクリックしなくても大丈夫みたいですが、心配な方はクリックしておいてください。

これで６項の再構築を再度実施し、各ページにカレンダーが表示されればOKです。

現在配布中の Movable Type 4 テンプレートに不具合がありました。

事象は「Safari でブログ記事アーカイブ（エントリーアーカイブ）を表示すると、表示が崩れる（フッタがヘッダの直下に表示され、サイドバーがコンテンツの下に表示される）」というものです。

原因はテンプレートモジュール「コメント入力フォーム」の(X)HTMLマークアップ誤りです。ご利用中の皆様には大変ご迷惑をおかけして申し訳ございません。この場をお借りしてお詫び申し上げます。
また情報を提供下さった皆様にお礼申しあげます。ありがとうございました。

現在当サイトで配布中の Movable Type 4 用のテンプレートをご利用の方は、

1. 「コメント入力フォーム」テンプレートをダウンロードして差し替え
2. 「コメント入力フォーム」テンプレートを手修正

のいずれかを行ってください。

なお「Movable Type テンプレート」にあるダウンロードアーカイブは修正済です。

１．「コメント入力フォーム」テンプレートをダウンロードして差し替える場合

下記のリンクをクリックして「コメント入力フォーム」テンプレートをダウンロードし、解凍した内容を、現在設定されているテンプレートモジュール「コメント入力フォーム」の内容と入れ替えてください。

comment_form_utf8_1_3.zip

comment_form_utf8_1_3.lzh

２．「コメント入力フォーム」のテンプレートを手修正する場合

「コメント入力フォーム」テンプレート編集画面で下記の修正を行ってください。

修正前

　　　　：
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
</p>
　　　　：

修正後（青色で示す div 終了タグを追加）

　　　　：
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
   </p>
</div>
　　　　：

再掲になりますが、MT3テンプレートとの差分を掲載しておきます。その他の注意事項については「Movable Type テンプレート」をご覧ください。

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

１．１ テンプレート構成

「Movable Type 4 のテンプレート構造」「Movable Type 4 のテンプレート構造（その2：MTInclude に着目したテンプレート関係図）」でお知らせしている通り、MT4 ではテンプレート構成が大きく変更されています。3.3 からアップグレードした場合は以前の構成が引き継がれますが、新規インストールの場合は、MT3 とかなり異なった構成になります。

今回は新規インストールの方をターゲットにした構成（下記）で配布しています。

ダウンロードアーカイブの内容は下記のようになっています。

/Archives
　entry.mtml
　entry_listing.mtml
　page.mtml
 
/Indexes
　styles.mtml
　main_index.mtml
 
/Modules
　categories.mtml
　comment_detail.mtml
　comment_form.mtml
　comments.mtml
　entry_detail.mtml
　entry_metadata.mtml
　entry_summary.mtml
　footer.mtml
　header.mtml
　page_detail.mtml
　sidebar.mtml
　sidebar2.mtml
　tags.mtml
　trackbacks.mtml
 
/System
　comment_error.mtml
　comment_response.mtml
　search_results.mtml

各ファイルは下記の対応にしたがって、デフォルトテンプレートと入れ替えてください。

*：テンプレートモジュールを新規作成する必要があります（２項参照）。

１．２ 投稿者情報（entry_metadata.mtml）

パーマリンクをタイムスタンプから「Permalink」に変更しました。

１．３ コメントフォーム（comment_form.mtml）

認証機能を使用しない場合はコメントフォームが非表示になるようにしました（デフォルトテンプレートと同じ）。

１．４ コメント完了（comment_response.mtml）

コメント投稿が受け付けられた場合、コメント完了画面に遷移する設定が可能ですので、その場合、「受け付けました」という旨のメッセージを表示するようにしました。

２．利用時の注意1

本テンプレートはデフォルトを3カラム固定レイアウトにしており、「サイドバー」「サイドバー2」というテンプレートモジュールを新規作成する必要があります。「サイドバー」は右サイドバー用、「サイドバー2」は左サイドバー用です。

上記の2つのテンプレートモジュールは、下記のタグでインデックス・テンプレート／各アーカイブテンプレートに事前に埋め込んでいます。

<$MTInclude module="サイドバー"$>

<$MTInclude module="サイドバー2"$>

この2つのテンプレートモジュールを作成しておかないと、作業途中でエラーが発生する可能性がありますのでご注意ください。

この説明で分からない場合は、「テンプレートの再構築で「モジュールというテンプレートが見つかりませんでした」というエラーになる場合の対処」を参照ください。

３．利用時の注意2

テンプレートの内容をペーストする際は、テキストエリア右上にある「構文強調表示／強調表示なし」から「強調表示なし」」を必ず選択してください。「構文強調表示」のままペーストすると元ファイルの改行が反映されません。機能が改善されていますので、どちらでも問題なくペーストできます。

４．その他

本テンプレートはベータ版という位置づけでご利用ください。動作の不具合は随時お知らせ頂ければ幸いですが、問題内容によってはフィードバックできない場合があります（本体にバグがある場合等）。

また、インデックス・テンプレートの「スタイルシート(ベーステーマ)」は使用しておりません。アーカイブインデックスは別途作成したいと思います。

「Movable Type テンプレート（XHTML 1.0 Strict 版）」をご利用の方で、サイドメニューの折りたたみやツリー化等、過去のカスタマイズ記事を適用される場合の注意事項です。

XHTML 1.0 Strict 版では、サイドバーのマークアップに定義リスト（di / dt/ dd）を用いています。マークアップは、おおざっぱには次のようになっています。

<dl id="links-left">
<dt class="sidetitle">メニュータイトルA</dt>
<dd class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</dd>
 
<dt class="sidetitle">メニュータイトルB</dt>
<dd class="side">
    <ul>
        <li>メニューリストB1</li>
        <li>メニューリストB2</li>
　　　　　　　　：
        <li>メニューリストBn</li>
    </ul>
</dd>
　　：
</dl>

例えば、「サイドメニューの折りたたみ」で用いているマークアップは div を用いた、次のようなマークアップになっています。また、script 要素も存在します。

<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>

dl の子要素として許容されているのは、dt / dd だけなので、「サイドメニューの折りたたみ」のサンプルマークアップをそのまま XHTML 1.0 Strict 版に埋め込んでしまうと、

<dl id="links-left">
<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>
　　：
</dl>

という風になり、

• dl 要素の子要素に div 要素は許容されない
• dl 要素の子要素に script 要素は許容されない

といったエラーが発生し、結果的に valid な（X）HTML になりません。

このような誤ったマークアップにならないよう、

• div 要素は dt / dd 要素に修正
• script 要素は body 終了タグの直前に移動（どうしてもマークアップの近くに配置したい場合は script 要素を dd 要素で括ってください）

等の書き換えを適宜行ってください。

また、昨日の「Ajax によるモジュール化」では、３項の「テンプレートの内容」、

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

を、静的な表示部分（赤色）を削除して

<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>

に変更し、４項の

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>

に先程削除したマークアップを追加し、要素名を追加・変更して、

<dt class="sidetitle">
Recent Entries
</dt>
 
<dd id="entries"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>
</dd>

に変更すると良いでしょう。
ただし、先程と同様、script 要素は dd で括るよりも、body 終了タグの直前に移動した方が良いでしょう。

いずれにしても、カスタマイズを行った後は下記のツールを利用して、適切なマークアップになっていることを確認しましょう。

• The W3C Markup Validation Service
• Another HTML-lint gateway
• XHTML タグ一覧表示ツール

お詫び：ベータ版の利用規約に抵触する可能性があるため、テンプレート配布は中止させて頂きました。ご迷惑をおかけして申し訳ございません。配布は再開しています（関連記事）。

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

１．１ テンプレート構成

「Movable Type 4 のテンプレート構造」「Movable Type 4 のテンプレート構造（その2：MTInclude に着目したテンプレート関係図）」でお知らせしている通り、MT4 ではテンプレート構成が大きく変更されています。3.3 からアップグレードした場合は以前の構成が引き継がれますが、新規インストールの場合は、MT3 とかなり異なった構成になります。
今回は新規インストールの方をターゲットにした構成（下記）で配布しています。

/Archives
　entry.mtml
　entry_listing.mtml
　page.mtml
 
/Indexes
　base_stylesheet.mtml
　main_index.mtml
 
/Modules
　categories.mtml
　comment_detail.mtml
　comment_form.mtml
　comments.mtml
　entry_detail.mtml
　entry_metadata.mtml
　entry_summary.mtml
　footer.mtml
　header.mtml
　sidebar.mtml
　sidebar2.mtml
　tags.mtml
　trackbacks.mtml
 
/System
　comment_error.mtml
　comment_pending.mtml
　comment_preview.mtml
　search_results.mtml

１．２ 投稿者情報（entry_metadata.mtml）

パーマリンクをタイムスタンプから「Permalink」に変更しました。

１．３ コメントフォーム（comment_form.mtml）

認証機能を使用しない場合はコメントフォームが非表示になるようにしました（デフォルトテンプレートと同じ）。

１．４ コメント保留（comment_pending.mtml）

コメント投稿が受け付けられた場合もコメント保留画面に遷移するので、その場合、「受け付けました」という旨のメッセージを表示するようにしました。

２．3カラムレイアウト利用時の注意

本テンプレートはデフォルトを3カラム固定レイアウトにしており、その場合、Sidebar2 というモジュールを新規作成する必要があります。
下記のタグを各インデックス・テンプレート／アーカイブテンプレートに埋め込んでいます。

<$MTInclude module="Sidebar2"$>

Sidebar2 を新規作成しない状態で再構築するとエラーになりますのでご注意ください。

３．その他

本テンプレートはベータ版という位置づけでご利用ください。動作の不具合は随時お知らせ頂ければ幸いですが、問題内容によってはフィードバックできない場合があります（本体にバグがある場合等）。

また、インデックス・テンプレートの「Theme Stylesheet」は使用しておりません。

2008.08.06
配布停止の文言を削除しました。

当サイトで配布中の Movable Type テンプレートを 3.3 用にバージョンアップしました。新しいテンプレートは下記の「Movable Type テンプレート」のページからダウンロードしてご利用ください。

Movable Type テンプレート

主な変更点は下記の通りです。

１．XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素（p 要素など）を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう（このサイトは XHTML 1.0 Transitional ですが）。

この変更に伴って下記の修正も実施しました。

• form 要素に fieldset 要素追加
• textarea 要素に初期値設定（エントリー・アーカイブ）

２．各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事（アーカイブ）名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。

３．サイドバーの XHTML マークアップ変更

div 要素を多用していたサイドバー、および各メニューリストのマークアップを定義リスト（dl/dt/dd）に変更しました。（X）HTMLでは文書の構造を明確にするためのもので、無意味に div を多用することは推奨されていません。この点に関しては反省を踏まえて見直しを行ないました。

４．float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による流し込み解除に修正しました。

関連記事：CSS の after 擬似要素で回り込みを解除する

５．フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

• NOTE：フォントサイズ指定手法 / 続フォントサイズ指定手法

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事：Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

６．line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

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

• Lucky bag::blog：line-height の値には単位なしが良いとされる理由

７．エントリータイトルにパーマリンクを設定

これまでエントリー本文下の投稿時刻にのみパーマリンクを設定していましたが、ユーザビリティおよびSEO（内部リンクには意味のある文言があう方が良い）を考慮し、エントリータイトルにもアンカーを追加しました。

８．エントリータイトルの目印を border プロパティに変更

ある意味このテンプレートのトレードマークだった「●」印から border プロパティによる罫線に変更しました。

９．pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

１０．バナーの class 属性名変更

先人の方々の意見を参考に「banner」から「header」に変更しました。

１１．カレンダーのマークアップおよびセレクタ名変更

thead および tbody を追加。またセレクタ名が混沌としていたので全面的に見直しました。

１２．追記部分の MTEntryIfExtended タグを MTIfNonEmpty に変更

3.3 では MTIfNonEmpty が推奨されているので変更しました。

１３．エントリー画像用CSS設定削除

エントリーに表示する画像を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

１４．コメントエリアの div 要素整理

コメント部分のマークアップはデフォルトテンプレートの構造をある程度継承していましたが冗長な div 要素を削除しました。なおコメント・トラックバックに関してはサイドバー並みのマークアップ見直しはできておりません。予めご容赦ください。

１５．コメントアウトされたマークアップをMTIgnoreで括る

コメント・トラックバックのポップアップ画面用のアンカーを簡単に切り替えられるよう、コメントアウトした状態で記述していましたが、冗長なマークアップとして残ってしまうのを避けるため、MTIgnore を利用して、ページに表示されないように変更しました。

１６．その他

あまり大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています（文書構造にデザインを示す単語を用いるのが適切でないことは理解しています）。

Movable Type のテンプレート編集画面を開くと、MT3.x の場合、下に示すスクリーンショット赤枠の「このテンプレートにリンクするファイル」、MT4,x の場合、「ファイルへのリンク」がありますが、このフィールドについての利用方法をご存知ない方が少なくないのではないでしょうか。

Movable Type 3.x

Movable Type 4.x

このフィールドはオーサリング・ツールを利用する方、あるいはテンプレートをカスタマイズする方にとってはかなり役に立つ機能を有しています。
ということで、本エントリーではこの「このテンプレートにリンクするファイル」および「ファイルへのリンク」の使い方を紹介します。説明に使用しているスクリーンショットは Movable Type 3.x のものですが、Movable Type 4.x の動作も同じです。

１．外部ファイルを Movable Type と同期させる

このフィールドの本来的な使い方は、Dreamweaver、GoLive等のオーサリング・ツールで作成したテンプレートを Movable Type の再構築あるいはテンプレート編集と同期させることです。オーサリング・ツールで作成したテンプレートは編集画面のテキストエリアにペーストするのではなく、このフィールドに外部ファイル名として指定するだけで自動的に読み込ませることができます。
以下、「このテンプレートにリンクするファイル」を設定されたファイルを、便宜上「リンクファイル」と記します。

例えば、作成したテンプレートを下記のようにリンクファイルとして指定します。指定する時にファイルの実体はなくても構いませんが、後で「リンクファイル」となるファイルは指定したパスにアップロードします。

この状態で、Movable Type の管理画面から（いきなり）再構築を実行すると、リンクファイルの内容をHTMLページやCSSに反映することができます。

またテンプレート編集画面を開くと、リンクファイルの内容がテキストエリアに反映された状態で表示されます。もちろんデータベースにも反映されます（編集画面を表示した時にデータベースに設定されるようです）。

上記をまとめると、次のような振る舞いになります。

*1：リンクファイルの実体があり、その内容が空（0 バイト）のファイル

つまり、データベースの内容とリンクファイルに差分がある場合は、リンクファイルの内容が空でない限り、リンクファイルが優先されます。

改めて図で示します。
リンクファイルがない場合のテンプレート編集や再構築時の動作は次の通りです。

上図のように、テンプレート編集や再構築を実行すると、Movable Type のテンプレート情報は基本的にデータベースから取得し、そのデータを元に HTML や CSS ファイルを出力します。

これと異なり、リンクファイルが存在する場合は、リンクファイルの情報を先に取得してページを生成し、同時にリンクファイルの内容をデータベースに反映する、という訳です（下図）。

リンクファイルは、インデックス/アーカイブ/システム/モジュール、すべてのテンプレートに設定することができます。またこのフィールドにはファイル名だけでなく、パスを設定することができます。Movable Type 配布元の Six Apart は、絶対パス（"/"から開始）による指定を推奨しています。

この仕組みを理解しておけば、テンプレート編集画面を利用せずに、テンプレートの内容を効率的にHTMLやCSSの内容に反映させることができます。
オーサリング・ツールとの具体的な連携方法例については下記のサイトが参考になるでしょう。

• Mathatelle：Movable Type のテンプレートを Dreamweaver で編集する
• 21世紀のアフィリエイト通販生活：DreamweaverでMovableTypeのテンプレートを編集！

２．テンプレートをバックアップする

本来の利用方法ではありませんが、このフィールドを利用してテンプレートをバックアップする方法がかなり有名です。他のサイトでこのフィールドをそのように利用する方法が多く紹介されてますし、私自身、当初はそういう使い方をするフィールドと思い込んでました。

設定方法は１項と同様、「このテンプレートにリンクするファイル」に任意のパスを設定するだけです。ファイル名はテンプレートと対応がとれるよう、分かりやすい名称にしておくと良いでしょう。まバックアップ用のパス（tmpl 等）を作っておき、そこに出力するようにしておくとサーバ上にファイルが煩雑にならずにすみます。

この設定をしておくことで、テンプレート編集画面上での修正内容がデータベース以外に、リンクファイル、つまり物理的なファイルをサーバ上に保存しておくことができます。
リンクファイルはテンプレート編集画面の「保存」または「保存および再構築」をクリックした時に更新されます。MTタグも変換されず、そのまま出力されます。

万が一、データベースが壊れて、Movable Type にアクセスできなくなってしまっても、テンプレートはファイルに残ってますので、Movable Type を改めてインストールした時に、リンクファイルの内容をテキストエリアにペーストするか、「このテンプレートにリンクするファイル」に保存されているリンクファイルのパスとして設定すれば、簡単に復活させることができます。

2009.05.02
Movable Type 4.x の説明を追加しました。

１．テンプレートの修正

基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報（青色）を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

追加部分全体を div 要素で括り、エントリーと同じ class="entry" を与えています。これで全体のスタイルがエントリーと同じものになります。

その下のタイトルは class="news-header" という新しい class 属性を与え、表示位置を整えています。また本文の p 要素にも class="news-content" を与えています。

２．スタイルシートの修正

下記の内容をスタイルシートに追加します。

.news-header {
    margin: 5px 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
}
.news-content {
    margin-top: 5px;
}

設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。

ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。

３．テンプレートモジュールにする

お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。

３．１ 新しいテンプレートモジュールの作成

管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。

テンプレート名：news
モジュールの内容：下記をコピー

<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>

３．２ テンプレートの修正

テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<$MTInclude module="news"$>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

スタイルシートは２項の内容をそのままお使いください。

なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

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;
}

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

リスト3.1 変更例

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: #dddddd;
}

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

現在配布中の Movable Type 3.3 テンプレートで、コメント・プレビュー／コメント・エラー画面からの Typekey コメント投稿に不具合があることが、ご利用サイトの Shady Grove さんからのご質問で発覚致しました。

具体的には下記のような現象が発生します。

1. Typekeyサインイン中にもかかわらず、コメント・プレビュー／コメント・エラー画面のコメントフォームに「名前」「メールアドレス」の入力フィールドが表示される（「サインインを受け付けました?」という文言は表示されます）
2. コメント・プレビュー／コメント・エラー画面からのコメント投稿後、該当コメントに対してコメンター画像が表示されない（名前・メールアドレスを空欄にして投稿すれば Typekey コメントとして認識されますが、直感的にフィールドに入力してしまうため結果的にこの問題が発生します）

「Movable Type テンプレート」のダウンロードアーカイブは昨日夜に修正版に差し替えましたが、それ以前にご利用の方は申し訳ありませんが下記のいずれかの方法で修正してください。

• 「Movable Type テンプレート」のダウンロードアーカイブを再度ダウンロードして、コメント・プレビュー・テンプレートおよびコメント・エラー・テンプレートのみ差し替える
• 現在お使いのコメント・プレビュー・テンプレートおよびコメント・エラー・テンプレートに対し、下記の修正を実施

修正前

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

修正後（青色部分を追加）

<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">

onload 属性は 3.2 テンプレート配布当初は設定していたのですが、その後、何かのカスタマイズの動作確認で設定を外し、そのまま 3.3 テンプレートとして用いてしまったようです。

なお、ダウンロードアーカイブに変更した Movable Type 3.2 テンプレートは 3.3 を元に作成しているため、同様の不具合があります（アーカイブは修正済）。

以上です。
ご迷惑おかけして大変申し訳ございません。

公開テンプレートの固定3カラムの中央カラムの幅を補正して、バナー広告を設定するカスタマイズを紹介します。ここでは標準サイズである、幅 468px（468x60）のキーワード広告を設定してみます。下のスクリーンショットは完成例です。

１．カスタマイズ前の状態

現在公開中のテンプレートは、2年ほど前に初めて Movable Type 用の3カラムテンプレートを作成した時からカラム幅を変更しておりませんらず、その後公開した Serene Bach、FC2ブログ、Seesaaブログ等のテンプレートも同じデザインを使用しています。

しかしながら広告の配置について全く考慮していなかったため、例えば固定3カラムの中央カラムのデフォルト幅は、標準バナーサイズの 468px より 20px ほど狭い状態になったままです。

ということで、デフォルト状態のままバナー広告を設定すると、下のスクリーンショットのように中央カラムから広告がはみ出してしまい、右カラムが中央カラムの下に折り返してしまいます。またバナー広告の位置補正もできていません。

サイズ補正したテンプレートの公開云々についてはさておき、以下、中央カラム上部（または下部）にバナー広告を表示するための設定方法です。

２．テンプレートの修正

バナー広告をサンプルのように中央カラム上部に表示する場合、各テンプレート（メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリーアーカイブ）の下記の位置に挿入しています。またバナー広告全体を div 要素で括ってください。

　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="ad">
[バナー広告用タグ]
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　　　　：

ページ下に挿入する場合は下記の位置が良いでしょう。

　　　　　　　：
</div><!-- /entry -->
 
</MTEntries>
 
<div class="ad">
[バナー広告用タグ]
</div>
 
</div><!-- /blog -->
　　　　　　　：

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

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

修正前

.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;
}
　　　　　　　：
　　　　　　（略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

修正後

.layout-three-column #box {
    width: 870px;
    _width: 872px;
    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;
}
　　　　　　　：
　　　　　　（略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 498px;
    _width: 500px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

プロパティの先頭に "_" がついているのは、IE/Mozzika 系ブラウザの表示の差異をなくすための「アンダースコア・ハック」です。

さらにバナー広告を括っている div 要素の class 属性に下記のプロパティを設定し、広告の表示位置を補正します。

.ad {
    margin:8px 0 18px 5px 
}

以上です。
これで再構築を行えば冒頭のスクリーンショットのようになると思います。

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

Movable Type テンプレート

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

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

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

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

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

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

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

3.2

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

3.3

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

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

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

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

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

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

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

3.2

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

3.3

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

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

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

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

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

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

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

3.2

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

3.3

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

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

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

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

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

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

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

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

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

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

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

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

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

マルチカラムレイアウトでサイドバーを丸ごと折りたたむカスタマイズを紹介します。動作は Windows XP+IE6.0/Firefox1.5/Opera8.0 で確認しています。
下記にサンプルを用意しましたのでお試しください。

サイドバーの折りたたみサンプル

タイトル下の両端にあるリンクをクリックすると、サイドバーの表示・非表示が切り替わります。また折りたたみ時にリンクの内容を変更することができます。サンプルは3カラムですが、2カラムレイアウトでの折りたたみも可能です。

１．動作条件

下記の条件で動作します。

• cookieが有効であること
• 固定レイアウト（3カラムおよび2カラム）であること

また公開テンプレートで動作するように設定していますので、公開テンプレート以外でご利用になる場合はスクリプトを修正する必要があります。

２．機能概要

下記のような動作でサイドバーを折りたたみます。

1. 折りたたみ用リンクをクリック
2. JavaScript起動
3. cookieより現在のレイアウト名を取得
4. クリックされたリンク位置（右または左）と現在のレイアウトを判定し、新しいレイアウトに変更
5. カラム幅がどのレイアウトでも同一になるように、レイアウトに応じて中央カラム幅を変更
6. 変更したレイアウトに応じてクリックされたテキストリンクを変更
7. 変更したレイアウト名をcookieに保持

３．ドネーション

カスタマイズ内容のご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるため、ご遠慮ください。

• 現状のコンテンツで役立った
• 質問の回答で疑問や不具合が解消された
• エントリーの修正等で要望内容が満たされた

等の後に判断して頂ければ結構です。
参考：Web投げ銭

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

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

下記のリンクより sidebarfolder.js をダウンロードし、ご利用のブログのディレクトリにアップロードしててください（ブログツール・ブログサービスによってアップロード先は若干異なります）。

sidebarfolder.js

なお、このスクリプトの先頭に使用するレイアウトを設定する行があります。

var layout = 'layout-three-column';

デフォルトは3カラムになっていますので、2カラムで利用する場合は下記のように変更してください。

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

var layout = 'layout-two-column-left';

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

var layout = 'layout-two-column-right';

５．テンプレートの修正（スクリプトのインクルード）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に下記を追加します。

Movable Type の場合

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

Serene Bach の場合

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

FC2ブログの場合

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

６．テンプレートの修正（折りたたみ用ナビゲーション追加）

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

　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
 
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　：

６．２ 2カラムレイアウト（左サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
</div>

６．３ 2カラムレイアウト（右サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>

７．テンプレートの修正（JavaScript 追加）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に、A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsの一部を追加します。すでにご利用になっている場合は不要です。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

８．スタイルシート修正

スタイルシートに下記を追加します。

#navi {
    padding: 3px;
    border-bottom: 1px solid #666699;
    text-align:center;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    display: inline;
}
#navi ul li {
    display: inline;
}
#leftmark {
    margin-right: 395px;
}
#rightmark {
    margin-left: 395px;
}

Movable Type 3.2 テンプレートにアーカイブページ用テンプレートを新しく追加しました。
追加した理由は利用促進ではなく、「アーカイブページ」テンプレートに「カテゴリー・アーカイブ」や「エントリー・アーカイブ」等のアーカイブテンプレートを誤って設定される方が結構いらっしゃるため、それを回避するための施策です。

それに併せて、上記エントリーの各テンプレートのタイトルに [インデックス] [アーカイブ] [システム] という、管理ページのテンプレート編集画面にあるタブ名を加えました。これでどのテンプレートをどこに貼り付ければ良いか判断しやすくなると思います。誤って設定される方が現われないことを期待しています。

なお、追加したアーカイブページテンプレートの中央カラムの表示内容は、デフォルトテンプレートのアーカイブページに合わせていますので、中央カラムには全エントリーのリストがずらずらと表示されるだけです。
表示内容を月別・カテゴリー別等に変更したい場合は、アーカイブページを作るを参照ください。

CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。

前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。

サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。

CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。

１．cookie 保持スクリプトの追加

状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

このスクリプトは QuirksMode：Cookies からの抜粋です。

２．スタイル切り替えスクリプトに cookie 保持起動の追加

CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
　　　　　：
　　　（中略）
　　　　　：
  }
  createCookie('style', id, 365);
}
//-->
</script>

createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。

３．ページ読み出し時の cookie 取得処理追加

状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。

<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
    changeColumn(id);
}
//-->
</script>

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

公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。

とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。

以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。

その理由は、現在公開しているテンプレートでは1つのスタイルシートに

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

の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。

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

CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。

body.layout-three-column {
    margin-bottom: 20px;
}
.layout-three-column #box {
    width: 850px;
}
.layout-three-column #content {
    float: left;
    width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。

つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。

以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。

１．スクリプトの追加

切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
    elements[0].setAttribute('class','layout-three-column');
    elements[0].setAttribute('className','layout-three-column');
  } else if(id == '3l') {
    elements[0].setAttribute('class','layout-three-column-liquid');
    elements[0].setAttribute('className','layout-three-column-liquid');
  } else if(id == '2l') {
    elements[0].setAttribute('class','layout-two-column-left');
    elements[0].setAttribute('className','layout-two-column-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2ll') {
    elements[0].setAttribute('class','layout-two-column-liquid-left');
    elements[0].setAttribute('className','layout-two-column-liquid-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2r') {
    elements[0].setAttribute('class','layout-two-column-right');
    elements[0].setAttribute('className','layout-two-column-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '2rl') {
    elements[0].setAttribute('class','layout-two-column-liquid-right');
    elements[0].setAttribute('className','layout-two-column-liquid-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '1') {
    elements[0].setAttribute('class','layout-one-column');
    elements[0].setAttribute('className','layout-one-column');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '1l') {
    elements[0].setAttribute('class','layout-one-column-liquid');
    elements[0].setAttribute('className','layout-one-column-liquid');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  }
}
//-->
</script>

２．切り替え用プルダウンメニューの追加

１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。

　　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
 
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select> 
</form>
 
<div class="blog">
　　　　　　　　：

リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）

<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>

３．スタイルの追加

２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。

#cc {
    text-align:center;
    padding-top: 15px;
}

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

１．失敗例

本サイトの公開テンプレート（2カラム・右にサイドバー表示）のCSSで右サイドバーのレイアウトを指定しているセレクタに、背景色（グレー）を追加してみます。

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
    background-color: #dddddd;
}
.layout-two-column-right #links-right {
    padding: 15px 15px 0;
    color: #ffffff;
}

２．正しい設定方法

２．１ 画像を用意する

背景となる画像を用意します（リンクをクリックするとここで用いる画像が表示されます）。

背景画像サンプル

この画像は中央カラムの背景（白）およびサイドバーの背景（グレー）となるものです。長さ667pxで作っています。

この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをフリーのキャプチャソフトでキャプチャして、その一部分を切り抜いたものです（厳密には後で若干修正しています）。

２．２ 画像のアップロード

作成した画像を images ディレクトリ等にアップロードします。ここでは back.jpg というファイル名にしています。

２．３ スタイルシート修正

styles-site.css を下記のように修正します。
まずリスト上の #box に対し、背景画像を表示するための background プロパティを追加します（青色）。url には先ほどアップロードした画像を指定します。
次にデフォルトで表示しているボックス両脇の罫線を削除し、background-color プロパティも不要のため削除します（赤色）。

リスト下の #content については、中央カラムと右カラムを区切る罫線、および中央カラム下の罫線を削除し（赤色）、区切り線は画像を使って描画しています（無理に罫線を入れる必要はありません）。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    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: url(images/back.jpg) repeat-y;
}
　　　　　　：
/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

background: #ffffff url(images/back.jpg) repeat-y top right;

とすれば中央カラムは白背景で、右寄りに画像が配置されます（間違ってたらすいません）。

現在公開中のMovable Type 3.2 テンプレート・Serene Bach テンプレート・FC2ブログテンプレートについて、下記の部分を修正致しました（sbテンプレートは対象外にしました）。

1. スタイルシートの全称セレクタから font-weight プロパティを削除
2. 見出し用のタイプセレクタを追加
3. エントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタを集約

1 と 2 については、「太字が反映されません」というコメントを何回か頂いたものの修正です。反映されない原因は全称セレクタに font-weight プロパティを設定していたためで、これを 見出し（h1?h6）の font-weight プロパティに変更しました。
具体的には下記の変更を行っています（赤色を削除して青色を追加）。

変更前

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
}

変更後

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
 
/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

3 についても「コメント・トラックバックタイトルの配色はどこで変更すればよいでしょうか？」という質問を何回か頂いていたものの修正です。エントリー日付の配色を変更された際、コメント・トラックバックタイトルの配色も変更されると思いますが、どこを変更して良いか分かりにい状態になっておりました。
これについては1ヶ所の変更でエントリー日付・コメントタイトル・トラックバックタイトルに反映されるよう、配色に関するセレクタをまとめました。
具体的には下記の変更を行っています（赤色を削除して青色を追加）。

変更前

/* エントリー日付 */
.date { 
    margin: 6px 5px 0;
    padding: 2px 0 2px 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 11px;
    font-weight: bold;
}
 
.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding: 2px 0 2px 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 11px;
}

変更後

/* エントリー日付 */
.date { 
    margin: 6px 5px 0;
    padding: 2px 0 2px 5px;
    font-size: 11px;
    font-weight: bold;
}
 
/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.date, 
.trackbacks-header,
.comments-header,
.comments-open-header {
    color: #ffffff;
    background: #8fabbe;
}
 
.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding: 2px 0 2px 5px;
    font-size: 11px;
}

その他、軽微な誤りも併せて修正しています。Movable Type で動作確認したものを他のテンプレートに反映させておりますので、不具合等ございましたらご連絡ください。

コメント・トラックバックを非表示にする方法の続きで、管理画面の設定変更でこれまでに受けたコメント・トラックバックもスクリーンショットのように同時に非表示にするカスタマイズです。必要性の有無は別として、テクニックのひとつとして紹介致します。

１．コメント情報を非表示にする

デフォルトテンプレートや公開テンプレートのメインページやアーカイブページにあるコメントへのリンクやコメント数、およびエントリー・アーカイブの投稿コメント・コメントフォーム（以下「コメント情報」とします）の表示制御には MTIfCommentsActive タグが使われています。このタグは「コメント投稿が可能またはエントリーにコメントが存在する場合」にタグに括られた部分を有効となるため、「コメントを受け付けない」設定にしても、既に受け付けたコメントがある場合、コメント数や投稿コメントは表示されることになります。

これらをまとめて非表示にするには MTIfCommentsAccepted タグを利用します。MTIfCommentsAccepted タグは「コメント投稿が可能な場合」のみ、タグに括られた部分を有効としますので、このタグに置き換えることでコメントの有無にかかわらず、コメント情報を非表示にすることができます。
以下変更方法です。

１．１ テンプレートの修正

デフォルトテンプレートのメインページ場合、下記の赤色部分

<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>

を青色の

<MTIfCommentsAccepted>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsAccepted>

に変更します。他のアーカイブでも MTIfCommentsActive を探して MTIfCommentsAccepted に置き換えればOKです。

１．２ 設定の変更

管理画面の「設定」→「コメント／トラックバック」の「投稿を受け付ける条件」で「なし」を選択し、再構築することでコメント情報が非表示になります（「すべて」または「認証サービスで認証されたコメント投稿者のみ」を選択するとコメント情報が表示されます）。

２．トラックバック情報を非表示にする

１項とほぼ同じで、メインページやアーカイブページにあるトラックバックへのリンクやトラックバック数、およびエントリー・アーカイブのトラックバックURL・トラックバック（以下「トラックバック情報」）には MTIfPingsActive タグが使われています（部分的に MTIfPingsAccepted も使われています）が、これを MTIfPingsAccepted タグに置き換えることでトラックバック情報をまとめて非表示にすることができます。

２．１ テンプレートの修正

デフォルトテンプレートの場合、下記の赤色部分

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>

を青色の

<MTIfPingsAccepted>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsAccepted>

に変更します。に変更します。他のアーカイブでも MTIfPingsActive を探して MTIfPingsAccepted に置き換えればOKです。

２．２ 設定の変更

管理画面の「設定」→「コメント／トラックバック」の「トラックバックを受信」でチェックをはずし、再構築することでトラックバック情報が非表示になります（チェックをするとトラックバック情報が表示されます）。

３．その他

色々と組み合わせて動作は確認しておりますが、表示が設定通りにいかない場合は一旦全体を再構築してみてください。

Movable Type のデフォルトテンプレートや公開テンプレートでコメントまたはトラックバックを非表示にする方法です。ご質問を頂いたので本エントリーにて紹介致します。

基本的にはテンプレートの修正は不要で、管理画面の設定のみでこれらを制御することができます。

１．コメントを受け付けない設定にする

管理画面の「設定」→「コメント/トラックバック」のコメント設定欄の一番上にある「投稿を受け付ける条件」の「なし」を選択して設定を保存します。あるエントリーに対し、コメントが1件もない場合、インデックステンプレートを再構築することでメインページやアーカイブページのコメント数表示やエントリー・アーカイブのコメント欄が非表示になります。

２．トラックバックを受け付けない設定にする

管理画面の「設定」→「コメント/トラックバック」のトラックバック設定欄の一番上にある「トラックバックを受信」のチェックボックスのチェックを外して設定を保存します。あるエントリーに対し、トラックバックが1件もない場合、全体を再構築することでメインページやアーカイブページのトラックバック数表示やエントリー・アーカイブのトラックバック欄が非表示になります。

３．注意事項

上記までの設定は受付に関する設定であり、一旦コメントまたはトラックバックを受け付けてしまうとそれらの情報については１・２項の設定とは無関係に表示されることになります（デフォルトテンプレート・公開テンプレートとも）。
コメント・トラックバック受付の設定と表示・非表示も同時に連動させる方法については、別途エントリーしたいと思います。

とりあえず開設当初からコメント・トラックバックを受け付けない設定にしておけば１・２項の設定で目的は達成できます。

４．お詫び

現在公開中の Movable Type 3.2 テンプレートですが、エントリー・アーカイブにおいてトラックバック受信後にトラックバックを受け付けない設定にした場合、トラックバックURLのタイトルのみが表示されるという不具合が発見されましたので、先ほど修正致しました。

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

単純に考えると、スタイルシートのサイドバー用セレクタ（#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 という赤色部分が背景色の設定ですのでお好きな色を設定してください。

公開テンプレートのカラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。スクリーンショットは固定レイアウトにフッタを追加したものです（フッタ部分のみ切り取って表示させています）。
Serene Bach 版はデフォルトでフッタを設定していますが、Movable Type 版は設定していなかったのでここでご紹介します。Serene Bach 版もカスタマイズすることで本記事のようなデザインに変更することが可能です。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

１．固定レイアウトの場合

１．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素（終了タグ）の間に青色で示したフッタを挿入します。

注：FC2ブログテンプレートの固定レイアウトにはフッタを用意してますので、１．１項の設定は不要です（CSSは若干異なりますので適宜変更してください）。

　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
　　　　　　：

１．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-three-column #footer {
    margin : 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、「.layout-three-column #box」と「.layout-three-column #content」で検索しましょう。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　　　：
　　　　　（中略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

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

当サイトで公開しているリキッドレイアウトは左右カラムを absolute（絶対値）指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

注：FC2ブログテンプレートのリキッドレイアウトではフッタが表示されるようになっていますので、２項の設定は不要です。

２．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素（終了タグ）と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　：

２．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-three-column-liquid #footer {
    margin : 15px 0 0;
    padding-top: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

３．3.1xをご利用の場合

上記のカスタマイズは3.2x用です。3.1xまではCSSの設定が異なるため、１．２項にある

.layout-three-column #footer {
　　　　　　：
.layout-three-column #box {
　　　　　　：
.layout-three-column #content {
　　　　　　：

または２．２項の

.layout-three-column-liquid #footer {
　　　　　　：

の赤色部分を削除してください。

2005.12.23 追記
3.1x 用のカスタマイズ方法を追加しました。

2007.2.25 追記
HTMLマークアップを変更しました。それに伴い CSS も一部変更しました。

当サイトにお越しくださりありがとうございます。
最近サイトアクセスが不安定になる事象が続いておりまして、ご利用者の皆様には大変ご迷惑をおかけしてしまい申し訳なく存じます。アクセス不具合の対策としてWebサーバ（Apache）のチューニングとアクセス負荷の軽減を考えておりますが、その一環でテンプレートご利用の皆様にお願いがあります。

アクセスログを確認したところ、テンプレートに付属している小粋空間クレジットバナーのURLが

<!-- クレジットバナー -->
　　　　　　　：
http://www.koikikukan.com/images/koikikukan.gif

のままになっている方がかなりいらっしゃるようです。

クレジットバナーURLの変更につきましてはテンプレートのページでお願いしておりますが、URLを変更されない場合、ご自身のサイトを表示すると同時に、クレジットバナー表示のために当サイトへのアクセスが同時に発生します。テンプレートご利用者数の増加に比例して、クレジットバナーへのアクセスも増加しており、現在ログ全体の約15%がバナーへのアクセスで占められています。

ということで、この場をお借りして改めてバナーURL変更のお願いです。

変更方法ですが、IEをお使いであればクレジットバナーの画像を右クリックして「対象をファイルに保存」を選択し、koikikukan.gif というファイル名（他の名称でもかまいません）で保存します。そして保存したファイルをご自身のサーバの任意のディレクトリにアップロードしてください。それからテンプレートに記述されているクレジットバナーのURLを、上記のURLから画像を配置されたURL、例えば index.html と同じディレクトリにアップロードされた場合であれば、

http://ご自身のブログURL/koikikukan.gif

にご変更ください。なお対象のテンプレートはメインページ／カテゴリーアーカイブ／日付アーカイブ／エントリー・アーカイブです。
お手数をかけて申し訳ございませんがサーバ負荷軽減のため、ご協力くださいますようどうぞよろしくお願い致します。

先日の3.2 アップグレードによるテンプレート変更箇所の 3.15x-ja 版です。3.15x-ja と 3.17x-ja では公開テンプレートの個別エントリーアーカイブが微妙に異なっているので、その部分をカバーしました。デフォルトテンプレートもほぼ同じだと思います。

1カラム版を元に作成していますので2カラム・3カラムの方はヘッダおよび中央カラム部分が対象となります。なおコメント・プレビュー／コメント・エラーについては 3.15x-ja と 3.17x-ja は同じですので先のエントリーを参照願います。

また3.2 アップグレードによるテンプレート変更箇所もここ10日ほどで何ヶ所か手直ししております。動作に不具合がある方は再度ご確認頂ければ幸いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="http://www.movabletype.org/" />
 
<title><$MTBlogName$>: <$MTEntryTitle$></title>
 
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
 
<link rel="start" href="<$MTBlogURL$>" title="Home" />
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryPrevious>
<MTEntryNext>
<link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryNext>
<MTInclude module="Remember Me">
 
<$MTEntryTrackbackData$>
 
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
 
<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
</head>
 
<body class="layout-three-column" onload="individualArchivesOnLoad(commenter_name)">
 
<div id="box">
 
<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<!-- コンテンツ開始 -->
<div id="container">
 
<div class="blog">
 
<div id="menu">
<MTEntryPrevious>
<a href="<$MTEntryPermalink$>">≪ <$MTEntryTitle$></a> |
</MTEntryPrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTEntryNext>
| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> ≫</a>
</MTEntryNext>
</div>
 
<h2 class="date"><$MTEntryDate format="%x"$></h2>
 
<div class="blogbody">
 
<h3 class="title">●<$MTEntryTitle$></h3>
 
<$MTEntryBody$>
 
<div id="a<$MTEntryID pad="1"$>more"><div id="more">
<$MTEntryMore$>
</div></div>
 
<div class="posted">Posted by <$MTEntryAuthor$> at <$MTEntryDate$>
<!-- トラックバックを別ウィンドウに表示する場合ここから
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">トラックバック</a>
</MTEntryIfAllowPings>
     トラックバックを別ウィンドウに表示する場合ここまで -->
 
</div><!-- posted -->
</div><!-- blogbody -->
 
<!-- トラックバックを同一ウィンドウに表示する場合ここから -->
<MTEntryIfAllowPings>
<MTIfPingsActive>
<a id="trackbacks" name="trackbacks"></a>
<div class="comments-head">トラックバックURL</div>
<div class="comments-body">
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>
</div>
 
<MTIfNonZero tag="MTEntryTrackbackCount">
<!--
<p>このリストは、次のエントリーを参照しています:  <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
-->
<MTPings>
<MTPingsHeader><div class="comments-head">トラックバック</div></MTPingsHeader>
<MTPings>
<div class="comments-body">
<p id="p<$MTPingID$>">
≫ <a href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<div class="comments-post">Tracked on <$MTPingDate$></div>
</div><!-- comments-body -->
</MTPings>
</MTIfNonZero>
</MTIfPingsActive>
</MTEntryIfAllowPings>
<!-- トラックバックを同一ウィンドウに表示する場合ここまで -->
 
<MTEntryIfAllowComments>
<MTIfCommentsActive>
 
<a id="comments" name="comments"></a>
<MTComments>
<MTCommentsHeader><div class="comments-head">コメント</div></MTCommentsHeader>
 
<MTComments>
<a id="c<$MTCommentID$>" name="c<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<div class="comments-post">Posted by <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>
 
<MTEntryIfCommentsOpen>
 
<MTIfCommentsAllowed>
 
<div class="comments-head">コメントしてください</div>
<div class="comments-body">
 
<MTIfRegistrationRequired>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>.
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.getElementById('thanks').style.display = 'block';
} else {
    document.write('サイン・インしていません。このサイトにコメントをする前に登録してください。 <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a>');
    document.getElementById('thanks').style.display = 'none';
}
// -->
</script>
 
<MTElse>
コメント登録機能を利用するには、TypeKey トークンを設定してください。
</MTElse>
</MTIfNonEmpty>
 
<MTElse> <MTTemplateNote value="Case of comments not required">
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.write('サイン・インを確認しました、', commenter_name, 'さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
    document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfNonEmpty>
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments_form" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<script type="text/javascript">
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
</script>
 
<MTIfCommentsModerated>
<p class="comments-open-moderated">
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
</p>
</MTIfCommentsModerated>
 
<div id="name_email">
<div id="name-email">
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" /></p>
 
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" /></p>
</div>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.getElementById('name_email').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>
 
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" />
</p><p>
<label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="9" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />情報を保存する？</label>
保存しますか?
<input type="radio" id="remember" onclick="rememberMe(this.form)" name="bakecookie" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
</p>
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br />
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" name="preview" tabindex="5" 
    value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" 
    tabindex="6" value=" 投稿 " />
</div>
</form>
 
</MTElse>
 
</MTIfRegistrationRequired>
 
</div><!-- comments-body -->
 
</MTIfCommentsAllowed>
 
<script type="text/javascript" language="javascript">
<!--
if (document.comments_form.email != undefined)
    document.comments_form.email.value = getCookie("mtcmtmail");
if (document.comments_form.author != undefined)
    document.comments_form.author.value = getCookie("mtcmtauth");
if (document.comments_form.url != undefined)
    document.comments_form.url.value = getCookie("mtcmthome");
if (getCookie("mtcmtauth") || getCookie("mtcmthome")) {
    document.comments_form.bakecookie[0].checked = true;
} else {
    document.comments_form.bakecookie[1].checked = true;
}
//-->
</script>
 
</MTEntryIfCommentsOpen>
 
</MTEntryIfAllowComments>
</MTIfCommentsActive>
 
</div>
</div>
<!-- コンテンツ終了 -->
 
<br clear="all" />
 
</div>
 
</body>
</html>

Movable Type で月別・週別・日別のアーカイブページを作成する場合、デフォルトで使用されるアーカイブテンプレートは「日付アーカイブテンプレート」です。つまり、ひとつのテンプレートで3種類のアーカイブページを賄う設定になっています。

ですが、それぞれのアーカイブページで異なる動作を行いたい場合、例えば、月別アーカイブページでは「×年×月のページ」、日別アーカイブページでは「×月×日のページ」というタイトルを振りたい時、同じテンプレートを使っているとMTタグのみでこのような設定を行うことはできません（多分）。

ここでは、日別・週別アーカイブページに対し、新しく日別アーカイブテンプレート／週別アーカイブテンプレートを作成・対応させるカスタマイズを紹介します。これを行うことでアーカイブページとテンプレートの対応（アーカイブマッピング）は下記のようになります。

なお、これ以外の用途で新しくアーカイブテンプレートを作成する場合にも参考になると思います。

１．テンプレートの作成

まず日別用アーカイブの元となる日付アーカイブテンプレートをテキストコピーします。
管理メニューの「テンプレート」→「アーカイブ」→「日付アーカイブ」の順にクリックし、テンプレートの内容をコピーします。

次に管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」の順にクリックし、次のページで下記の内容を設定します。

テンプレート名：日別アーカイブ

このテンプレートにリンクするファイル：（空白）

テンプレートの内容：先ほどコピーした内容をペースト

設定が完了したら保存します。週別アーカイブテンプレートも同じ要領で作成し、「テンプレート名」を「週別アーカイブ」とします。

２．アーカイブマッピングの変更

「アーカイブマッピング」とは冒頭の説明の通り、あるアーカイブページとアーカイブテンプレートの対応です。ここではアーカイブページを生成する際、どのテンプレートを使用するかの設定を行います。

管理メニューの「設定」→「公開」→一番下の「アーカイブマッピング」欄に進みます。右側にある「マッピングを新規作成」をクリックすると画像のような設定画面が表示されますので、プルダウンメニューより下記のように選択し、「追加」をクリックします。画像は日別アーカイブのマッピング例です。

日別の場合

アーカイブの種類：日別　テンプレート：日別アーカイブ

週別の場合

アーカイブの種類：週別　テンプレート：週別アーカイブ

ということで、画像のように新しく作ったアーカイブマッピングだけ残っている状態になればOKです。

３．再構築を有効にする

上の画像の一番左にあるチェックボックスは、再構築対象にする・しないを決めるためのものです。上の画像では日別アーカイブは再構築されますが、週別アーカイブは再構築されない状態を示しています。Movable Type のデフォルト状態では日別・週別にはチェックされていないので、再構築が必要なアーカイブにチェックをつけて保存します。
これで全ての設定は完了です。

公開テンプレートをお使い頂いた方からよく「再構築でエラーになります」という質問を頂くのですが、公開テンプレートのメインページ（や他のアーカイブページ）にはカレンダーを表示するようにしており、カレンダーを表示するタグの中に

<a href="<$MTEntryLink archive_type="Daily"$>">

という設定があります。これはカレンダーの日付のリンクで、リンク先として日別アーカイブページを archive_type 属性で設定しています。この設定は日別アーカイブページの再構築を有効な状態にしておかないと再構築時に

テンプレート「ｘｘｘページ」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました: <$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

というエラーになります。再構築を有効にするための設定がこの「アーカイブマッピング」の日別欄のチェックです。
デフォルトではここがチェックされていないためエラーになる訳です。

４．公開テンプレート修正例

公開テンプレートでは日付アーカイブページに

<div class="sidetitle">
The list of "<$MTArchiveTitle$>"
</div>
 
<div class="side">
<MTEntries>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

という、該当アーカイブページの一覧を表示するサイドメニューを設置しています。
月別アーカイブでは青色の生成されるタイトル部分が

The list of "2005年10月"

となりますが、日別アーカイブでは

The list of "2005年10月20日"

と、やや長くなります。
日付アーカイブを共用しているとこの部分は変更できないのですが、独立させた日別アーカイブテンプレートのみ、例えば

<div class="sidetitle">
The List of "<$MTArchiveDate format="%b"$>月<$MTArchiveDate format="%d"$>日"
</div>

と変更することで、日別アーカイブページの該当部分を

The list of "10月20日"

という表示に変更することが可能になります。

使い方

* カッコ内は 3.2 で英語版の StyleCatcher プラグインを利用する場合の項目を表示しています。

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

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

サムネール画像が表示されたらそれをクリックし、（複数ブログがある場合のみ）右下のプルダウンメニューから適用するブログを選択（Select a Weblog...）、最後に「デザインを適用（Choose this Design）」でクリックします。
成功すると、

新しいテーマを適用しました（Successfully applied new theme selection.）

というダイアログが表示されます。これで全体を再構築をすれば新しく選択したスタイルがブログに反映されます。

レイアウト切り替え

公開テンプレートと同様、スタイルシートひとつで1カラム?3カラムまでの各レイアウトに対応しています。
レイアウトは、各テンプレートの body 要素の class属性を書き替えることで行います（詳細はMovable Type テンプレートの１項を参照してください）。
なお公開テンプレートと異なる点として、デフォルトレイアウトのカラム名（IDセレクタ）は左から alpha、beta、gamma と指定するようになっています。またそれぞれに xxx-inner という名称のセレクタが存在します。

インストール後のデフォルトレイアウトは、本文に alpha、右カラムに beta という id 属性が割り当てられています。下記はメインページのHTMLマークアップです。

         ：
       （略）
         ：
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
                ：
        （左カラム：本文）
                ：
         </div>
      </div>
      <div id="beta">
         <div id="beta-inner" class="pkg">
                ：
      （右カラム：サイドバー）
                ：
         </div>
      </div>
   </div>
</div>
         ：
       （略）
         ：

これを3カラムに変更するにはHTMLマークアップを下記のように変更します。

         ：
       （略）
         ：
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
                ：
      （左カラム：サイドバー）
                ：
         </div>
      </div>
      <div id="beta">
         <div id="beta-inner" class="pkg">
                ：
       （中央カラム：本文）
                ：
         </div>
      </div>
      <div id="gamma">
         <div id="gamma-inner" class="pkg">
                ：
      （右カラム：サイドバー）
                ：
         </div>
      </div>
   </div>
</div>
         ：
       （略）
         ：

まず、右カラム部分の id 属性名 beta と beta-inner を gamma および gamma-inner に変更します。同様に中央カラムの id 属性名 alpha および alpha-inner を beta と beta-inner に修正します。最後に左カラムになる alpha と alpha-inner という id 属性名の div 要素を追加します。

3カラムレイアウトの各カラムと id 属性の対応は下記のようになります。

• alpha/alpha-inner：左カラム（左サイドバー）
• beta/beta-inner：中央カラム（本文）
• gamma/gamma-inner：右カラム（右サイドバー）

2カラム（左サイドバー）に変更する場合は、

• alpha/alpha-inner：左カラム（サイドバー）
• beta/beta-inner：中央カラム（本文）

となるように修正します。

3.17-ja（以降）から 3.2-ja にアップグレードされた場合の、各テンプレートの変更箇所をまとめてみました。3.15x-ja からアップグレードされた方は3.2 アップグレードによるテンプレート変更箇所（3.15x用）をご覧ください。

なお 3.2 英語版では、3.1x のテンプレートでコメントが正常に投稿できないという問題がありましたが、3.2 日本語版に 3.17-ja 以降 のテンプレートを設定したところ、この記事の変更を行わなくても正常に投稿できました。ということで無理にこの変更を行う必要はないと思いますが、3.2 では色々と改善されていると思われますのでお勧めレベルの内容です。

また 3.2 がリリースされたかなり早い時期に下記のエントリーがあがっており、参考にさせて頂きました。ありがとうございました。

The blog of H.Fujimoto：Movable Type 3.2でのコメント入力フォームの変更

以下、修正箇所について説明します（不足ありましたらお許しください）。

１．メインインデックス／カテゴリー・アーカイブ／日付アーカイブ

body 要素

コメント・トラックバック欄のMTタグ MTEntryIfAllowPings および MTEntryIfAllowComments（赤色）を MTIfPingsActive および MTIfCommentsActive（青色）に変更します

修正前

<MTEntryIfAllowPings>
　　　　　　　：
</MTEntryIfAllowPings>
 
<MTEntryIfAllowComments>
　　　　　　　：
</MTEntryIfAllowComments>

修正後

<MTIfPingsActive>
　　　　　　　：
</MTIfPingsActive>
 
<MTIfCommentsActive>
　　　　　　　：
</MTIfCommentsActive>

２．エントリーアーカイブ／コメント・プレビュー／コメント・エラー

head 要素

<head>～</head> にある Remember Me のインクルードは不要ですので下記の行を削除します。

<MTInclude module="Remember Me">

その代わりに、<head>～</head> にJavaScriptのインクルードを追加します。

<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>

コメント・プレビュー／コメント・エラーの場合はさらにもう1行追加します。

<script type="text/javascript" src="<MTStaticWebPath>js/commenter_name.js"></script>

body 要素

<body onload="individualArchivesOnLoad(commenter_name)">

またコメント・トラックバックのMTタグ MTEntryIfAllowPings および MTEntryIfAllowComments（赤色）を MTIfPingsActive および MTIfCommentsActive（青色）に変更します

修正前

<MTEntryIfAllowPings>
　　　　　　　：
</MTEntryIfAllowPings>
 
<MTEntryIfAllowComments>
　　　　　　　：
</MTEntryIfAllowComments>

修正後

<MTIfPingsActive>
　　　　　　　：
</MTIfPingsActive>
 
<MTIfCommentsActive>
　　　　　　　：
</MTIfCommentsActive>

なお、MTPings MTComments タグについてはこれまで通りですが、コメント・トラックバックが存在しない場合はタグに挟まれたデータは表示されませんのでご注意ください。

３．その他

上記以外の変更箇所は文章での説明が困難ですので、公開テンプレートを例にして、3.1x-ja から 3.2-ja への修正箇所をリストでまとめて表示します。デフォルトテンプレートもほぼ同じ変更で済むと思いますので参考になれば幸いです。削除を赤色、追加を青色で示しています。

エントリーアーカイブ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="http://www.movabletype.org/" />
 
<title><$MTBlogName encode_html="1"$>: <$MTEntryTitle$></title>
 
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
 
<link rel="start" href="<$MTBlogURL$>" title="Home" />
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryPrevious>
<MTEntryNext>
<link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryNext>
<$MTEntryTrackbackData$>
 
<MTInclude module="Remember Me">
<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
 
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
 
</head>
 
<body onload="individualArchivesOnLoad(commenter_name)">
 
<div id="box">
 
<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<!-- コンテンツ開始 -->
<div id="container">
 
<div class="blog">
 
<div id="menu">
<MTEntryPrevious>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> |
</MTEntryPrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTEntryNext>
| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNext>
</div>
 
<h2 class="date"><$MTEntryDate format="%x"$></h2>
 
<div class="blogbody">
 
<h3 class="title">●<$MTEntryTitle$></h3>
 
<$MTEntryBody$>
 
<div id="a<$MTEntryID pad="1"$>more"><div id="more">
<$MTEntryMore$>
</div></div>
 
<div class="posted">Posted by <$MTEntryAuthor$> at <$MTEntryDate$>
 
</div><!-- posted -->
</div><!-- blogbody -->
 
<!-- トラックバックを同一ウィンドウに表示する場合ここから -->
<MTEntryIfAllowPings>
<MTIfPingsActive>
<a id="trackbacks" name="trackbacks"></a>
<div class="comments-head">トラックバックURL</div>
<div class="comments-body">
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>
</div>
 
<MTIfNonZero tag="MTEntryTrackbackCount">
<!--
<p>このリストは、次のエントリーを参照しています:  <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
-->
<MTPings>
<MTPingsHeader><div class="comments-head">トラックバック</div></MTPingsHeader>
<MTPings>
<div class="comments-body">
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<div class="comments-post">Tracked on <$MTPingDate$></div>
</div><!-- comments-body -->
</MTPings>
</MTIfNonZero>
</MTIfPingsActive>
</MTEntryIfAllowPings>
<!-- トラックバックを同一ウィンドウに表示する場合ここまで -->
 
<MTEntryIfAllowComments>
<MTIfCommentsActive>
 
<a id="comments" name="comments"></a>
<MTComments>
<MTCommentsHeader><div class="comments-head">コメント</div></MTCommentsHeader>
 
<MTComments>
<a id="c<$MTCommentID$>" name="c<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<div class="comments-post">Posted by <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>
 
<MTEntryIfCommentsOpen>
 
<MTIfCommentsAllowed>
 
<div class="comments-head">コメントしてください</div>
<div class="comments-body">
 
<MTIfRegistrationRequired>
 
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>.
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<