カスタマイズする際にどのCSSをいじるのか

カスタマイズする際にはゼロから書き直すのはちょっと無理がある。既存のCSSを活かしつつ、デザインを変えていくというのが現実的な路線だろう。ただPloneが読み込むCSSはたくさんあるので、どれを残していじり、どれを捨てるのかを知っていると便利だ。

以下、CSSの種類、カスタマイズする必要性と、CSSの内容についてまとめてみる。

base.css（一部変更する必要があるか？）

基本タグと一部クラスのスタイルをまとめたCSS。body, table, a, img, p, p img, h1~h6, h1~h6 a, ul, ol, li, dt, dd, fieldset, legend, form, label, textarea, input, select, abbr, acronym, q, blockquote, code, pre, ins, delといったタグの他に、.explain .visualClear, .netscape4といったクラスのスタイルが規定されている。色やマージン、パディングなどは変更することがあるだろう。

public.css（メインでいじるCSS）

ロゴ、タブ、コンテンツ、その他重要な要素に関するCSS。メインでいじる対象。

columns.css（いじる必要有り）

コラムのレイアウトに関するCSS。必ずいじることになると思う。

portlets.css（いじる必要有り）

ポートレットのスタイルを規定したCSS。必ずいじることになると思う。

authoring.css（いじる必要なし）

新しいオブジェクトを追加したり、状態を変更したりするメニューの部分に関わるCSS。外部閲覧者に見える部分ではないので、いじる必要はないだろう。というかいじらない方がいいと思う。

presentation.css（いじる必要なし）

@media projectionに対応したブラウザ（Operaとか）で使用するCSS。いじる必要はないだろう。

print.css（こだわる人はいじる）

印刷用のCSS。こだわりのある人はいじる必要有り。デフォルトでは、コンテンツ部分のみを出力するように設定されている（ロゴとか、タブとか左右のコラムとかをdisplay: none;している）。

mobile.css（とりあえずはいじる必要なし）

モバイル用のCSS。 昨今モバイル端末は増えてはいるものの、まぁ、いじらなくてよいのでは。

deprecated.css（後方互換重視のためにはいじる必要が出てくる）

Plone 2.1登場時に手違いで出てきてしまったクラスたち。2.5ではENDする。後方互換を大切にする場合はいじった方がいいけど、めんどくさい。

generated.css（こだわる人はいじる）

アイコン周りのスタイルを規定しているCSS。細かいことが気になる人はいじるけど、私は気にならないので放置する。

member.css（一部変更する必要があるか？）

公開・非公開などの状態によって色を変える規定しているCSS。 色が気になる人はいじろう。 

• public.css, columns.css, portlets.cssをオフにする

ということ。そしてこれらで規定している部分（及びbase.cssの上書きする部分）をploneCustom.cssで作成するというのがベストな気がする。

CSSベースではなく、パーツ化されたテンプレートベースで説明しているwhere is whatはすばらしいドキュメントなので見ておくのが吉。