小粋空間: StyleCatcher によるスタイル変更方法

Top ＞ Movable Type ＞プラグイン＞ StyleCatcher によるスタイル変更方法

2005年10月19日

StyleCatcher によるスタイル変更方法

Posted at October 19,2005 11:58 PM
Category：[プラグイン]
Tag：[MovableType, Plugin, StyleCatcher]

Movable Type 3.2から公開されている StyleCatcher プラグインを利用したスタイル変更方法です（先日エントリーしたMovable Type 3.2 テンプレート（for StyleCatcher）に書いていたものから StyleCatcher 部分の記述をこちらに独立させました）。

各サイトでも取り上げられていますが、Movable Type のデフォルトテンプレートを利用している場合、本プラグインを利用することでブログのスタイルシート（CSS）を簡単に切り替えることができます。

１．StyleCatcher プラグインのインストール

STYLECATCHER 1.01より Download をクリックしてプラグインをダウンロードします。
ダウンロードした .zip ファイルを解凍し、その中にある mt-static ディレクトリ配下の plugins ディレクトリと、plugins ディレクトリ配下の StyleCatcher ディレクトリをそのまま、mt-static または plugins ディレクトリにそれぞれアップロードします。繰り返しますと、

plugins → mt-static ディレクトリへアップロード
StyleCatcher → plugins ディレクトリへアップロード

となります。plugins ディレクトリを誤って plugins ディレクトリにアップロードしないように気をつけてください。

管理画面のメインメニュー右側にある「プラグイン」のリンクをクリックして、StyleCatcherプラグインがリストされている事を確認してください。この状態で「StyleCatcher」タイトルのリンクをクリックするとエラーになりますのでご注意ください。

２．環境設定

１項で表示したプラグイン画面の「StyleCatcher」の右側にあるメニューより「設定を表示」をクリックすると、中央に下記のような設定画面が表示されます。

Theme Root URL：http://path/to/MT3.2/mt-static/themes/
Theme Root Path：/home/path/to/MT-3.2/mt-static/themes

基本設定が完了していれば、青色のようにURLおよびパスが設定されています。またそれぞれの最後に mt-static/themes というディレクトリが自動的に設定されていると思いますので、そのまま「変更を保存」をクリックします（もし設定されていなければ両方とも themes まで指定してください）。クリックすると自動的に mt-static 配下に themes ディレクトリが生成されます。また themes ディレクトリに base-weblog.css が生成されていることを併せて確認してください。base-weblog.css は汎用的なスタイルシートです。

Theme Root URLは、デフォルトでは "/" で開始しているかもしれませんが、上記のように http://? で始めた方が良いようです（このURLがCSSを参照するURLとして使用されます）。

生成された theme 配下に、次項で選択するCSSが保存されるようになります。また styles-site.css の内容は、これから選択するCSSを import するだけのファイルに上書きされます。現在の styles-site.css はスタイルシートを切り替える際に自動的にバックアップされますのでご心配なく。

３．スタイルシート切り替え

プラグイン画面のタイトル「StyleCatcher バージョン 1.01」のリンクをクリックすると切り替え画面にジャンプします。デフォルトの状態では Theme or Repository URL: というテキストエリアに

http://www.sixapart.com/movabletype/styles/library

が設定されています。これは Six Apart のライブラリです。この状態で「Find Style」をクリックし、しばらくすると画面下にテーマがサムネールで表示されます。好きなテーマをクリックして「Select a Weblog...」で設定するブログを選択し、「Choose this Design」をクリックします。
成功すると、

Successfully applied new theme selection.

