Movable Type 4 スタイル用テーマ修正
当サイトで現在配布中の「Movable Type 4 スタイル用テーマ」に一部不具合があったため、修正しました。
修正内容は次の通りです。
- フッタの高さおよび、フッタに表示されていたクレジットバナーを非表示に変更
- メインページ・コメントプレビュー・検索結果でサイドメニュータイトルの内容が空のときに表示される空のタイトルを非表示に変更
- 「最近のコメント」のコメント投稿者のフォントを太字から通常の文字に変更
- RSSのアイコン左に表示されているリストマークを非表示に変更
修正前（赤色部分が問題箇所）
修正後
スタイルの設定方法は元記事の「Movable Type 4 スタイル用テーマ」を参照してください。
Movable Type 4 スタイル用テーマ
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 のテンプレートを1クリックで切り替えるカスタマイズ（その3：テンプレートを切り替える）
「Movable Type のテンプレートを1クリックで切り替えるカスタマイズ」の3回目は、配布テンプレートを利用するにあたっての事前準備、およびテンプレート切り替えについて記します。
このエントリーを投稿するために、実際に当サイトおよび他サイトで配布されているテンプレートを拝借してテンプレート切り替えを行ってみました。で、手前味噌ですが、
- 「これはいい！」
の一言です。
準備さえ整えばテンプレートをわずか数秒で切り替えられます。再構築の手間を差し引いても、適用するテンプレートが一斉に切り替わるのは爽快です。
下記に当サイトのテンプレートを用意しましたので、もしよろしければ試してみてください。
アーカイブ（利用方法は２項参照）
URL（利用方法は４項参照）
http://www.koikikukan.com/styles/library/
なお動作は Movable Type 3.3x で行っています。3.2x については未確認ですので予めご容赦ください。またいくつかの制約がありますので、ご利用になる前に必ず５項「注意事項」をご覧ください。
１．事前準備
テンプレート切り替えを実現するにあたっての準備です。少し面倒な作業ですが、一度設定してしまえばあとは簡単ですので、是非トライしてみてください。
１．１ StyleCatcher ソースコード修正
まず、StyleCatcher プラグインでスタイルシート以外のテンプレートを読み込めるようにするため、下記のパッチをダウンロードし、plugins/StyleCatcher/lib/StyleCatcher.pm に適用します。パッチについては「パッチをあてる（その1：適用方法）」をご覧ください。
パッチがお分かりにならない場合は、plugins/StyleCatcher/lib/StyleCatcher.pm をダウンロードし、任意のエディタで開いて下記の赤色部分を修正、および青色部分を追加し、保存後、元のディレクトリにアップロードしてください。念のため、ファイルのバックアップ（StyleCatcher.pm.bak がいいです）はとっておきましょう。
# Replacing the theme import or adding a new one at the beginning
my $template_text = $tmpl->text();
my @template_lines = split(/\r?\n/, $template_text);
my $replaced = 1;
my $header = '/* This is the StyleCatcher theme addition. Do not remove this block. */';
：
（中略）
：
# Putting the stylesheet back together again
$tmpl->text(join("\n", @template_lines));
$tmpl->save or return $app->json_error($tmpl->errstr);
my %templates = ($basename . '.css' => "stylesheet",
'main_index.tmpl' => "index",
'master_archive_index.tmpl' => "index",
'individual_entry_archive.tmpl' => "individual",
'category_archive.tmpl' => "category",
'datebased_archive.tmpl' => "archive",
'comment_preview_template.tmpl' => "comment_preview",
'comment_error_template.tmpl' => "comment_error",
'comment_pending_template.tmpl' => "comment_pending",
'search_results_template.tmpl' => "search_template");
require MT::Template;
$url = $app->param('url');
my $user_agent = $app->new_ua;
for my $name (keys %templates) {
$url = $new_url . $name;
my $request = HTTP::Request->new(GET => $url);
my $response = $user_agent->request($request);
next unless $response->is_success;
$tmpl = $templates{$name} eq 'stylesheet' ?
$app->load_style_template($blog_id) :
MT::Template->load({ blog_id => $blog_id, type => $templates{$name} });
$tmpl = MT::Template->load({ blog_id => $blog_id, outfile => 'archives.html' })
if $name eq 'master_archive_index.tmpl';
$tmpl->text($response->content);
my $saveroot = $blog_themeroot ? $blog_themeroot : $sys_themeroot;
$tmpl->linked_file(File::Spec->catfile($saveroot, $basename, $name));
$tmpl->save or return $app->json_error($tmpl->errstr);
}
# Store our current theme information
$app->plugin->set_config_value("current_theme_$blog_id", $basename);１．２ StyleCatcher 設定
管理画面の「メイン・メニュー > システム・メニュー > プラグイン」 のページで、StyleCatcher と表示された右側にある「設定を表示」をクリック。
中央に設定画面が開くので下記の内容を設定し、「変更を保存」をクリック。
- テーマのルートURL：（修正しない）
- テーマのルートパス：（修正しない）
- Style Library へのURL：「テーマのルートURL（一番上の内容）」を設定
ここでは自サイトにテンプレートセットをアップロードする設定を前提に書いていますが、外部URLを設定して取得する場合は、４項「外部URLを指定してテンプレートセットを取得する方法」を参照ください。
１．３ スタイルライブラリページ作成
アップロードしたテンプレートを StyleCatcher で表示させるために「スタイルライブラリページ」をインデックステンプレートとして作成します。ここでは予めサンプルである当サイトのテンプレートを読み込む設定（link 要素）を加えています。
[テンプレート]-[インデックス]タブのページ右上の[テンプレートを新規作成]をクリックし、次のページで下記を設定。
- テンプレート名：StyleCatcher（←何でもいいです）
- 出力ファイル名：mt-static/themes/index.html
- テンプレートの内容：下記
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!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" xml:lang="<$MTDefaultLanguage$>" lang="<$MTDefaultLanguage$>">
<head profile="http://www.w3.org/2003/g/data-view">
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/koikikukan3/koikikukan3.css" />
<title>Theme Repository</title>
</head>
<body>
</body>
</html>設定後、保存・再構築します。これで mt-static/themes 配下に index.html が生成されます。
また、新しいテンプレートをアップロードした場合は、このテンプレートに link タグを追加します。例えば hogehoge というテンプレートをアップロードしたら、このテンプレートに、
：
<head profile="http://www.w3.org/2003/g/data-view">
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/koikikukan3/koikikukan3.css" />
<link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/hogehoge/hogehoge.css" />
<title>Theme Repository</title>
</head>
：と、青色の行を追加し、保存・再構築します。
２．配布テンプレートのダウンロードとアップロード
ここではサンプルとして下記のテンプレートセットをダウンロードしてください。
ダウンロードしたアーカイブを解凍し、次のディレクトリ構成（青色）になるように mt-static/themes 配下にアップロードします。
mt-static/
themes/
index.html
koikikukan3/
archive.tmpl
category.tmpl
comment_error.tmpl
comment_pending.tmpl
comment_preview.tmpl
index.tmpl
individual.tmpl
master_archive_index.tmpl
search_template.tmpl
koikikukan3.css３．テンプレート切り替え
いよいよテンプレート切り替えを実行します。
まず StyleCatcher を起動します。管理画面の[テンプレート]で次のページ下に表示された「StyleCatcherでデザインを選ぶ」をクリックします。
（サンプル通りであれば）左ペインに「Theme Repository」が表示されますので、選択状態にすると右ペインにサンプルテンプレート（koikikukan 3 column for changing template）が表示されます。
その画像をクリックし、右下の「デザインを適用」をクリックします。システムメニューから StyleCatcher を起動するとボタン左にブログ選択用のセレクトボックスが表示されますので、テンプレートを切り替えたいブログを選択してから「デザインを適用」をクリックしてください。
「新しいテーマを適用しました」というダイアログが表示されれば完了です。
これで該当ブログのテンプレートが入れ替わっていればOKです。さくらのブログ（スタンダードプラン） + SQLite で試したところ、ボタンをクリックして1秒でダイアログが表示、つまりテンプレートが切り替わりました。
４．外部URLを指定してテンプレートセットを取得する方法
２項は、一旦ダウンロードしたテンプレートを読み込む方法を紹介しましたが、配布サイトのURLを指定することで切り替えることも可能です。ただし、切り替え後のテンプレート修正履歴は再切り替え後には反映されません。
管理画面の「メイン・メニュー > システム・メニュー > プラグイン」 のページで、StyleCatcher と表示された右側にある「設定を表示」をクリック。
中央に設定画面が開くので下記の内容を設定し（3番目の項目が外部URLになります）、「変更を保存」をクリック。
- テーマのルートURL：（修正しない）
- テーマのルートパス：（修正しない）
- Style Library へのURL：外部URLを設定
外部URLには、冒頭に記した当サイトの配布URL
http://www.koikikukan.com/styles/library/
を指定してみてください。通常の StyleCatcher 用のテーマ（KOIKIKUKAN Classic）も表示されますが、「koikikukan 3 column for changing template」を選択してください。
５．注意事項
- 本カスタマイズ前にご利用になっているテンプレートは、テンプレート切り替えにより消去されます。カスタマイズしていないデフォルトテンプレートであればバックアップされているので問題ありませんが、それ以外の場合は、切り替える前に必ずテンプレートのバックアップをとり、保存してください（「その2：テンプレート配布方法」にしたがって保存するのが一番お勧めです）。
- ダウンロードするテンプレートに日本語が含まれている場合、ブログの文字コードが一致している必要があります。当サイトで配布しているテンプレートは utf-8 のみ対応しています。
- 複数ブログを利用している場合も、１．２項の Style Library へのURL は同一です。つまりブログ単位で異なる Style Library へのURLは設定できません（プログラム内部で mt-static のパスを参照している模様）。言い換えると、「１．３ スタイルライブラリページ」も含め、いずれかひとつのブログで設定されていればOKです。
- １．２項で「テーマのルートURL」「テーマのルートパス」が ?mt-static/themes でない場合は ?mt-static/themes に修正してください（インストールしてから StyleCatcher の設定を触っていなければ心配ありません）。
- その1：概要
- その2：テンプレート配布方法
- その3：配布テンプレート利用方法
Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その2：テンプレート配布方法）
「Movable Type のテンプレートを1クリックで切り替えるカスタマイズ」の2回目は、テンプレートの配布方法を記します。
「その1：概要」でも書いた通り、テンプレート切り替え機能を実現するにあたって、例えば TemplateCatcher や ThemeChanger といったプラグインを作り、それらで同様の機能を実現しても良い訳です。ただし実装に依存する配布形態・配布方法が複数存在するのは配布サイト・利用ユーザともに好ましくないので、インタフェース部分はできるだけ規定しておきたいという思いがあります。流行らない可能性大ですが。
おおまかな方針としては、StyleCatcher を利用している経緯があるので、配布側の稼動を考慮し、StyleCatcher の方式を踏襲し、既存のテーマ変更との互換性を保つようにしています。
１．配布条件
- URLアクセスまたはアーカイブ形式で配布
- スタイルシートは必須
- テンプレートを全て揃える必要はない
- サムネイルを同梱（StyleCatcher に準ずる）
２．ファイル名付与規則
本機能でサポートするテンプレートおよびテンプレートの各ファイル名は下記の通りです。Movable Type の default_templates 配下のファイル名と同一にしていますが、スタイルシートのみ StyleCatcher のお作法にしたがい、名称が[テーマ名]になります。
| テンプレート名 | ファイル名 |
|---|---|
| メインページ | main_index.tmpl |
| スタイルシート | [テーマ名].css |
| アーカイブページ | master_archive_index.tmpl |
| エントリー・アーカイブ | individual_entry_archive.tmpl |
| カテゴリー・アーカイブ | category_archive.tmpl |
| 日付アーカイブ | datebased_archive.tmpl |
| コメント・プレビュー | comment_preview_template.tmpl |
| コメント・保留 | comment_pending_template.tmpl |
| コメント・エラー | comment_error_template.tmpl |
| 検索結果 | search_results_template.tmpl |
３．ファイル・ディレクトリ構成
下記のファイル・ディレクトリ構成でテンプレートセットを配布します。
[テーマ名]/
[テーマ名].css
archive.tmpl
category.tmpl
comment_error.tmpl
comment_pending.tmpl
comment_preview.tmpl
index.tmpl
individual.tmpl
master_archive_index.tmpl
search_template.tmpl
thumbnail.gif
thumbnail-large.gifここで挙げているテンプレートはフルセットの場合であり、前述した配布条件の通り、全てのテンプレートを用意する必要はありません。例えばコメントエラー・コメント保留等を省きたい場合は、それらのファイルがない状態でファイルを配置してください。
また、[テーマ名]ディレクトリの上位のディレクトリに index.html を置けば、通常の StyleCatcher 用リポジトリとしての互換性を保つことができます。要するに、StyleCatcher 用テーマを配布されているのであれば、テーマディレクトリに .tmpl ファイルが追加になるだけという訳です。
さらにこのディレクトリをアーカイブしてユーザに配布することで、ユーザにとっては機能の選択肢がより広がることになります。
４．制限事項
配布テンプレートに全角文字が含まれる場合、ブログの文字コードと一致している必要があります。
2007.04.26 追記
４項を追記しました。
Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その1：概要）
各サイトで配布されている Movable Type テンプレートを入れ替えるのは結構面倒ですが、メインページ・スタイルシート・各アーカイブテンプレートおよびシステムテンプレート等、主要なテンプレートを1クリックで切り替えられるようにするカスタマイズをご紹介します。
注：この情報は Movable Type 4.0 まで有効です。4.1 以降は標準機能でテンプレートを切り替えることが可能です。
カスタマイズ記事はできるだけ1エントリーで完結するようにこころがけていますが、長文であることと、配布サイト／利用ユーザのいずれかによって知るべき内容が異なるので、久々にシリーズものとしてエントリーします。
以下の3回に分けて解説します。
- その1：概要
- その2：テンプレート配布方法
- その3：配布テンプレートの取得とテンプレート切り替え
私の勝手な思いでこのカスタマイズを説明していきますが、配布方法に依存する箇所があるため、賛同頂けるテンプレート配布サイトの方々のご協力を頂ければ幸いです（実装はどうにでもなりますが仕様が大事だと思ってます）。
また、記事内容についてのご意見も併せてお待ちしております。
１．現状の Movable Type でのテンプレート入れ替えについて
現在、Movable Type のデフォルトプラグイン StyleCatcher を用いることでスタイルシートの切替が可能ですが、「スタイルシートだけでなく、他のテンプレートも入れ替えられる仕組みはないだろうか？」とお考えになったことはないでしょうか。
StyleCatcher ではテーマ（デザイン）の変更が簡単にできる反面、下記の制約があります。
- (X)HTMLマークアップが固定であるため、カラム増減やナビゲーション、メニューリスト等の追加はユーザ依存
- ベースCSS（
base-weblog.css）との共存 *これはメリットでもありますが - 配布された CSS を変更する場合はテンプレート編集画面ではなく、theme ディレクトリにある外部 CSS を修正
つまり、StyleCatcher のそもそものスタンスが「カスタマイズをせずにブログのデザインを手軽に変更する」ためのもので、そのニーズに合ったユーザには便利な機能です。が、独自のマークアップや異なるカラムレイアウトでテンプレートを提供したいというケースでは、このプラグインの恩恵に預かることができません。
したがって独自にマークアップされた配布テンプレートを利用する場合、ユーザは編集画面を開いてテンプレートをひとつずつコピー＆ペーストで入れ替えるか、default_templates 配下のファイルを入れ替えるのが現状と思われます。
また、WordPress や Serene Bach のテンプレート（テーマ）切替機能のように、複数のテンプレートセットを保持・あるいは瞬時に切り替えられる仕組みがないことは、テンプレート入れ替えを躊躇う要因のひとつになっているかもしれません。
２．主な機能
本シリーズのカスタマイズを行うことで下記が可能になります。
- 複数のテンプレートセットをご自身のサイトに保持できます
- テンプレートを簡単に切り替えることができるようになります
- 利用したテンプレートをカスタマイズし、途中で他のテンプレートに切り替えても、それまでにカスタマイズした履歴は保存されるので、再読み込みした時に復活できます
３．仕組み
このカスタマイズでは StyleCatcher を利用します。StyleCatcher ではテーマを配布している外部のURLを指定してテーマを取得しますが、ここではご自身で利用している Movable Type の URL（mt-static/theme）を指定します。
下は従来の StyleCatcher 利用時の動作です。
配布サイトのURLを指定して（?）、表示されたテーマ（?）を選択（?）することで該当のスタイルシートがダウンロードされ、ファイルとして保存されます（?）。テーマファイル（CSS）はテンプレートに直接書き込まれず、@import 文で base-weblog.css とともに外部ファイルとして読み込まれます。
こちらがカスタマイズ後の動作です。
ディレクトリ構成・ファイル名付与規則にしたがったテンプレートを配布サイトからダウンロードし、自サイトにアップロードします（?）。StyleCatcher にはテンプレートをアップロードしたURLを指定し（?）、そこで表示されたテーマ（?）を選択（?）することで、全てのテンプレートをデータベースに読み込み、切り替えます（?）。もちろんテーマファイル（CSS）もテンプレートとして書き込まれます（base-weblog.css へのリンクはありません）。
また、自サイトにアップロードしたファイルをそのままテンプレートの外部ファイルとして関連付けをします。こうすることで、例えば取得したテンプレートAをカスタマイズして、その後他のテンプレートBに切り替えても、テンプレートAのカスタマイズ内容は外部ファイルに残りますので、 StyleCatcher でテンプレートAに再び切り替えた時、以前のカスタマイズ内容を復活させることができます。
なお、図は省略していますが、従来の StyleCatcher 利用と同じように、配布サイトのリポジトリにアクセスしてテンプレートを切り替えることも可能です。ただし常に配布サイトからテンプレートを取得するので、アクセスするURLを切り替えないとカスタマイズ履歴が消滅します（詳細は後述します）。
ダイナミックパブリッシングと併用すれば、まさにデザインをダイナミックに変更することが可能になり、利便性が向上することでしょう。
Movable Type スタイルライブラリ一覧
Movable Type のスタイルライブラリ一覧です。この一覧は「StyleCatcher」というキーワードでヒットしたサイトから探して掲載しております（ウェブ上の全てのサイトを網羅できている訳ではありません）。
The Style Contest for Movable Type, Typepad and LiveJournal
*表示に時間がかかります
ライブラリの利用方法は以下の通りです（3.3以降の場合）。
- 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「設定を表示」をクリック
- テーマを保存するための「テーマのルートURL」「テーマのルートパス」が表示されているので問題なければそのまま「変更を保存」をクリック
- 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「StyleCatcherを起動」をクリック。または管理メニューの[テンプレート]で下に表示されている「StyleCatcherでデザインを選ぶ」をクリック
- 「テーマ/リポジトリへのURL」に上記のURLを入力して「スタイル検索」をクリック（デフォルトで設定されているURLは Movable Type 英語サイトのライブラリです）
- 接続OKであれば下のスクリーンショットのようにテーマが表示されますので、お好みのテーマをクリックして右下の「デザインを適用」をクリック
Movable Type 3.3 テンプレート（for StyleCatcher）
 現在 3.2 用として公開中の StyleCatcher ライブラリを 3.3 のテンプレートにも適用できるよう修正致しました。 |
