Ploneの画面は、全体的に白を基調とした上品なデザインでまとまっている。これはこれで非常に綺麗だが、サイトのコンテンツ内容やユーザの好みに応じて、デザインをカスタマイズしたい場合もあるだろう。今回は、Ploneの「見た目」を構成する仕組みを見ながら、デザインの簡単なカスタマイズをやってみよう。

カスタマイズ作業では、Ploneというよりも、土台となるZopeの持つ管理インタフェース「Zope管理インタフェース(ZMI:Zope Management Interface)」を利用することも多い。そこで、まずはZMIを使いやすくするために、ゾープ・ジャパンが配布している「Zope日本語版 PR2」をインストールし、ZMIを日本語化しておこう。インストールは非常に簡単で、「zopej10n-pr2.tgz」をダウンロード、解凍し、含まれる「ZMILocalizer」「COREBlog」「ejSplitter」「ZJMailHost」の各ディレクトリを、PloneのProductsディレクトリ下にコピーしてからPloneを再起動すればよい。Productsディレクトリは、Windows版では"Program Files\Prone 2\Data\Products"、Mac OS X版では"Sites/Default/Products"だ。

Ploneが再起動したら、管理者アカウントでログインした後、パーソナルツールの「ploneの設定」からZMIを開いてみよう。

ZMIの画面からは、Ploneを構成する様々なオブジェクトを、階層的に管理できる。

では、まず画面の上部左側に常に表示されている「ロゴ」を変更してみることにしよう。ZMIに表示された一覧から"portal_skins"、"plone_images"の順に階層を降りていくと、Zopeが管理している画像ファイルの一覧が表示される。

この中の「logo.jpg(Plone)」が、Ploneのロゴだ。

画像の横に表示された「Customize」ボタンをクリックしてみよう。このロゴファイルのカスタマイズ画面が表示される。

一番下にある「ファイルをアップロード」から、ロゴとして表示したい、ローカルディスク内の画像を指定してアップロードしよう。アップロードされたファイルは、プレビューとして即座に反映する。

Ploneのトップページに戻ると、ロゴがアップロードした画像に変わっているはずだ。

しかし、元のPloneロゴは消えてしまったわけではない。アップロードした新しいロゴ画像は、"portal_skins/custom/"の下に保存される。つまり、表示にあたっては"custom"下のオブジェクトが優先的に使われるようになっているわけだ。

ロゴ以外のカスタマイズも同じように行えばよい。例えば、Webページの配色や文字のサイズ、レイアウトの定義に使われるCSSも、Ploneのデフォルトを元にカスタマイズを行える。"portal_skins/plone_styles/plone.css"を開き、「Customize」をクリックしてみよう。これで、plone.cssがcustom下に複製され、編集画面が表示される。ここから、カスタマイズしたい部分の各プロパティを変更していけば、容易にデザインを変更できるだろう。

さて、具体的にplone.cssを編集しようとすると、通常のCSSには無い記述にとまどうかもしれない。例えば、「パーソナルツール」に関するデザインは、以下のような記述になっている。

背景色"background-color"には、"#FFFFFF"のような16進数の色指定ではなく、「&dtml-globalBackgroundColor;;」と指定されている。「&dtml-」とあるように、これはZope特有のマークアップ言語「DTML」を使ったもので、"&dtml-globalBackgroundColor"は、"base_properties"に記述されたパラメータを参照するようになっている。つまり、Ploneポータル全体を通してデザインの統一性を崩さずに色調を変えたいのであれば、base_propertiesを「Customize」して編集すればよいのだ。

試しに、"base_properties"のglobalBackgroundColorパラメータを、デフォルト値の「#dee7ec」から「#ffc0cb」に変えてみよう。青基調の爽やかなPloneのポータルが、華やかなピンクに変化する。

Ploneでは、理路整然と整理された構造が全体を通して保たれている。そのおかげで、我々ユーザは最小限の労力で大きなカスタマイズ効果を得られるのだ。