- March 16, 2007 11:48 AM
- Movable Type | XHTML CSS
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。
- Movable Type テンプレート mt.vicuna
Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃごちゃしたソースとさよならしたい方にはもってこいです。構造的に無駄が無いので勉強中の方にこれを使ってXHTMLとCSSをいぢくり倒してほしい。みたいな。
mt.Vicuna専用Skin
スキンはまだプロトタイプとして用意したVegaとAltairの2つしかありませんが、これにはちょっとした遊びがあって、1つのスキンで20種類ほどの機能的なレイアウトができるようになっています。(ほんとはもっとできるんだけど、実用的なものだけ紹介しています)
組み合わせを全部紹介するのは大変めんどうくさいので、ここでは一部を紹介します。
上記のような2カラムレイアウトはもちろん
3カラムから
コンテンツ量が多いサイトで最近良く見かける右2本メニューもできます。
また、カスタマイズするユーザーを見ていたら、なんとかしてアイキャッチ画像を表示させようと苦戦する方もよくみかけるので、これらも簡単に表示できるようにしました。
初期のレイアウトは可変幅で今話題(?)のエラスティックレイアウトになっていますが、3-layout.cssの調整でここらへんの大枠のレイアウトは簡単に変更できます。
もっと見たい方は以下のページを参照してください。
- mt.Vicuna - スキンで可能な実用的レイアウトの種類
CSSに不慣れな方でも、このように複数用意されたレイアウトを簡単に切り替えられるように、bodyに付加するclass名での切り替え、CSSのモジュール化による管理、そしてコメントアウトを解除することによってモジュールがONになるという仕掛け(?)で設計しました。詳しくは以下のページを参照してください。
body class="single"とすると1カラム、doubleで2カラム、multiで3カラム(またはそれ以上)のレイアウトに パッ と切り替わります。
あれ、なんか遠くから声が聞こえてきたぞ
「1つとはいえ、XHTML文書に見栄えの名前がついたclassなんて書いているんじゃねえ氏ね」
だ、大丈夫です。そう感じた方ならこのようなclass名を使わないでも切り替えられるように、各テンプレートにはもういっこclassがくっついているので、これを利用して少し書き換えれば同様なレイアウトが組めます。これでひとつどうかお許し下さい。はぁはぁ。
CSSファイル構造とスタイルモジュール
レイアウトを含め、スキンにはカスタマイズに合わせて用意されたCSSファイルがスタイルモジュールとして最初から同梱されています。以下はプロトタイプスキンのCSSファイル構造です。
のコアスタイル3つと4-module.cssがあり、4-module.cssには好みに合わせて使用できるスタイルモジュールを読み込むImport規則が記述されています。初期状態では全てのモジュールはコメントアウトされimportされませんので必要ない記述を読むということはしません。モジュールの読み込ませ方については先にあげたページに詳しく書きましたのでそちらを参照してください。
モジュール化の利点
CSSファイルを分けて管理する方法については 2xup - スタイルシートを分けて管理する方法をまとめるに詳しく書かれています。mt.Vicunaではこのように分割して管理する方法と、それをちょっと応用して第三者(テンプレートユーザーですね)が管理・カスタマイズしやすいような分割方法を実践しています。
製作者以外の第三者がWEBページの見栄えを大きく変えられるようにしなくてはいけないケースなんて稀だと思いますが、分割管理することで授かれる恩恵、ひいては構造から見栄えを切り離すことで生まれるPOWERというものを感じることができます。アンチCSS・テーブルレイアウト支持者はCSSのつまんないとこを突っついていないで、こういうとこをもっと見て欲しい。
各スタイルモジュールは必要なければ読み込まれないのでいくらでも作りこむことができ、開いているCSSファイルの記述はモジュールのことしか書かれていないのでとても見通しがいい。ただ、ファイル数が多くなってしまうのと、他のモジュールと衝突して組み合わせによってレイアウトが崩れないようにするのに苦労しましたが、扱いに慣れてくると かしこさ が １ あがって 新しい脳内レイヤーができて利点ばっかり思いつくもんですね。ただ見栄えを完成させるだけでなく、どの要素がもっているスタイルなのかを深く考えることができるようになるとおもいます。ちょっと話がずれちゃうのでまた別のエントリーにでもするつもりですが、文書構造と見栄えがどういう繋がりを持っているかというのを考えるのはとても楽しいんですよ。1枚の完成図をCSSで再現させるという考え方でもいいですが、それができたら、じゃあもし各要素が正しい文書構造を保ったまま入れ替わったり、削除されたときも自然とかっこよくなる見栄えができるだろうか。って考えて作ると自然と文書の各要素と見栄えの繋がりが赤い糸のように浮かび上がってくるんですね。ロマンチックですね。なんか心までアツクなっちゃいましたけど、この記事はMTのテンプレートの記事ですので軌道修正しましょう。
他人がカスタマイズするサイトを製作って!
凄い難しいくて楽しい。以前配布していたテンプレートで失敗したなと思うのは、CSSによる縛りが強すぎた事でした。ユーザーのXHTMLとCSSの知識はいろいろなのですが、XHTMLを間違って記述してレイアウトが「なんかこれちょっと変じゃねえか？」となるのはまだ良いとして、正しいXHTMLを書いてそうなってしまうことが多かった。具体的には、予想していない要素を入れ子にすると気持ち悪い見栄えになるとかがありました。たいしたズレでもないけど、「うわーこのひとアソコにアレ入れちゃった! 予想外! 」ということが多かった。今回はそういったことが起こりづらいように設計してあるので、ユーザーが増えてくるのが楽しみです。
サブスキンモジュール
mt.Vicuna専用スキンにはもう１つ仕掛けがあって、サブスキンという配色設定用のモジュールが用意してあります。これはカスケードの末端に位置し、それまでの指定を簡単に上書きすることができるようになっています。(初期ではコメントアウトにより読み込まれていません)
CSSはちょっと苦手という人でもファイル内に記述されたコメントを見ながら調整することでスキンの見栄えを大きく変える事ができます。また、１つのモジュールとして独立し、ボックスに関するプロパティは書かれていないので、他人の作ったサブスキンモジュールを組み込むこともできます。mod_subSkinというフォルダに纏められていますので、例えばリストマークやポイント画像を使って装飾し、フォルダごと他人と共有するといった使い方もあります。他のモジュールとの組み合わせでもおかしくならない様にするには少し頭を使うかもしれませんが、角丸にするサブスキンというのも面白いかもしれないですね。
ローカルで作りこめるスキンセット
サーバーに置かれたページをCSSでカスタマイズするには、ローカルのCSSを編集し、アップロードして表示を確認するという繰り返しになるのでとても大変です。そこで、ローカルで各ページのXHTML構造を再現したhtmlファイルと、それらに適用されるCSSファイルをパッケージにして配布することにしました。
同梱されている確認用のhtmlページのソースは、ページ内のリンクが切られている等、細かい部分で実際のソースとは違いますが、これを使ってローカルでまずCSSを編集・調整し、手元のhtmlで確認、完成したらstyle-vegaフォルダをアップロードすればブログは同じ見栄えになるはずです。カスタマイザーは是非使ってください。
Movable Typeを設置するつもりが無いかたでも、ちょっとモジュール化ってどんなもんだろ？って人は落としていじくって遊んでみてください。意味わかんねーとならないように、mt.Vicuna - カスタマイズにドキュメント書きまくったので読んでもらえたら扱い方はわかるとおもいます。
他のCMSツールへの移植
mt.Vicuna ver.1.0で不具合が見つからなければ、スキンをもう少し充実させ、順次他のCMSツールへ移植することを考えています。
- WordPress
- FC2 Blog
- Serene Bach
といった順番で移植しようと考えていますが、僕はMT以外のCMSを触ったことがないので、手伝ってくれる方がいたら嬉しいです。といっても、共同作業ではなく、mt.VicunaのMTタグを置き換えてこれらのツールで動くように設置して下さったらそれを頂戴して調整するという、人間的に嫌われそうなかたちでのお願いです。
お礼らしいお礼はできませんが、配布サイトの全てのページの下部にスペシャルサンクスとして移植版を製作して下さった方のサイトへリンクを目立つよう設置し、ご希望ならば拙著「実践 Web Standards Design」を差し上げます。
では、Vicuna.jpをどうぞ宜しくお願いします。
- Newer: mt.Vicunaの移植が決まったぁ!
- Older: XHTML CSSの書籍を執筆しました