下記のURLをコピーして StyleCatcher プラグインの「テーマ/リポジトリへのURL: （Theme or Repository URL）」に設定し、「スタイル検索（Find Style）」をクリックしてください。
ライブラリはひとつしか登録していませんが、3.2 および 3.3 のいずれでも利用可能です。また表示に関する既存の不具合がいくつかありましたので、併せて修正致しました。
ご利用方法の詳細については下記のエントリーを参照ください。
StyleCatcher 用のテンプレートでカレンダーを表示する
現在公開中のMovable Type 3.2 テンプレート（for StyleCatcher）に、カレンダーを設置する場合のカスタマイズです。スタイルシートをすでにカスタマイズされている方は下記の手順で実施してください。なおリポジトリのスタイルシート内容もカレンダー追加を想定して先ほど修正致しました（不具合ありましたらご連絡ください）。
１．カレンダーテンプレートの設定
カレンダーを表示したページのサイドメニュー（デフォルトテンプレートでサイドメニューがあるのはトップページだけですが）に、下記のタグを追加します。ここでは Movable Type ユーザー・マニュアルに記述されたカレンダーを使っています。
<div class="module-calendar module">
<h2 class="module-header">カレンダー</h2>
<div class="module-content">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar">
<caption><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center">Sun</th>
<th abbr="Monday" align="center">Mon</th>
<th abbr="Tuesday" align="center">Tue</th>
<th abbr="Wednesday" align="center">Wed</th>
<th abbr="Thursday" align="center">Thu</th>
<th abbr="Friday" align="center">Fri</th>
<th abbr="Saturday" align="center">Sat</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td <MTCalendarIfToday> bgcolor="#EEEEEE" </MTCalendarIfToday> align="center">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</div>２．スタイルシートの設定
デフォルトのスタイルではうまく表示されないため、下記の青色部分の内容をスタイルシート（styles-site,css または リポジトリの classic.css）に追加します。ここでは styles-site.css への追加イメージを掲載しておきます。
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/../base-weblog.css);
@import url(/../classic.css);
/* end StyleCatcher imports */
.module-calendar .module-content {
margin: 0 -10px 0 2px;
_margin: 0 -2px 0 -3px;
padding-bottom: 5px;
font-size: 9px;
}
.module-calendar .module-content th {
padding-bottom: 3px;
font-size: 9px;
_font-size: 8px;
width: 20px;
}
.module-calendar .module-content td {
padding: 2px 0;
font-size: 9px;
line-height: 120%;
_line-height: 100%;
}なお style-site.css に追加した場合、他のスタイルに切り替えた際に追加部分が消去されると思いますので、classic.css への追加を推奨します。
StyleCatcher リポジトリ公開方法
 StyleCatcher プラグイン用のリポジトリ（repository）公開方法を記します。これを行うことで、本サイトで公開しているリポジトリ（画像）のように、StyleCatcher上でご自身のテーマ（CSS）を公開することができます。 |
