1年以上も前に予告していた当BlogのHeader周りのデザイン修正をようやく実現させた。

最終的には、positionプロパティを使って、サイトタイトルと自動挿入広告を横に並べるようにするつもりですが、XHTML Validにする方が先ですので、後のお楽しみにとっておくことにします。

後の楽しみも何も、1年以上ほったらかしじゃ。

ちなみに、修正前のデザインはこんな感じだった。あ、それと実際にはpositionプロパティではなくfloatプロパティを使ってデザイン修正した。

ところで、今回CSSを修正していて「LoggixのCSSファイル構成は意外と使いにくい」と感じたので、以下に気付いた点を書き留めておく。回避方法はたぶんあると思うので、いずれ修正しようと思う。

LoggixのCSSファイル構成の欠点

Loggixの吐くXHTMLソースが直接読み込むCSSファイルはdefault.cssだ。そしてdefault.cssから複数のCSSファイルを@importで読み込むようになっている。（Win IEの場合はwin_ie.cssを介してdefault.cssを読み込むが、説明が煩雑になるので割愛する）

• default.css内の@import構文

@import url(../_import/text.css);
@import url(text.css);
@import url(modules.css);

ここで問題になるのは、最初に読み込まれるdefault.cssに、@import構文以外に具体的なCSS指定が記述されていることだ。

@import規則によれば、@importで読み込まれる外部ファイルの記述内容よりも元ファイル（ここではdefault.css）の記述内容の方が優先されるため、default.cssの内容をカスタマイズしたい時は、直接default.cssを編集するしかない。

しかし、直接default.cssを編集してカスタマイズする方法だと、Loggixがバージョンアップする度に再編集が必要になるので管理が大変だ。それよりも、例えばuser-custom.cssというカスタマイズ専用の外部ファイルを作ってそこにカスタマイズ内容をまとめることができれば、管理は大変楽になる。あとは、default.cssの記述内容を上書きできるように工夫すれば良い。

そのための処方箋は下記の通りだ。

1. Loggixの吐くXHTMLソースから直接読み込むCSSファイルを、例えばimport.cssというファイルに変更する。

2. default.css内の@import構文はすべて削除する。

3. 自分カスタマイズ用にuser-custom.cssを用意する。

4. import.cssから@import構文で各CSSファイルを読み込むように設定する。（下記参照）

• import.cssの記述内容

@import url(default.css);
@import url(../_import/text.css);
@import url(text.css);
@import url(modules.css);
@import url(user-custom.css);

問題は、Loggixの出力するXHTMLソースから直接読み込ませるCSSファイルをどうやって変更するか。PHPを弄らないといけないと思うので、それはまた後日検討することにする。面倒だったら、default.cssをimport.cssの代わりにして、default2.cssを読み込むようにするのが簡単かもしれない。（cssファイル名の意味づけも重要だと思うので、出来るだけPHP修正方法を考えるようにするつもりですが）

追記

@import構文を多重化するとレンダリング・パフォーマンスが悪化する場合があるそうだ。特にInternet Explorerで顕著らしい。

[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか | コリス

[css] @importを使うべきでない理由 | Screw-Axis

したがって、必要以上の@import多重化を避けるためにも@import.cssから直接その他の全cssファイルを読み込むようにしたい。また、Win IEの場合もwin_ie.cssからimport.cssを読み込むのではなく、win_ie.cssから直接その他の全cssファイルを読み込むようにすべきだろう。これも、そのうち対処することにしよう。