＞ ＞ ＞ StyleCatcher リポジトリ公開方法

StyleCatcher リポジトリ公開方法

Posted at October 14,2005 11:55 PM
Tag：[MovableType, Plugin, Repository, StyleCatcher]
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="https://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 バージョンアップ前の可能性があります。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ StyleCatcher入れてみた from やむやむ
MT-Notifier が うまくいかなかった のと同じ理由で どうしても 導入... [続きを読む]

Tracked on October 19, 2005 1:53 PM

≫ StyleCatche用デザインの試作品を作ってみました from MovableType幼稚園
MovableType3.2のプラグイン、StyleCatcherで読み込んで使うことができるデザインテンプレートの試作品を作ってみました。２カラムの右サ... [続きを読む]

Tracked on February 16, 2006 2:07 PM

≫ StyleCatcher用テンプレートを公開する方法 from MovableType幼稚園
StyleCatcher用のテンプレートを作成し、公開していく事にハマっておりました。 そろそろエントリーも書かねば、という事で（笑）、まずはStyleC... [続きを読む]

Tracked on March 2, 2006 1:24 PM

≫ StyleCatcher用のリポジトリを公開する from MovableType備忘録
忘れないうちにメモしておきます。 MovableType(ムーバブルタイプ) 3.3から標準機能となったStyleCatcherですが、改めて使ってみると... [続きを読む]

Tracked on July 24, 2006 1:11 AM

≫ リポジトリの作り方 from WingMemo
StyleCatcherは便利なもので、凝ったカスタマイズをするほどでもないメモ書きブログのデザイン変更には手軽で重宝します。自分で作るデザインやスタイル... [続きを読む]

Tracked on January 28, 2007 10:41 PM
コメント

最初 聞きなれない言葉 （＝リポジトリ） に 戸惑いましたが
StyleCatcher を使ってみて、ようやく意味がわかりました。
あたしが自作のCSSを公開することなど 今後もまずなさそうですが、
この記事 なんか個人的に とても興味をひかれたので、エントリ内で ふれさせていただきました。

[1] Posted by さえら : October 19, 2005 1:50 PM

＞さえらさん
こんばんは。
エントリーありがとうございます。
またトラックバックも併せてありがとうございました。

そうおっしゃらず、機会があれば是非公開してみてください。

[2] Posted by yujiro : October 20, 2005 2:02 AM

はじめまして。
リポジトリ公開の際に参考にさせていただきました。ありがとうございます！

執筆佳境のようですね。がんばってください！

[3] Posted by kassy : August 31, 2007 7:19 PM

＞kassyさん
こんにちは。
ご連絡遅くなり申し訳ありません。
記事参照＆コメントありがとうございました。

労いのお言葉もありがとうございます。
執筆も一段落して、ようやく落ち着きました。

[4] Posted by yujiro : September 6, 2007 11:50 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）