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
- MTプラグインの重複配置は動作異常になる可能性があります
- 2014年にリリースしたMovable Type（MT）プラグイン一覧
- PageButeプラグインでcanonical属性を変更する「PageButeCanonicalChangerプラグイン」
- Movable Typeで作成したブログ記事をEvernoteにクリップする「ClipToEvernoteプラグイン」
- Movable Typeにインストールしたプラグインがプラグイン一覧に表示されない件について
- Movable Typeでアイテム画像を編集できる「Pixenateプラグイン」
- AssetExporter プラグイン v0.02
- Movable Type プラグインハンドラでのクエリーパラメータ取得方法
- Movable Type 5の記事編集画面に任意のボタンを追加する3つのプラグイン
- Action Streams プラグイン（Movable Type 5 対応）の利用方法：その3
- Movable Type用OAuth対応Twitter投稿プラグイン「PostTweet」
- Movable Type用OAuth対応Twitter投稿プラグイン「PostTwiOauth」
- Action Streams プラグイン（Movable Type 5 対応）の利用方法：その2
- Action Streams プラグイン（Movable Type 5 対応）の利用方法：その1
- Movable Type プラグイン一覧（MT5対応）
≫ StyleCatcher入れてみた from やむやむ
MT-Notifier が うまくいかなかった のと同じ理由で どうしても 導入... [続きを読む]
≫ 【 「システム管理者」(is_superuser)をオンにするCGI 】のススメ→MT3.2へUPした人向け from Project MultiBurst
今回、MTのプラグインである、「StyleCatcher」を使用しようと思い、 インストールしたのですが、どうもうまくいかない。 というのも、システムメニューの... [続きを読む]
≫ MovableType3.2Release2をいじってますが from アフィリエイト入門ブログ
テンプレも結構出てきているので、さてMT3.2を本格的にさわってみるかというところでStyleCatcherでハマリ気味でした。
ブログ毎にthemes... [続きを読む]
≫ StyleCatcherプラグインをダウンロード from GIRAFFE NET
Movable Type 3.2から公開されているStyleCatcherプラグ... [続きを読む]
≫ StyleCatcherサイト from egg?PCの観察日記
MovableType幼稚園 http://syoboi.com/Movable... [続きを読む]
≫ 「 StyleCatcher 」でスタイル変更ができるようになるまで、山越え、谷超え、エラー超え from 私的備忘録
で、今回はデフォルトでは涙が出そうなサイトのレイアウトを「 StyleCatch... [続きを読む]
≫ 「 StyleCatcher 」でスタイル変更ができるようになるまで、山越え、谷超え、エラー超え from 私的備忘録
で、今回はデフォルトでは涙が出そうなサイトのレイアウトを「 StyleCatc... [続きを読む]
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 です。
何が間違っているのか・・・
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 です。
何が間違っているのか・・・
＞masaoさん
こんばんは。
ご返事が遅くなってすいません。
エラー内容の「uf-8（本来は utf-8）」が気になります。テーマ切り替え時に、いずれかのファイルの文字コードの指定が誤っているためのエラーと思われます。
なお当方が提供しているリポジトリを確認しましたが正常に設定されているようです（テーマ変更も正常に行われました）。Mac環境は持っておりませんのでそちらの原因については適切な回答ができません。お許しください。
以上です。
それではよろしくお願い致します。
yujiroさん はじめまして。
StyleCatcherでかなりはまってて、ちょっとあきらめモードに入っていたのですが、こちらのサイトの情報で無事出来るようになりました。
感謝です。どうもありがとうございました。
勝手ながら、リンクを張らせて頂きました。
もし宜しければ、相互リンクをお願いできないでしょうか。どうぞ宜しくお願い致します。
＞時計わにさん
はじめまして。
ご連絡ありがとうございました。
お役にたてたようでなによりです。
リンクはBlogPeople経由で登録させて頂きました。
それでは今後ともよろしくお願い致します。
はじめまして。
スタイルキャッチャーの導入がうまくいかなくて、
ネットをさまよっていたら、こちらの記事にたどりつき、
おかげさまで、何とか動くようになりました。
嬉しかったので、記事に掲載させていただきました。
ありがとうございました。
＞たからにゃさん
こんばんは。
記事参照ありがとうございました。
Movable Type の記事はカスタマイズから不具合まで色々ご用意しておりますので、なにかありましたらまたお越しください。
ではでは！
こんにちは。sedorisanです。
お尋ねしたいことがあって・・・。
以前Seesaaブログを使っていたときも、今回MTを使っているときもそうですが、ブログに背景色がつかないんです。
なぜでしょうか。
MTの方はスタイルキャチャー、インストールしていますよ。
インストールは成功したと思います。
色はつかないですが、形式はちゃんと変わります。
これはSeesaaの時も同じです。
直接MTに関しての質問ではないですが、原因わかりますでしょうか。
いろんなページを見て回っているのですが、これといった解決法を見つけることができません。
アドバイスください。
よろしくお願いします。
＞sedorisanさん
こんばんは。
ご質問の件ですが、サイトおよび設定状況を拝見させていただかないと適切な回答をすることができません。
ということで、申し訳ありませんがサイトのURLをお知らせください。
ちなみに当サイトのテンプレート（固定レイアウト）をご利用でしたら、昨日エントリーした「公開テンプレートの背景色をCSSで変更する」が参考になると思います。
それではよろしくお願い致します。
こんにちは。sedorisanです。
URL貼っておきました。
このブログを見ると、そちらのパソコンで見ると、ちゃんと色が入っているかと思います。
他人のパソコンからみると色が入っているのですが、わたしのパソコンから自分のブログを見ると色が入っていません。
ところで、
自分のパソコンから他人のブログを見たとき、妙にシンプルなブログが多々ありましたので、もしかしたら、この場合にも、色が抜けて見えているのかも・・・とも思います。
ちなみにですが、色が抜けているとは、全て白黒というわけではなく、有色のテンプレートを利用した場合に、そのようになっていないということです。（タイトルは紫色、文章は黒、リンクは青、になっており、背景のデザインだけ抜けています。）
なにかブログが正確に反映されない設定になっているのでしょうか。
PCのブラウザが最新のものになっていないとか。
PCメーカーの日立に問い合わせましたが、ブログ特有の問題はわかりません、との回答でした。（他にインターネットエクスプローラーの設定の仕方を指示されましたが、これは一般的に画面が正確に表示されない場合の対処方法であって、やっても直りませんでした。）
ちなみにですが、このHPは白と黒でデザインされていると思いますが（？）キレイに表示されています。
なんでも構いませんので、気づいたことがあればアドバイスください。
よろしくお願いします。
＞sedorisanさん
こんばんは。
ご質問の件につきまして、解消する・しないは別として、まずは問題箇所を切り分ける必要があります。ブラウザは IE6 をお使いのようですが、Firefox ではどうでしょうか。
他のブラウザでも同様の表示であればPCの問題かもしれません。
それではよろしくお願い致します。
こんにちは。sedorisanです。
ブラウザをfirefoxに変えましたがダメでした。また、IE６からIE７にしましたが、同様にダメでした。
お手上げ状態です。
今、SeesaaブログのサポートとMTのサポートに問い合わせているところです。（問い合わせ待ちです。）
もしそれでも解決しないようであれば、PCの修理屋さんに有料で直してもらうしかないようです。
ところで、お尋ねしたいのですが、貴方様のこのHPの色は以前はサイドが黒で真ん中が白だったのですが、今は白で統一されているようですが、どうでしょうか。
私のPCから見ると、背景は白で統一しているように見えているのです。
お手数ですが、再度のアドバイスとともに、このHPの色を教えていただきたいのですが。（ちゃんと色がついているのか確認したいのです。）
よろしくお願いします。
＞sedorisanさん
こんにちは。
ご質問の件ですが、当サイトのサイドバー背景は白、中央カラム拝見は #fcfcfc という少しだけ色がついています。
Web配色を公開しているページで確認されてみてはいかがでしょうか。たとえば下記のページです。
http://color.eweb-design.com/0101_wsc.html
