カスタマイズするために前提となること

カスタマイズするためにはCSSについての知識が必要です。一般的にCSSがどのように読み込まれ、どのようにスタイルが構築されるのか、CSSはどのように記述するのか、などを知っていることが前提になっています。

あると便利なツールを事前に準備

スキンをカスタマイズしたり、最終的にプロダクトとしてアウトプットするために便利なツールをインストールしておくとよいでしょう。

externalEditor

ZMIでファイルを編集するときのあのもどかしさと言ったら…。ZMIの編集画面は狭いですよね。externalEditorは自分のお気に入りのエディタで編集することを可能にしてくれるステキなプロダクトです。externalEditorサーバはPloneをインストールすると勝手にインストールされるのですが、ローカルマシンにexternalEditorクライアントをインストールしないと使えませんので是非ともインストールしておきましょう。Windowsユーザの方はこちらを、Macユーザの方はこちらを参考にしてください。

qPloneSkinDump

qPloneSkinDumpはカスタムしたオブジェクトをまとめてプロダクトにしてくれる便利なツールです。使い方はこちらをどうぞ。

* カスタマイズしたものをプロダクトにしてくれるプロダクトとしては、他にもDIYPloneStyleがあります。

カスタマイズの準備

さてプロダクトの準備ができたらカスタマイズの前準備をします。もちろんいきなりploneCustom.cssをいじってもいいのですが、それだと必要でない既存のスタイルが邪魔をする場合があります。必要なスタイルを残しつつ、それなりのスキンを作り上げようと思うのならば、「部分的に」既存のCSSをはずしてやるのが賢明でしょう。PloneのCSSはportal_cssによってコントロールされていますので、ZMIから「plone_instance/portal_css」を開いて不必要なものをオフにします（オフにしたいCSSの「enable」のチェックをはずしてsaveするだけです）。

（どのようなスキンを作るのかにも依りますが）おすすめは以下の３つをハズすことです。

• public.css
• portlets.css
• columns.css

こうすることで、デフォルトのPloneスキンがいい具合に崩れてくれますので、あとは「ploneCustom.css」をしこしこほげほげするだけです。

「plone_instance/portal_skins/plone_styles/ploneCustom.css」へ行き、「custom」ボタンを押しましょう。すると「plone_instance/portal_skins/custom/ploneCustom.css」という場所に移るハズです。ZMIの編集フィールドの上にペンシルアイコンがあると思いますので、そのアイコンをクリックすればexternalEditorによってあなたのお好みエディタが立ち上がるハズです。お好みのエディタでお好みのスタイルにカスタマイズする至福の時間を堪能してください。

プロダクトに落とし込む

ploneCustom.cssをいじり終えたらスキンをプロダクトにして公開しましょう。どうやってプロダクトにしていいかわからない？そう、私もそうです。自分でプロダクトにするなんて、何をどうやったらよいかわかりません。しかしありがたいことに、世界にはそういう人のために便利なプロダクトを公開してくれている人たちがいます。それが上述した「qPloneDumpSkin」です。このプロダクトを使えば、カスタマイズしたスキンをボタン一つでプロダクトにすることが可能です。詳しくは上述したリンク先を参照してください。設定がよくわからない人は以下の部分だけを変更してsaveしてください。

• 「ZMI Base Skin Name」に「Plone Default」を入力する（デフォルトでは「Plone Tableless」）
• 「Skin's Name」に自分の作ったスキンの名前を入力する（小文字で始める）
• 「Product name」に自分の作ったスキンの名前を入力する（小文字で始める）

DevCamp2006wで作ったものたち

スキンプログラムには、日本（現地５名＋リモート１名）、サンフランシスコ、ニュージーランドといったかなりグローバルなメンバーが参加しました（ただし海外組とはほとんどコンタクトをとることができませんでした）。期間が短く、完成させるまでには至りませんでしたが、少し作品をご紹介します。

日本チーム（嘉平さん、堀田さん、宮本さん、はすいさん）

pixi：mixiクローンです

日本チーム（露木さん、nyusuke）

pedora：fedoraクローンです

サンフランシスコチーム

reflecteroo：丸角が印象的なクールなスキンです。２段組にしてます

subsonic：コンパクトでさわやかな色をしたスキン

ダウンロード

以下からDevCamp2006wで作成したスキンをダウンロードできます。

Let's Customize!

• download pixi
  
• download pedora

* 以上のものはDevCamp2006wの期間終了時点までに作成した分です。今後のアップデートなどはこちらを参照してください。