土日にチョコチョコと作業していたのですが・・・、いやあ、なんかいいですね。こういうのって。なんかいいよ。WindowsPCをはじめて手に入れた頃の、毎日デスクトップの壁紙とスクリーンセーバーを変えたり、winampのスキン選びで5時間くらい悩んだりした日々を思い出しました。
自分はcssとかは全く不勉強なので、どこかおかしいところがあるかもしれません。IE6では透過画像周りでぼろぼろになっているかと思われます
今回は、MT4での新StyleCatcherの勉強がてら、ボソボソと調べながら作成しました。
気に入ったという奇特なお方は、ご自由にお使いください。
実はStyleCatcherって、cssファイルを直接指定して取ってくることが可能となっています。必ずしもリポジトリとして公開されている必要はないんですね。
例えば、今回作成したcssファイルのURLは以下になります。
http://blog.aklaswad.com/cgi-bin/blog/mt-static/support/themes/black-silver/black-silver.css
MT4のStyleCatcherで「カテゴリー」の右の緑十文字をクリックして、上記cssファイルのURLを入れれば、スタイルを取得できるはずです。
cssを公開してStyleCatcherで取得可能にする方法
StyleCatcher2.0に対応したスタイルの作成メモです。
StyleCatcherにきちんと対応するためには、MovableType のテンプレートやbase_theme.cssにあわせてcssが記述してあることに加え、以下の条件を満たしておく必要があります。
画像ファイルをディレクトリにまとめない
StyleCatcherは、css内で読み込む画像ファイルについても自動的に取得しますが、これは画像ファイルがcssファイルと同じディレクトリに置かれていて、かつ、画像のurl指定がディレクトリ名を含まない、ファイル名だけの相対パスとなっている場合だけです。
「url(hoge.jpg)」はOK。「url(images/moge.jpg)」はNG。
画像用にディレクトリを分けたりしたいところですが、そうするとStyleCatcherは対応してくれません。ご注意を。
サムネイル画像を用意する
あらかじめサムネイル用の画像を用意しておくことで、取得側のプレビュー画面に表示させる事ができます。サムネイルは、大小それぞれの画像を「thumbnail.gif」「thumbnail-large.gif」という名前でcssと同じディレクトリに配置することでStyleCatcherに検出されます。
MT4のStyleCatcherでは、以下のサイズでサムネイルを表示するようです(目測値)。
| ファイル | ヨコ | タテ |
|---|---|---|
| thumbnail.gif | 120 | 90 |
| thumbnail-large.gif | 278 | 209 |
MT3.xでのサイズとちょっと違ってますね。このサイズでサムネイルを用意しておくと良いかもしれません。Voxとの絡みもあるかもしれないので、正確なところは、何らかのアナウンスが出るのを待ちたいと思います。とりあえず上のサイズの画像で、読み込んでくれないということは無いみたいです。
以前は、サムネイルが無いスタイルも取得できたような記憶があるのですが、現在のStyleCatcher2.0ではサムネイルが存在しない場合、スタイルの取得自体が出来なくなるようです。
メタデータを記述する
cssのコメントとして、メタ情報を埋め込むことが出来ます。キーと値をコロンで区切って、一行に一つずつ記述します。
以下のような感じです。
/*
name: Black Silver
designer: Aklaswad
designer_url: http://blog.aklaswad.com/
layouts: layout-wt, layout-tw
*/
ソースコードを見た感じ、以下のようなメタデータが利用できるようです。どこで使われているのか分からないものもありますね。
| name | スタイルの名前 |
|---|---|
| description | スタイルの説明? |
| designer | デザイナーの名前 |
| designer_url | デザイナーのサイトのurl |
| author | 作者の名前 |
| author_url | 作者のサイトのurl |
| author_affiliation | 作者の所属 |
| layouts | 利用可能なレイアウト |
新要素のlayoutsをメタデータに記述する
StyleCatcher2.0では、layoutsメタデータで利用可能なレイアウトを指定できます。
以下の四つのレイアウトが指定できるようです。
- layout-wtt
- layout-twt
- layout-wt
- layout-tw
上記をカンマ区切りでlayoutsメタデータに記述しておくことで、スタイルの適用時に選択が可能となるようです。逆に一部のレイアウトには対応していないスタイルを作った場合、そのレイアウトを記述しなければ、スタイルの適用時に選択ができないようになります。
とりあえずココまで調べました。またそのうち気づいたことがあれば書くかも知れません。おやすみなさい。