TopMovable Typeリポジトリ > 2005年10月
2005年10月14日

StyleCatcher リポジトリ公開方法

StyleCatcher利用画面StyleCatcher プラグイン用のリポジトリ(repository)公開方法を記します。これを行うことで、本サイトで公開しているリポジトリ(画像)のように、StyleCatcher上でご自身のテーマ(CSS)を公開することができます。

1.用意するもの

1.1 テーマ画像(サムネール)

(thumbnail.gif)

テーマ一覧にサンプルとして表示するためのテーマ画像(サムネール)です。ファイル名は「thumbnail.gif」です。表示される時のサイズは 120×90 になります。

1.2 テーマ画像

(thumbnail-large.gif)

テーマ一覧のサムネール画像をクリックした後、右側の「詳細を表示」をクリックした時にサンプルとして表示するためのテーマ画像です。ファイル名は「thumbnail-large.gif」です。表示される時のサイズは 300×250 になります(高さは作成した画像によって異なるようです)。

1.3 スタイルシート

(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/
*/

これはテーマ選択時に利用される情報となります。青色部分にご自身の情報を設定しておくと、テーマ検索時にサンプルイメージ下にこれらの情報が表示されます。

1.4 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 要素を並べて記述します。

2.リポジトリのディレクトリ構成

例として、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はファイル名のみで大丈夫ということになります。
なお引き込むべき画像ファイルが存在しない場合、テーマ適用時にエラーとなりますのでご注意ください。

上記の構成で各ファイルを配置し、外部へ公開すれば完成です。

3.プラグインの主な動作

リポジトリ検索?テーマ適用までの操作とファイルの具体的な配置動作等を参考までに記しておきます。

3.1 環境設定の「変更を保存」クリック時

base-weblog.css が Theme Root Path に生成されます。

3.2 リポジトリ検索時

Theme or Repository URL に設定されたURL(http://~/repository)より index.html を取得します。
取得した index.html より title 要素に記述されたタイトルを link 要素に記述されたCSSをテーマとして表示します。
同時に同ディレクトリにある thumbnail.gif を表示します。

3.3 「詳細を表示」をクリック時

thumbnail-large.gif の表示およびCSSにあるデータを詳細データとして表示します。

3.4 テーマ適用(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/blogStyleCatcher build for MT3.2

なお上記は 8月時点の内容なので、StyleCatcher バージョンアップ前の可能性があります。

Comments [4] | Trackbacks [5]
2005年10月11日

Movable Type テンプレート(for StyleCatcher)

テンプレートライブラリMovable Type のプラグイン StyleCatcher 用のテンプレート(スタイルシートのみ)を公開します。StyleCatcher 自体の設定・利用方法についてはStyleCatcher によるスタイル変更方法を参考にしてください。

これは、現在公開中の Movable Type テンプレートのスタイルシートの各IDセレクタ・classセレクタをデフォルトテンプレートに合うように変更し、StyleCatcher プラグインが提供する base-weblog.css と併用可能な実装にしたものです。例えばデフォルトの2カラムレイアウトを変更しないのであれば、StyleCatcher の操作のみですべてのテンプレートのスタイルを切り替えることが可能です。

なおカラムレイアウトは固定レイアウトのみ動作を確認しています。テンプレートをリキッドレイアウトにしたり、詳細なカスタマイズを行いたい場合はMovable Type テンプレートをご利用ください。

使い方

* カッコ内は 3.2 で英語版の StyleCatcher プラグインを利用する場合の項目を表示しています。

下記のURLをコピーして StyleCatcher プラグインの「テーマ/リポジトリへのURL: (Theme or Repository URL)」に設定し、「スタイル検索(Find Style)」をクリックしてください。

サムネール画像が表示されたらそれをクリックし、(複数ブログがある場合のみ)右下のプルダウンメニューから適用するブログを選択(Select a Weblog...)、最後に「デザインを適用(Choose this Design)」でクリックします。
成功すると、

新しいテーマを適用しました(Successfully applied new theme selection.)

というダイアログが表示されます。これで全体を再構築をすれば新しく選択したスタイルがブログに反映されます。

レイアウト切り替え

公開テンプレートと同様、スタイルシートひとつで1カラム?3カラムまでの各レイアウトに対応しています。
レイアウトは、各テンプレートの body 要素の class属性を書き替えることで行います(詳細はMovable Type テンプレートの1項を参照してください)。
なお公開テンプレートと異なる点として、デフォルトレイアウトのカラム名(IDセレクタ)は左から alpha、beta、gamma と指定するようになっています。またそれぞれに xxx-inner という名称のセレクタが存在します。

インストール後のデフォルトレイアウトは、本文に alpha、右カラムに beta という id 属性が割り当てられています。下記はメインページのHTMLマークアップです。

         :
       (略)
         :
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
                :
        (左カラム:本文)
                :
         </div>
      </div>
      <div id="beta">
         <div id="beta-inner" class="pkg">
                :
      (右カラム:サイドバー)
                :
         </div>
      </div>
   </div>
</div>
         :
       (略)
         :

これを3カラムに変更するにはHTMLマークアップを下記のように変更します。

         :
       (略)
         :
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
                :
      (左カラム:サイドバー)
                :
         </div>
      </div>
      <div id="beta">
         <div id="beta-inner" class="pkg">
                :
       (中央カラム:本文)
                :
         </div>
      </div>
      <div id="gamma">
         <div id="gamma-inner" class="pkg">
                :
      (右カラム:サイドバー)
                :
         </div>
      </div>
   </div>
</div>
         :
       (略)
         :

まず、右カラム部分の id 属性名 beta と beta-inner を gamma および gamma-inner に変更します。同様に中央カラムの id 属性名 alpha および alpha-inner を beta と beta-inner に修正します。最後に左カラムになる alpha と alpha-inner という id 属性名の div 要素を追加します。

3カラムレイアウトの各カラムと id 属性の対応は下記のようになります。

  • alpha/alpha-inner:左カラム(左サイドバー)
  • beta/beta-inner:中央カラム(本文)
  • gamma/gamma-inner:右カラム(右サイドバー)

2カラム(左サイドバー)に変更する場合は、

  • alpha/alpha-inner:左カラム(サイドバー)
  • beta/beta-inner:中央カラム(本文)

となるように修正します。

Comments [30] | Trackbacks [11]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3