１．用意するもの
１．１ テーマ画像（サムネール）
（thumbnail.gif）テーマ一覧にサンプルとして表示するためのテーマ画像（サムネール）です。ファイル名は「thumbnail.gif」です。表示される時のサイズは 120×90 になります。
１．２ テーマ画像
（thumbnail-large.gif）テーマ一覧のサムネール画像をクリックした後、右側の「詳細を表示」をクリックした時にサンプルとして表示するためのテーマ画像です。ファイル名は「thumbnail-large.gif」です。表示される時のサイズは 300×250 になります（高さは作成した画像によって異なるようです）。
１．３ スタイルシート
（xxx.css）テーマとなるスタイルシートです。任意の名称で結構ですが、拡張子を含まない部分は、その上位のディレクトリと同じ名称にしてください。例えば、hogehoge.css という名称にする場合、スタイルシートをアップロードする上位のディレクトリ名も hogehoge とします。
StyleCatcher を利用してテーマを切り替えるとこの hogehoge というフォルダがユーザの StyleCatcher用フォルダにコピーされるため、他のテーマと重複しないような名称が望ましいでしょう。
またスタイルシートの先頭付近に下記のデータを設定してください（サンプルの内容は当リポジトリのものに近いです）。
/*
name: koikikukan Style Library
designer: yujiro
designer_url: http://www.koikikukan.com/
developer: yujiro
developer_url: http://www.koikikukan.com/
*/これはテーマ選択時に利用される情報となります。青色部分にご自身の情報を設定しておくと、テーマ検索時にサンプルイメージ下にこれらの情報が表示されます。
１．４ index.html
プラグイン画面の Theme or Repository URL: に設定した時に読み込まれる HTML です。内容は下記の通りです。
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja" lang="ja">
<head profile="http://www.w3.org/2003/g/data-view">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="theme" type="text/x-theme" href="http://www.koikikukan.com/repository/styles-site/styles-site.css" />
<title>KOIKIKUKAN Repository</title>
</head>
<body>
</body>
</html>link 要素にCSSが配置されているURLを設定します。また title 要素にリポジトリのタイトルを設定します。
タイトルは Categories 欄のタイトルとして表示されます。
複数のCSSを公開する場合は、link 要素を並べて記述します。
２．リポジトリのディレクトリ構成
例として、repository ディレクトリに hogehoge.css というスタイルシートを配置して公開する場合のディレクトリ構成は下記のようになります。
- repository/
- index.html
- hogehoge/
- hogehoge.css
- thumbnail.gif
- thumbnail-large.gif
リポジトリ自体はローカル・サイト・パス（ブログのindex.htmlがあるところ）に作るのが分かりやすいでしょう。またリポジトリ用の index.html はどこにアップロードしても（その中にある link 要素の href 属性からCSSを引き込むので）構わないと思いますが、便宜上 repository 直下に配置しましょう。
先ほども申し上げた通り、repository と hogehoge.css の間に、スタイルシートと同じ名称のディレクトリを作ってください。
複数のテーマを公開する場合は、hogehoge ディレクトリと同じ位置に、公開する分のディレクトリを用意します。
例えば hogehoge1.css と hogehoge2.css の2つのテーマを公開する場合のディレクトリ構成は、
- repository/
- index.html
- hogehoge1/
- hogehoge1.css
- thumbnail.gif
- thumbnail-large.gif
- hogehoge2/
- hogehoge2.css
- thumbnail.gif
- thumbnail-large.gif
となります。
また、CSSに画像ファイル（背景画像等）を引き込む設定をしている場合は、画像ファイルも同時に取得し、hogehoge 配下に配置します。言い換えると、CSSと画像ファイルは同じディレクトリに配置されますので、CSSに設定する画像ファイルのURLはファイル名のみで大丈夫ということになります。
なお引き込むべき画像ファイルが存在しない場合、テーマ適用時にエラーとなりますのでご注意ください。
上記の構成で各ファイルを配置し、外部へ公開すれば完成です。
３．プラグインの主な動作
リポジトリ検索?テーマ適用までの操作とファイルの具体的な配置動作等を参考までに記しておきます。
３．１ 環境設定の「変更を保存」クリック時
base-weblog.css が Theme Root Path に生成されます。
３．２ リポジトリ検索時
Theme or Repository URL に設定されたURL（http://～/repository）より index.html を取得します。
取得した index.html より title 要素に記述されたタイトルを link 要素に記述されたCSSをテーマとして表示します。
同時に同ディレクトリにある thumbnail.gif を表示します。
３．３ 「詳細を表示」をクリック時
thumbnail-large.gif の表示およびCSSにあるデータを詳細データとして表示します。
３．４ テーマ適用（Choode this Design クリック）時
CSSにあるファイルを、ひとつ上のディレクトリから theme 配下にコピーします。
styles-site.css の内容は
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.koikikukan.com/mt-static/base-weblog.css);
@import url(http://www.koikikukan.com/mt-static/themes/styles-site/styles-site.css);
/* end StyleCatcher imports */に書き換えられ、旧styles-site.css がバックアップされます。
以上です。
設定方法がなかなか公開されないので自力で探ったのですが、調べた後で下記のエントリーがあがっていることに気がつきました（バカ）。
qootas.org/blog：StyleCatcher build for MT3.2
なお上記は 8月時点の内容なので、StyleCatcher バージョンアップ前の可能性があります。
Movable Type テンプレート（for StyleCatcher）
これは、現在公開中の Movable Type テンプレートのスタイルシートの各IDセレクタ・classセレクタをデフォルトテンプレートに合うように変更し、StyleCatcher プラグインが提供する base-weblog.css と併用可能な実装にしたものです。例えばデフォルトの2カラムレイアウトを変更しないのであれば、StyleCatcher の操作のみですべてのテンプレートのスタイルを切り替えることが可能です。 なおカラムレイアウトは固定レイアウトのみ動作を確認しています。テンプレートをリキッドレイアウトにしたり、詳細なカスタマイズを行いたい場合はMovable Type テンプレートをご利用ください。 |
使い方
* カッコ内は 3.2 で英語版の StyleCatcher プラグインを利用する場合の項目を表示しています。
下記のURLをコピーして StyleCatcher プラグインの「テーマ/リポジトリへのURL: （Theme or Repository URL）」に設定し、「スタイル検索（Find Style）」をクリックしてください。
サムネール画像が表示されたらそれをクリックし、（複数ブログがある場合のみ）右下のプルダウンメニューから適用するブログを選択（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：中央カラム（本文）
となるように修正します。
