StyleCatcher用のテンプレートを作成し、公開していく事にハマっておりました。
そろそろエントリーも書かねば、という事で（笑）、まずはStyleCatcher用テンプレートの公開方法について書いてみたいと思います。
最初は何もわからず、とりあえず作ったCSSをどこかのフォルダにおいて、それをStyleCatcherプラグインのRepository URLに入力してアクセスしたらいいんじゃね？と思ってやってみたりして、「404 not found」とプラグインに軽くあしらわれたりしていました（笑）。
実はちゃんとした公開の仕方があったのです。
結局、小粋空間さんのStyleCatcher リポジトリ公開方法が最高にまとまっていてわかりやすく、説明どおりにやったら、さくっと公開できました。
早い話、そちらを読んでいただければ問題解決なのですが（笑）、自分なりにポイントと思うところを図にしてまとめてみました。
その前に、まずStyleCatcherに関して思った事などを。
これまでMovableTypeのテンプレートを変えると言うのは、大変な作業でした。
メインページ、スタイルシート、エントリー・アーカイブ、カテゴリー・アーカイブ、日付･アーカイブ、これらをコピーアンドペーストし、さらに画像が使ってある場合には画像をダウンロードしてアップロード・・・。
これが１回だけならまだいいのですが、他のデザインにしようと思ったら、また同様の作業を繰り返す必要があったわけです。
StyleCatcherという統一された形でテンプレートが配布されるようになれば、StyleCatcherプラグインの画面上でテーマを選ぶだけでデザインの変更ができます。
画像があっても勝手にダウンロード→アップロードしてくれて手間要らずです。
初心者でも簡単にテーマを切り替えることができます。
さらにMovableType3.2のスタイルシートなら、１カラム、２カラム、３カラムの切り替えも、
<body class="layout-two-column-right">の部分を変更するだけ（HTMLも若干の変更は必要ですが）。
かなり簡単になりました。
しかし、このスタイルシートに関しては、<div>が多すぎ！という意見もあり、賛否両論あります。
ただ、初心者がStyleCatcherを使って簡単にデザインを切り替えたりするのには、非常に良い変更だったのではないかと思います。使用法の説明はありませんが（笑）。
StyleCatcherはテンプレートを配布する側にとっても、非常にテンプレートが配布しやすい形です。
直リンクなどの問題も発生せず、長いスタイルシートの文字列をサイトに貼りつける必要もありません。
サイトが重くなったりする事を気にせず、多くのデザインを作る事に専念できます。
何より、私のような初心者でも、テンプレートを配布することができるのです。
しかし、MovableTypeは、自分でカスタマイズするのが楽しみ、という部分もあります。
一からスタイルシートやHTMLをいじりたい、という初心者にとっては、MT3.2は、難解なスタイルシートやHTMLになっています。
今後MovableTypeをもっと簡単に使いたい、という初心者の方にとってはStyleCatcherはやっぱり心強い味方ですし、MovableTypeのテンプレート配布の主流になっていくのではないかなあ、と思っています。
いつものように、前置きだけでお腹一杯な感じですが、本題に入ります（笑）。
＜ステップ１：StyleCatcher用テンプレートを公開するフォルダの構造＞
StyleCatcher用テンプレートを公開するフォルダの構造は決まっています。
また、そのフォルダに配置するindex.htmlの書き方、スタイルシートの文頭に書くコメントの書式も決まっています。
ではまず、フォルダの構造から。
当サイトでは、
syoboicom ＞ movabletype ＞ styles ＞ library
というフォルダにしていますが、これはStyleCatcherプラグインの管理画面で、公式サイトのRepository URLの一部を変えるだけでアクセスできるようにするためです。
フォルダはぶっちゃけどこでも構いませんが、大事なのはフォルダ内の構造です。
フォルダの直下にindex.htmlを置いて、
その下にデザインテーマごとのフォルダを置きます。
デザインテーマのフォルダの中には、フォルダと同じ名前のCSSを置きます。
さらに、thumbnail.gif、thumbnail-large.gifが必要です。
CSSに必要な画像があれば、同じフォルダに入れていきます。
thumbnail.gifの大きさは幅120px、高さ90px。
thumbnail-large.gifの大きさは幅300px、高さ250px。
キャプチャ画像を加工して、gif形式で保存します。
デザインテーマを増やすには、フォルダを増やして同様な形で、フォルダ内にCSS、thumbnail.gif、thumbnail-large.gif、使用する画像を置いていきます。
＜ステップ２：StyleCatcher用テンプレートのindex.htmlの書き方＞
公開するフォルダの直下に置くindex.htmlは書き方が決まっています。
小粋空間さんのもの、そのまんまです（笑）。
青色にしてある部分を増やしていけば、デザインテーマが増やせます。
ステップ１で作ったデザインテーマのフォルダやCSSと青色の部分を一致させる必要があります。
<?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://syoboi.com/movabletype/styles/library/sample1/sample1.css" />
<link rel="theme" type="text/x-theme" href="http://syoboi.com/movabletype/styles/library/sample2/sample2.css" />
<link rel="theme" type="text/x-theme" href="http://syoboi.com/movabletype/styles/library/sample3/sample3.css" />
<title>sample library</title>
</head>
<body>
</body>
</html>
下の図では、管理画面との関係です。 titleがCategoriesの部分などに反映されます。
＜ステップ３：StyleCatcher用テンプレートのスタイルシートの文頭の書き方＞
これも書き方が決まっています。
これも小粋空間さんのもの、そのままです。
/*
name: sample1
designer: sample
designer_url: http://syoboi.com/
developer: sample
developer_url: http://syoboi.com/
*/
nameと、designerしかStyleCatcherプラグインの管理画面には反映されていないみたいです。
そういうわけで準備ができたら、StyleCatcherプラグインの管理画面で、設定した「フォルダ」のURL（index.htmlが置いてあるフォルダのURL）をRepository URLに入力し、「Find Style」を押してアクセスします。
好きなテーマを選んでChoose this Designを押し、うまくデザインが適応されれば成功です。
こういう感じで、StyleCatcher用テンプレートを公開させて頂きました。
デザイン配布に関する詳細のページはこちら。
MovableType3.2用無料テンプレート for StyleCatcher
＠2006年03月02日