- 2007年12月25日 15:43
- Movable Type | Vicuna | XHTML CSS
- 2007.12-30
-
Ninja Style 完成。(年内に間に合った!)
問題の修正とか、アイコンがついたりいろいろ変わっているので、新しいものを使ってください。
- 表示確認
- Download: Ninja Style
- 2007.12-27
-
当初配布していた暫定版のNinjaスキンに１箇所すんごい不具合がありました。
ボックスの高さを揃えるテクニックには、落とし穴があったようです。その不具合の表示と、原因を記事末尾に追記しましたので参照してください。
このテクニックを利用する際は皆様も注意してください。解決方法も模索しています。
僕が考える理想のCSSスキンとは、以下の条件を満たすものです。
- ユーザーが好みの形に変えやすい
- CSSに詳しくなくても1.が可能
- 適当に編集してもレイアウトが崩れにくい
- 少しの調整でイメージを大きく変えられる
- ユーザーのカスタマイズ意欲を掻き立てる
現在のVicunaのスキンはどうかというと、1.2.3 はモジュールによってある程度クリア出来ていると思うけど、色の調整などは膨大なCSSファイルから特定の部分を探さなくてはいけなく、細かな調整という点ではクリアできていません。
4.は、先の理由から、これも中途半端になっていて、例えば、VegaやOriginといった、カスタマイズされることを前提として用意したスキンでは、スキン自体は少しの編集でイメージを大きく変更できるようなつくりになっているけど、結局、変更したい該当箇所を探すのに苦労してしまうんですね。これは5.と繋がっていて、僕もあるのだけど、沸いてくるイマジネーションは即座に表現(反映)させられるべきで、その目的までの過程で苦労する要素が大きくなってくると、沸いてきたアイデアはどこかに消えてしまう。
「やりたいけど、面倒ならまぁいいか、きっと今浮かんだアイデアはたいしたことない」
なんて思ってしまったら、これは悲しい。Vicunaを使ってくれているユーザーがそう感じてしまったら、僕は2倍3倍に悲しい。技術的に難しいのならわかるけれど、一部分の16進数を変えたいだけで、この思考に陥らせてしまうのは、そんなものを用意する側が悪魔だ。(いや、小悪魔にしとこう。
そんなことを考えているうちに、カスタマイズしてくれているユーザーを見ると、すごいなぁと思うと同時に、ちょっと罪悪感も生まれてくるようになっちゃって、なんとかもっと簡単に冒頭の理想に近づける方法はないもんかと考え、しばらく前から試行錯誤していました。
構造と色彩定義を分ける
CSSは、文書(HTML)から装飾を切り離してデザインできる言語だけど、これと同じように、CSSの中でもまた、レイアウト構造と色彩を切り分けたらどうかと考えてみました。現在のVicunaの構成にあわせてると以下のようになります。
- Webサイト
- HTML
- CSS
- コアCSS (レイアウトや余白などの位置情報)
- element.css (各要素単位の装飾定義)
- class.css (特定の役割を持った要素に対する装飾定義)
- context.css (文脈で変更される装飾定義)
- layout.css (カラムレイアウト関連の定義を抜き出したもの)
- サブスキン (色彩情報と、レイアウトの設定情報だけを抜き出したもの)
- モジュールCSS
- コアCSS (レイアウトや余白などの位置情報)
複雑なものは可能な限りコアCSSに落とし、サブスキンには編集しても安全なレイアウト情報と、全ての色彩定義を記述する。これで、ユーザーは、カスタマイズのために無関係な行を目にすることなく、好みのデザインに近づけることができるようになるはずです。また、そこにはボックス関連の指定が無いので、各モジュールや2カラム、3カラムなどのレイアウトと相互作用することなく、完全に独立した設定ファイルになります。
サブスキン製作者
Vicunaを作ってから10ヶ月経つけど、未だVicunaのスキンを製作してくれるような人は出てきていないんですね。やはり、CSSファイルから目的の場所が見つ辛かったり、一般的なCSSの作りと違って全ページ共通のHTMLに対して作らなければならないのが、ちょっと大変だったかなと思います。でも、このサブスキンを使った方法ならば、スキンの製作も以前よりは比べ物にならないくらい簡単になるし、純正の他のモジュールにも対応するので、僕はちょっとだけ夢の世界を妄想しています・・・!!
以上を実践した新しい仕様のスキン
まだ作りかけですが、冒頭の理想に出来る限り近づけたスキンを暫定公開します。Vicunaのユーザーなら、ぜひぜひ適用して、サブスキンを編集して遊んでみてください。サブスキンは style-ninja/subSkin/subSkin.css にあります。
Vicuna を使っていない方でも、以下の方法でローカルでスキンを試すことができます。
サンプルページの表示は、
- mod_gNavi.css (グローバルナビ用スタイル)
- mod_eyeCatch-Short.css (短い画像を表示)
- mod_multiColuType2.css (本文が右にくる3カラム)
の、3つのModule CSSを読み込んだときの表示です。
Vicunaスキンの仕様説明
Vicunaのスキンを触ったことがない人に説明しておくと、最初から読み込まれるコアCSS+サブスキンのほかに、module.cssからコメントアウトではじめて読み込まれる定義ファイルがいくつかあります。例えば、特定の場所に任意の画像を表示するアイキャッチモジュールは、module.css内には次の用にコメントアウトされて読み込みが保留されています。
/*-------------------------------------- Eye Catch [Long] Module ---------------------------------------*/ /* @import url(module/mod_eyeCatch-long.css); */
この、@importの上下にある /* */を削除することでコメントとして扱われいた指定が有効になり、style-ninja/module/mod_eyeCatch-short.css が読み込まれ、画像が表示されます。他にも色々なモジュールを用意しているので、読み込ませて遊んでみてください。
サンプルページの表示は、
- mod_gNavi.css (グローバルナビ用スタイル)
- mod_eyeCatch-Long.css (長い画像を表示)
- mod_multiColuType1.css (本文が中央にくる3カラム)
の、3つのModule CSSを読み込んだときの表示です。
マルチカラムモジュール
各モジュールは複数同時に読み込むことが出来ますが、
- mod_multiCol-Type1.css
- mod_multiCol-Type2.css
はどちらか一方しか読み込ませることが出来ません。なので、片方を読み込むときは片方はコメントアウトしてください。
なお、このマルチカラムモジュールをページに反映させるには、ページのbody要素に付加されているclassを編集する必要があります。モジュールのインポート後、3カラムにしたいページ内のbody要素を以下のように変更してください。
<body class="xxx double">
を
<body class="xxx multi">
に。
詳しく仕様を知りたい方は、Vicunaのカスタマイズページ内、レイアウトの変更方法を参照してください。
丈夫なデザイン
Ninja Skinでは、CSSの定義を無駄なくシンプルに、そして柔軟にと、チョ→ 考えてつくりました。このスキンがどれだけ柔軟で頑丈を示すために、次のような無茶なデザインを試してみます。
module.cssから
- eyeCatch short モジュールの読み込み
- eyeCatch Long モジュールの読み込み
- eyeCatch Mini モジュールの読み込み
- eyeCatch Header モジュールの読み込み
- Global Navi Style モジュールの読み込み
- Calendar Style モジュールの読み込み
- Multi Column Type2 モジュールの読み込み
の、ほぼ全てのモジュールを有効にした状態のページが以下になります。
まだ調整中なので、Firefox, IE, Operaでしか確認していませんが、これらのブラウザではどのモジュールもバッティングすることなく、綺麗に(実用的ではないですが)反映されていると思います。
ちなみに、何もモジュールを読み込まないもっともシンプルな状態は次のページで見られます。
このほかにも、全てのカラムレイアウトでサイドバーの位置入れ替えができます。これらと切り離された、色彩設定サブスキンとの組み合わせこそ、今出来る僕にとっての最高のスキンの形でした。Vicunaユーザーも、そうじゃない人も、サブスキンをいじって良いものが出来たら、どうか僕にお恵み下さい。(
このスキンは、以下のCMSツールで利用できます。
ここまで読んでくれた人、ありがとう！ そしてメリークリスマス。じゃあの。
追記
Ninja Skinでは、Coliss.comさんで以前紹介された 「[CSS]高さの異なるカラムを揃えるスタイルシート」というテクニックを利用したのですが、フラグメント識別子を使ったリンクを利用したときに、そこまでの内容物が ovetlow: hidden された大元のボックスの中に隠れ、下に巨大な余白(テクニックで使用しているpadding)が出現してしまうという不具合を見つけました。
不具合は以下のページで再現しました。
- 正常な状態: 高さを揃えたページ
以下は、ページ内のコメント部分に付加したフラグメント識別子(#comments)を利用した同一ページ
- 不具合のある状態: 高さを揃えたページ
一見別ページのように見えますが、CSSを切ればわかるとおり、2つは同一ページです。
何でこうなっちゃうの?
高さを揃えるテクニックでは、親ボックスにoverflow: hiddenを指定します。
フラグメント識別子へとページが移動する際、overflow の指定のあるボックスでスクロールを内部ボックスへと切り替え、overflow: hidden のボックスが強制的にスクロールされ、内容物が見えない領域に移動されてしまうのが原因だと思います。
どうにか対処できないかと考えているのですが、今のところ解決方法は見つかっていません。できればこのテクニックを利用したいので、何かわかった方がいましたらコメントを頂けると有難いです。
ダウンロードできるNinja Skinは、このテクニックを削除したものと差し替えました。一部他の箇所の調整と、各ページのコメントを大幅に修正しました。
- Newer: ライセンスフリーのアイコン配付サイト
- Older: CSS 脳内裁判
Comments:15
- wu 2007年12月25日 17:09
del.icio.usのコメントにて、
>言いますな。。。タイトルのことだと思いますが、「最高のスキンを作りました」という意味ではなく、「自分が作れる最高のスキンとは何か」という意味です。
そんな、めっそうもございません。確かに誤解されそうなので、変更しときます。- 1user 2007年12月25日 20:34
うーさんこんばんは。
前のスキンにも同じように色設定をまとめたものがありましたよね、
あれとはどうちがうんですか？今回、モジュールＣＳＳファイルの中の記述をはじめてみてびっくりしました。 それぞれのページがどういうレイアウトで表示されるかは使う人側が決めるので、どのようなシチュエーションでも綺麗にみせるのはなかなか大変なんですねぇ。。。
- wu 2007年12月25日 21:22
こんばんは。
前もサブスキンがあったけど、あれはモジュールで用意してて、それまでの指定を上書きするものだったので、ちょっと使いづらかったんですよね。>それぞれのページがどういうレイアウトで表示されるかは使う人側が決める
そうそう、ここがパズルみたいで面白いんです。でも、いまNinjaスキンをみてみると、3カラムでは文字サイズの縮小に弱いことに気づきました。 orz あとはここを直してみます。本当は、これのほかにちょっとだけ変更したイメージの全然ちがうスキンがあるんですが、それははお楽しみに。
書き込みどうもありがとうございます。- wu 2007年12月25日 21:31
>3カラムでは文字サイズの縮小に弱いことに気づきました。
あ、直りました。難しくなくてよかった。
min-widthやmax-widthの初期値は none なんですね。
はじめてしった。- Heath 2007年12月26日 00:46
僕は色とかもカスタマイズして使っていますが、見た目全体を弄ろうとすると、wu さんの書いた通り複数の CSS の複数の箇所を変更する必要があります。一時期、元を弄らずに全て override させて同じ事をやろうとしましたが、CSS のセレクタの優先順序の限界があって、 !important の連発になってしまうため、あまり気持ちの良いものではなかったです。
CSS を弄るのは面倒では無かったのですが、変更したものが自作 skin というよりも、"vicuna の skin をちょっと弄っただけ" という構造上の中途半端さがなんともいえません。
自作バージョンとして公開するにしては変更部分が切り離されていないし、～～skin の色違い とかいうには弄りすぎだし、その中途半端さが結構カスタマイズ公開をためらう原因の一つだと感じました。
カスタマイズ部分を切り離してしまえば、気持ち的にもオリジナルバージョンを公開しやすいと思いますよ。
# MT4.1 の追いかけなんですが
# 年始年末のごたごたが終わってからになりそうです、申し訳ない- wu 2007年12月26日 01:31
Heathさん、コメントありがとうございます。
CSSをいじれる人はそう思うかもしれませんね。
でも、カスタマイズで１箇所でも自分の好きな色を入れたブログって、完全に出来合いのスキンよりも断然愛着沸くと思うんです。 だから、CSSがほとんど分からない人のために、面倒な部分は全て作り上げて、カスタマイズの余地を残し、あとは塗り絵や好きな画像をはめ込んだりして使ってもらうのが嬉しいなぁ。
VicunaのFeedbackページの中で個人的に気に入っているのは
http://toru.instinc.jp/
このサイトで、背景画像の挿入やアイキャッチモジュールの読み込み、あと、色変えだけだけど、これってもう、立派なオリジナルスキンって言えるし、こういう使われ方を見ると本当に嬉しくなります!ブログはデザインパターンがある程度画一化されてるので、僕はどんどん「よくあるタイプ」を狙って作っていったほうがいいきもしますねぇ。
お仕事がんばってください。そしてどうぞ空いた時間はコタツに入ってみかんを食べてゆっくりすごしてください。 旦~~
- wu 2007年12月26日 01:41
あ、カスタマイズ部分って、レイアウトの変更とか画像挿入ということかな。
もしそうなら、それは気にしないでいいんですよー！ 僕もそのために、スキンを Prototype, Hard, Fixed と3つに分けて明記したんです。 bazookaやFutura, Warshipも、レイアウトの変更の余地の無いFixedとして、何も気にせず、また、そうしないと出来ないようなデザインで作ったつもりが、あまったボックスを使ってアイキャッチにだけ対応させたくなってしまってどうにか少しだけ筆を入れられるようにしたんです。今も本当は固定幅のものを作りたいと思ってるんですが、どうもサービス精神が邪魔してしまってプロトタイプばかりに手だしてる、そんな次第であります。
- wu 2007年12月26日 02:19
コメントフォームがコメントログより上にあるのは、問題だなぁといまさら気づいた。orz...
- wu 2007年12月27日 02:27
うんわー。凄いバグ見つけちゃった。
各カラムの高さをあわせるために
http://coliss.com/articles/build-websites/operation/css/558.html
この方法を使ったのだけど、アンカーリンクでページ内を飛ぶとそこまでの記事が全部overflow: hiddenに隠れて消える。
FxでもIEでもそうなる。直しようが無い気がする。あー信じられない…。- wu 2007年12月27日 02:31
だ め だ こ りゃ。
寝る前にいやなものをみてしまった。- e-luck 2007年12月27日 20:45
うーたん、こんばんは。
これは、「Equal Height Columns method」を公開している Position is Everything でもこのメソッドの問題として以前から挙がっているやつ。http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
IEはなんとかなりそうだけど、Gecko系はアンカーにname属性使って、ターゲットにposition:absoluteを指定すれば防げるっぽいけど、あまり現実的ではないですね。
今んとこ、どうしようもないみたい。
上記ページを見ると、それ以外にも問題がある事が分かるので一読してみると良いです。- wu 2007年12月27日 21:34
eijiさんこんばんは!
なるほど、きちんと調べてから使わないとだめですねぇ。 このままスキンとして配付して、おかしな物が広がっていったらとおもったらぞっとしました。(理想のスキンなんて程遠い…。
CSSレイアウトの弱点の一つだっただけに、最初は凄い感動したんですが orz
ありがとうございます！- owl 2007年12月29日 05:05
ども、owlです。
個人サイトのほうで使わせていただきました。
それにしても、モジュールをのぞいてほとんど画像が使われていないのに、すごいきれいに見えるデザインですね。
どうしても画像に頼ってしまうところがあるので、勉強になります。- wu 2007年12月30日 06:22
owl さん、ありがとうございます。
Ninja スキンですが、さきほど調整が全部終わって新しいものと差し替えました。記事中のサンプルにも新しいスキンに適用させたので確認してみてください。
http://3ping.org/2007/12/25/style-ninja3/styleTest/いろいろなところにアイコンをつけたのと、
諸々の問題を修正したので、新たにダウンロードをお願いします。
http://vicuna.jp/storage/sNinja/style-ninja.zip- cz 2008年2月 9日 21:17
あのFC2でスキン・モジュールを使うことができると書いてありますが導入法が全然わからないのですけど・・・
Trackbacks:0
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/112
- Listed below are links to weblogs that reference
- 理想のCSSスキンのかたちを求めて from 3.5ping.org
