MT4.0、スタイルキャッチャーで、ヘッダー画像を差し替える方法

MT4.0のスタイルキャッチャーを使いつつ、ヘッダー画像を差し替えるには、どうしたらいいか？

まず、スタイルキャッチャーが、どういう仕組みになっているのか、調べてみました。
すると、こういう構造でした。

styles.css（これがページが読み込むＣＳＳファイルです）
-----------
@import url(base_theme.css);
@import url(http://（デザインを保存しているＵＲＬ）/screen.css);
-----------

まず、ベーステーマというＣＳＳファイルを読み込んで、次に、デザインスタイル用のＣＳＳファイルを読み込む、…と言う形ですね。
で、ベーステーマには何か書かれているかというと、

など。

一方のデザインスタイル用ＣＳＳファイルには、

が書き込まれています。

ＣＳＳファイルというのは、同じ項目の記述が複数あった場合は、一番最後に読み込んだ記述が有効になります。

たとえば

　ページの途中に書かれたＣＳＳ記述
＞ページのトップに書かれたＣＳＳ記述
＞外部ファイルから読み込んだＣＳＳ記述
＞それより先に読み込んだＣＳＳの記述

と言う風に、優先順序が決まっているわけですね。

だからＭＴ4.0のスタイルキャッチャーの仕組みでは、基本的な記述をまず、ベースデザインで一旦指定しておいて、デザインＣＳＳで再指定するという形になっているんです。

となると、サイト毎にヘッダー画像を変えるには、どうすればいいのか？答えは簡単でした。

まず、量産用に使うデザインスタイル用のＣＳＳファイルからヘッダー画像を指定している部分の記述を削除します。そしてその替わりに、どこかの時点で、その指定を書き込めばいいわけです。

で、新しく記述を書き入れる場所を考えました。

デザインスタイルのＣＳＳファイルに書き込むと、デザインスタイルのそれぞれのフォルダ内にある画像を呼び出してしまうので、画像を差し替えるにはデザインスタイルフォルダの画像を差し替える必要があります。これをやると、同じスタイルを使っているサイトのヘッダー画像は全部置き換わってしまいます。

これではまずいので、それぞれのサイトのフォルダの直下にあるＣＳＳファイルから呼び出さねばなりません。
そうすると、site.cssと言うファイルに書き込まなければならないんですが、このファイルはＣＳＳをインポートするだけの仕様になっているので、ここに書き込むと、全く別のスタイルまで影響が出ます。

となると、デザインスタイルのＣＳＳから、ヘッダー画像の記述を削除しておいて、それより先に読み込むファイルにその記述を書き込めばいい。ようするにベーステーマのＣＳＳの一番最後につけくわえればいい、と気づきました。

ベーステーマ．ＣＳＳ
-----------
／＊ヘッダー画像の指定＊／
＃header {
background: #ffffff url(＜$mt:BlogURL$＞header.jpg) no-repeat left bottom;
}
-----------
と言う感じですね。

こんな風に記述して、そのサイトのフォルダの直下に、ヘッダー画像を放り込めばいいわけですね。

これで、自分の作ったデザインテンプレートを採用する場合は、サイトのトップにある画像が、ヘッダー画像になるようになりました。

一方、画像とセットになっているデザインスタイルなら、新しく書き込んだ記述は、デザインスタイルのＣＳＳファイルで再定義されますから、ヘッダー画像がセットになったモノが使われます。

良かった良かった。

MT４．０でブログを量産するなら、ぜひ挑戦してみてください。案外簡単ですよ。

スポンサードリンク

トラックバック(0)