Movable Type 4.2のスタイルキャッチャーで自作のCSSを適用する。

MT4.2: スタイルキャッチャーでオリジナルのcssを選択できるようにする方法 - max engineering.

参考にさせていただいたのは↑のサイト。スタイルキャッチャーで読み込めるようにするためには、CSSファイルの冒頭に専用の記述を追加して、サムネイル用の画像を2枚用意する必要があります。まずは、CSSファイルに以下の記述を追加します。

/* スタイルキャッチャー用の記述
name: nocogreen
designer: nishi
designer_url: http://www.hitohen.com/nishi/
layouts: layout-wt
*/

上から順に、スタイルの名前、作成者、Webサイト、レイアウトの情報を記述します。レイアウトは「w」が大で「t」が小を表しています。今回は2カラムの大・小なので「layout-wt」となります。そして、「thumbnail.gif」と「thumbnail-large.gif」をそれぞれCSSと同じディレクトリに作成。この画像がないとエラーになってしまうので、面倒でも用意しないとダメです。準備ができたら、いよいよ管理画面からスタイルキャッチャーを使ってスタイルを適用します。


［デザイン］-［スタイル］を選択してスタイルキャッチャーの画面を表示し、緑色の＋マークをクリック。


CSSファイルのURLを入力して［OK］をクリック。


用意したサムネイルの画像やスタイルの情報が表示されます。［デザインを適用］をクリック。

スタイルを適用すると「/mt/mt-static/support/themes/」以下にCSSのファイル名でディレクトリが作成され、そこに各ファイルがコピーされます。さあどうだ！と見てみると、カラムがガタガタ。


見事なカラム落ち。このときは原因不明。

ここで散々悩んだのですが、試行錯誤の結果、どうやら原因は自前のCSSではなくて「blog.css」の方にありそうだということが判明。スタイルキャッチャーからスタイルを選択すると、インデックステンプレートの「スタイルシート」の内容が自動的に更新され、ブログのルートディレクトリにstyles.cssが出力されます。このとき、指定したCSSと「/mt/mt-static/themes-base/blog.css」という2つのCSSを読み込む記述になっているのです。

結局、手動でstyles.cssを編集してblog.cssの行をコメントアウトすることで解決はしたのですが、いまいちしっくりこない。スタイルキャッチャーからスタイルを選び直すと、毎回blog.cssを読み込む記述が復活してしまいます。

blog.cssを編集して空っぽにできればいいのですが、ほかのユーザーに影響があるかもしれないので下手なことはできません。でも読み込みたくない。でも選択するたびにblog.cssを読み込む記述が復活してしまう。うーん。

と、多少のモヤモヤを残しながらも、とりあえずstyles.cssを編集することで解決したのでした。最初っからそうすれば良かった......