というダイアログが表示されます。テンプレートの編集画面に進み、スタイルシートの内容が

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://path/to/themes/base-weblog.css);
@import url(http://path/to/themes/library/stylexx.css);
/* end StyleCatcher imports */

に変換されていることを確認してください。旧スタイルシートのバックアップもインデックステンプレート画面に表示されていると思います。

４．選択したスタイルが反映されない場合

新しいスタイルが正常に読み込まれているかを確認します。そのためには、styles-site.css で表示されている URL をそれぞれブラウザに設定して直接起動してください。これでファイルの取得ができない、または正常に表示されない場合、適正に読み込まれていないと思われますので、この部分の設定をご自身の環境に合うよう、直接編集・修正してください。

５．システム管理者権限がない場合

3.1x から 3.2 にバージョンアップする際、システム管理権限がなくなってしまうケースがあるようです。システム管理権限がないと、StyleCatcher の設定ができない等の問題が発生します。システム管理者の権限の有無は「メイン・メニュー」→「システム・メニュー」→「投稿者」の「投稿者名」をクリックしたページで確認できます。

なお、システム管理者権限を付与するCGIが下記に公開されていますのでご紹介しておきます。

The blog of H.Fujimoto：「システム管理者」(is_superuser)をオンにするCGI

Posted by yujiro

« 千葉ロッテ優勝 | Main | 本文に引用をつける »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

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

Tracked on October 20, 2005 6:03 AM

≫ 【「システム管理者」(is_superuser)をオンにするCGI 】のススメ→MT3.2へUPした人向け from Project MultiBurst
今回、MTのプラグインである、「StyleCatcher」を使用しようと思い、インストールしたのですが、どうもうまくいかない。というのも、システムメニューの... [続きを読む]

Tracked on October 23, 2005 11:08 PM

≫ MovableType3.2Release2をいじってますが from アフィリエイト入門ブログ
テンプレも結構出てきているので、さてMT3.2を本格的にさわってみるかというところでStyleCatcherでハマリ気味でした。ブログ毎にthemes... [続きを読む]

Tracked on March 2, 2006 5:40 AM

≫ StyleCatcherプラグインをダウンロード from GIRAFFE NET
Movable Type 3.2から公開されているStyleCatcherプラグ... [続きを読む]

Tracked on April 30, 2006 5:16 PM

≫ StyleCatcherサイト from egg?PCの観察日記
MovableType幼稚園　http://syoboi.com/Movable... [続きを読む]

Tracked on May 8, 2006 11:47 PM

≫ 「 StyleCatcher 」でスタイル変更ができるようになるまで、山越え、谷超え、エラー超え from 私的備忘録
で、今回はデフォルトでは涙が出そうなサイトのレイアウトを「 StyleCatch... [続きを読む]

Tracked on January 31, 2007 3:48 AM

≫ 「 StyleCatcher 」でスタイル変更ができるようになるまで、山越え、谷超え、エラー超え from 私的備忘録
　で、今回はデフォルトでは涙が出そうなサイトのレイアウトを「 StyleCatc... [続きを読む]

Tracked on January 31, 2007 5:28 AM

MovableType3.2ja2を設定し、StyleCatcherでスタイル変更しょうとして、FindStyleで「Error loading themes! --Satus;200 Pragma:no-cashe Content-Type:text/plain;charset=uf-8 Error:Unknown Content Type」と表示されスタイル変更に生きずまりました。
環境は　MacG4 MacPSX Server10.3.9 です。
何が間違っているのか・・・

[1] Posted by 山道正男 : March 5, 2006 10:19 PM

[2] Posted by masao : March 5, 2006 10:22 PM

＞masaoさん
こんばんは。
ご返事が遅くなってすいません。
エラー内容の「uf-8（本来は utf-8）」が気になります。テーマ切り替え時に、いずれかのファイルの文字コードの指定が誤っているためのエラーと思われます。

なお当方が提供しているリポジトリを確認しましたが正常に設定されているようです（テーマ変更も正常に行われました）。Mac環境は持っておりませんのでそちらの原因については適切な回答ができません。お許しください。

以上です。
それではよろしくお願い致します。

[3] Posted by yujiro : March 10, 2006 12:55 AM

yujiroさん　はじめまして。

StyleCatcherでかなりはまってて、ちょっとあきらめモードに入っていたのですが、こちらのサイトの情報で無事出来るようになりました。
感謝です。どうもありがとうございました。

勝手ながら、リンクを張らせて頂きました。
もし宜しければ、相互リンクをお願いできないでしょうか。どうぞ宜しくお願い致します。

[4] Posted by 時計わに : May 27, 2006 11:32 PM

＞時計わにさん
はじめまして。
ご連絡ありがとうございました。
お役にたてたようでなによりです。
リンクはBlogPeople経由で登録させて頂きました。
それでは今後ともよろしくお願い致します。

[5] Posted by yujiro : May 28, 2006 1:32 AM

はじめまして。
スタイルキャッチャーの導入がうまくいかなくて、
ネットをさまよっていたら、こちらの記事にたどりつき、
おかげさまで、何とか動くようになりました。
嬉しかったので、記事に掲載させていただきました。
ありがとうございました。

[6] Posted by たからにゃ : June 2, 2006 9:24 PM

＞たからにゃさん
こんばんは。
記事参照ありがとうございました。
Movable Type の記事はカスタマイズから不具合まで色々ご用意しておりますので、なにかありましたらまたお越しください。
ではでは！

[7] Posted by yujiro : June 3, 2006 11:38 PM

こんにちは。sedorisanです。

お尋ねしたいことがあって・・・。

以前Seesaaブログを使っていたときも、今回MTを使っているときもそうですが、ブログに背景色がつかないんです。
なぜでしょうか。
MTの方はスタイルキャチャー、インストールしていますよ。
インストールは成功したと思います。
色はつかないですが、形式はちゃんと変わります。
これはSeesaaの時も同じです。

直接MTに関しての質問ではないですが、原因わかりますでしょうか。
いろんなページを見て回っているのですが、これといった解決法を見つけることができません。

アドバイスください。
よろしくお願いします。

[8] Posted by sedorisan : November 1, 2006 5:14 PM

＞sedorisanさん
こんばんは。
ご質問の件ですが、サイトおよび設定状況を拝見させていただかないと適切な回答をすることができません。
ということで、申し訳ありませんがサイトのURLをお知らせください。

ちなみに当サイトのテンプレート（固定レイアウト）をご利用でしたら、昨日エントリーした「公開テンプレートの背景色をCSSで変更する」が参考になると思います。
それではよろしくお願い致します。

[9] Posted by yujiro : November 1, 2006 11:48 PM

こんにちは。sedorisanです。

URL貼っておきました。

このブログを見ると、そちらのパソコンで見ると、ちゃんと色が入っているかと思います。
他人のパソコンからみると色が入っているのですが、わたしのパソコンから自分のブログを見ると色が入っていません。
ところで、
自分のパソコンから他人のブログを見たとき、妙にシンプルなブログが多々ありましたので、もしかしたら、この場合にも、色が抜けて見えているのかも・・・とも思います。

ちなみにですが、色が抜けているとは、全て白黒というわけではなく、有色のテンプレートを利用した場合に、そのようになっていないということです。（タイトルは紫色、文章は黒、リンクは青、になっており、背景のデザインだけ抜けています。）

なにかブログが正確に反映されない設定になっているのでしょうか。
PCのブラウザが最新のものになっていないとか。

PCメーカーの日立に問い合わせましたが、ブログ特有の問題はわかりません、との回答でした。（他にインターネットエクスプローラーの設定の仕方を指示されましたが、これは一般的に画面が正確に表示されない場合の対処方法であって、やっても直りませんでした。）

ちなみにですが、このHPは白と黒でデザインされていると思いますが（？）キレイに表示されています。

なんでも構いませんので、気づいたことがあればアドバイスください。

よろしくお願いします。

[10] Posted by sedorisan : November 3, 2006 9:53 AM

＞sedorisanさん
こんばんは。
ご質問の件につきまして、解消する・しないは別として、まずは問題箇所を切り分ける必要があります。ブラウザは IE6 をお使いのようですが、Firefox ではどうでしょうか。
他のブラウザでも同様の表示であればPCの問題かもしれません。
それではよろしくお願い致します。

[11] Posted by yujiro : November 4, 2006 9:40 PM

こんにちは。sedorisanです。

ブラウザをfirefoxに変えましたがダメでした。また、IE６からIE７にしましたが、同様にダメでした。

お手上げ状態です。

今、SeesaaブログのサポートとMTのサポートに問い合わせているところです。（問い合わせ待ちです。）
もしそれでも解決しないようであれば、PCの修理屋さんに有料で直してもらうしかないようです。

ところで、お尋ねしたいのですが、貴方様のこのHPの色は以前はサイドが黒で真ん中が白だったのですが、今は白で統一されているようですが、どうでしょうか。
私のPCから見ると、背景は白で統一しているように見えているのです。

お手数ですが、再度のアドバイスとともに、このHPの色を教えていただきたいのですが。（ちゃんと色がついているのか確認したいのです。）

よろしくお願いします。

[12] Posted by sedorisan : November 7, 2006 5:15 PM

＞sedorisanさん
こんにちは。
ご質問の件ですが、当サイトのサイドバー背景は白、中央カラム拝見は #fcfcfc という少しだけ色がついています。
Web配色を公開しているページで確認されてみてはいかがでしょうか。たとえば下記のページです。
http://color.eweb-design.com/0101_wsc.html

[13] Posted by yujiro : November 8, 2006 12:48 PM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

コメント（C）:

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

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

小粋空間 - a cheap joke and a play on words site

StyleCatcher によるスタイル変更方法

１．StyleCatcher プラグインのインストール

２．環境設定

３．スタイルシート切り替え

４．選択したスタイルが反映されない場合

５．システム管理者権限がない場合