エントリー本文
StyleCatcher リポジトリ公開方法
Category：[リポジトリ]
Tag：[MovableType, Plugin, Repository, 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 4 スタイル用テーマ修正
- Movable Type 4 スタイル用テーマ
- Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その3：テンプレートを切り替える）
- Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その2：テンプレート配布方法）
- Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その1：概要）
- Movable Type スタイルライブラリ一覧
- Movable Type 3.3 テンプレート（for StyleCatcher）
- StyleCatcher 用のテンプレートでカレンダーを表示する
≫ StyleCatcher入れてみた from やむやむ
MT-Notifier が うまくいかなかった のと同じ理由で どうしても 導入... [続きを読む]
≫ StyleCatche用デザインの試作品を作ってみました from MovableType幼稚園
MovableType3.2のプラグイン、StyleCatcherで読み込んで使うことができるデザインテンプレートの試作品を作ってみました。２カラムの右サ... [続きを読む]
≫ StyleCatcher用テンプレートを公開する方法 from MovableType幼稚園
StyleCatcher用のテンプレートを作成し、公開していく事にハマっておりました。 そろそろエントリーも書かねば、という事で（笑）、まずはStyleC... [続きを読む]
≫ StyleCatcher用のリポジトリを公開する from MovableType備忘録
忘れないうちにメモしておきます。 MovableType(ムーバブルタイプ) 3.3から標準機能となったStyleCatcherですが、改めて使ってみると... [続きを読む]
最初 聞きなれない言葉 （＝リポジトリ） に 戸惑いましたが
StyleCatcher を使ってみて、ようやく意味がわかりました。
あたしが自作のCSSを公開することなど 今後もまずなさそうですが、
この記事 なんか個人的に とても興味をひかれたので、エントリ内で ふれさせていただきました。
＞さえらさん
こんばんは。
エントリーありがとうございます。
またトラックバックも併せてありがとうございました。
そうおっしゃらず、機会があれば是非公開してみてください。
はじめまして。
リポジトリ公開の際に参考にさせていただきました。ありがとうございます！
執筆佳境のようですね。がんばってください！
＞kassyさん
こんにちは。
ご連絡遅くなり申し訳ありません。
記事参照＆コメントありがとうございました。
労いのお言葉もありがとうございます。
執筆も一段落して、ようやく落ち着きました。
