StyleCatcherは便利なもので、凝ったカスタマイズをするほどでもないメモ書きブログのデザイン変更には手軽で重宝します。自分で作るデザインやスタイルもStyleCatcher対応タイプにしておけばいつでも気軽にデザイン変更したり元に戻したりできていいです。作ったリポジトリは 公開するだけでなく、オリジナルスタイルの管理ツールとして活用することもできます。ちょっとポイントどころもあるので、以下に覚え書き。
小粋空間さんのStyleCatcher リポジトリ公開方法を参考にさせていただきました。
１．オリジナルのスタイルシートを作る
スタイルシートの先頭に以下の定型データ文を入れます。
/*
name: Wing Sky（テーマの名前）
designer: TAEKO
designer_url: http://wing.w-museum.com/
developer: TAEKO
developer_url: http://wing.w-museum.com/
*/
この内容がStyleCatcherで読み込まれた時、サムネイルに表示されるテーマのデータになります。赤字の部分を自分の設定に書き換えて下さい。
なお、StyleCatcherのシステムではまず骨組みになるbase-weblog.css（全テーマ共通）の内容が読み込まれ、その後に自分が作ったオリジナルスタイルシートが読み込まれて上書きされることになります。なので、デフォルトのstyles-site.cssをカスタマイズのたたき台にしている場合は、base-weblog.cssの部分は要らないので削除しておくといいでしょう（その分、ファイルも軽くなりますし）。
3.3ではテーマ用スタイルシートの部分は/* Vicksburg II (theme-vicksburg.css) */以下になっているようです。下記の部分も使わないならバッサリ無くしてしまっていいと思います。
/* calendar tweaks */
/* artistic tweaks */
/* moblog1 tweaks */
/* moblog2 tweaks */
/* timeline tweaks */
↑どういう用途で使うのか、いまだに謎…(^^;。
●装飾用画像を使う際の注意●
実は私、ここでハマってました。。。
StyleCatcher用に書く時は、「"」はつけないこと。これがあると画像が上手く読み込まれません。
○ background-image : url(back.jpg);
× background-image : url("back.jpg");
画像は無条件に読み込まれているわけではなく、url(back.jpg);の形式で指定されたファイルのみをダウンロードするようになっているようです。
２．サムネイルの用意
StyleCatcherの画面表示用のサムネイルです。大小２つ必要でファイル名は固定です。私は以下のサイズで作ってます。
thumbnail.gif （120×90）
thumbnail-large.gif （300×270）
３．フォルダに格納
スタイルシート、装飾用画像、thumbnail.gif、thumbnail-large.gifを１つのフォルダに格納します。フォルダ名はスタイルシートと同じ名前にします。例えばスタイルシートが 「theme1.css」なら、フォルダ名は「theme1」になります。実際には他サイトのファイル名と被らない名前にするのがよいようです。
４．リポジトリ用アドレスの作り方
リポジトリ用のディレクトリを作ります。例えば「theme」というディレクトリを作ったなら、そのディレクトリの中で以下のようにファイルとフォルダを配置します。
●index.htmlの作り方
themeディレクトリ直下に作ります。このファイルがStyleCatcherで読み込まれ、その中に記述されている link rel="theme" が示しているアドレスからテーマフォルダとその中身が各自のMTの中に取り込まれることになります。
<!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" />
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme1/theme1.css" />
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme2/theme2.css" />
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme3/theme3.css" />
<title>Wing Style</title>
</head>
<body>
</body>
</html>
<link rel="theme" ～ />の中身はいくつでも増やせます。
<body>～</body>の中身はあってもなくてもかまいません。サムネイルを並べて見本頁にしてもいいかも。
これでthemeディレクトリをhttp://example.com/themeと配置したなら、「http://example.com/theme」がリポジトリアドレスになります。
●応用編～既存のindex.htmlをそのまま利用する
要は上で書いている通り、<head>～</head>内に<link rel="theme" ～ />があれば、どんなファイルでもそのままリポリトジアドレスとして使えます。なので、StyleCatcherカテゴリーをそのままリポリトジアドレスにすることも出来ます。例えばカテゴリテンプレートの<head>～</head>に以下のように記述することも出来ます。
<MTIfCategory name="StyleCatcher">
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme1/theme1.css" />
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme2/theme2.css" />
<link rel="theme" type="text/x-theme" href="http://example.com/theme/theme3/theme3.css" />
</MTIfCategory>
こうするとStyleCatcherカテゴリの<head>～</head>内にのみ赤字の部分が記述され、StyleCatcherカテゴリーのアドレスがそのままリポジトリアドレスになります。 それも分かりやすくていいと思います。
☆ちなみに、当ブログでもそうしてもよかったのですが、ここのカテゴリ頁はダイナミック出力にしているため、リポジトリ用アドレスは専用のindex.htmlを設けてます。ダウンロード目的で頻繁にアクセスされることが予想されるファイルは静的にしておいた方がいいので。