足場を組む

要素を特定する

オリジナルのデザインを見たときに最初に考えるのは、どの要素がPloneのどの構造に相当するのだろうか、ということです。

今回のケースではほとんどの要素が適切の場所にありますが、パーソナルバーとロゴはちょっと動かした方が良さそうです。グローバルタブも余分かもしれません。

main_templateをいじりましょう

Ploneではmain_templateがすべてのテンプレートの大元になっており、すべての構造を内包している唯一のテンプレートです。これを開いてみてみると、非常に複雑なテンプレートに見えます（metalとかいうやつは何でしょう！？）。しかしこのテンプレートの秘密は、最初のbodyタグまでスクロールするとありますので（だいたい40行目のあたりです）、ここから読んでみましょう。

ここには以下のような記述がたくさん見られます：

<div metal:use-macro="here/global_searchbox/macros/quick_search">
  The quicksearch box, normally placed at the top right
</div>

細かいことは省略しますが（もちろん、趣味以上にPloneのことを素人思うならばZPTについて勉強しましょう。ZPTのチュートリアルはここにあります）、このテンプレートの記述はPloneにglobal_searchboxファイルをゲットして、quick_searchマクロを持ってきて、これをページに適用することを意味しています。

この部分の中身や属性を変えるのでなければ、ページのどこへでも移動させることができます。

ほとんどの参考文献では、メンテナンスの観点からmain_templateを編集しないことを勧めています。これはクロスブラウザのポジショニングの問題を別にしても、一般的には非常によいアドバイスです。これに反する行為は積極的にすべきではないですが、それじゃあ私はここでこう宣言しましょう：

私の名前はアレキサンダーリミで、私は自分のテーマでmain_templateをいじることにします！何か文句あるかあああ！！！

これでもうこわくありませんよね。

main_templateの要素の順番を変えるなどしてカスタマイズするとき注意すべきなのは、アップグレードです。どのPloneのリリースにおいても、main_templateへの変更はきちんとリリースノートに書かれますが、いつもdiffプログラム（MacならFileMerge、WindowsならWinMergeなど）を利用して、オリジナルのmain_templateと新しいmain_templateの違いを把握し、その変更をアップグレードの際に適用すべきです。

今回のケースでは次のような変更をすることにします：

• グローバルタブを削除（ナビゲーションツリーがあれば、もう一つナビゲーションを持つこともないでしょう）
• ロゴを一番上へ（main_templateをいじらなくてもできますが、簡単にできるので。）

これはコメントを挿入することで行います。たとえばこんなふうに：

<tal:tutorial tal:replace="nothing"> Tutorial: Removing the global nav
  <div metal:use-macro="here/global_sections/macros/portal_tabs">
   The global sections tabs. (Welcome, News etc)
  </div>
</tal:tutorial>

もしどこで何をしているかおかしく思ったときは、DIYPloneStyleのmain_template.ptファイルを覗いてみてください。すべての変更は「tal:tutorial」でマークアップされています。

基本カラーを抽出する

次のステップは、モックアップからカラー値を抜き取ることです。これらはbase_propertiesで利用しますが、このチュートリアルではbase_propertiesは使わないことにします。これらはPloneのデフォルトCSSのいくつを残しておきたいときに意味があります。今回のテーマで必要なカラーは以下の通りです：

border: #c9c4c0
navigation elements: #d3cebc
red highlight color: #ec001a

link color: #463229
text color: #7e7c7c

どのスタイルシートがオフになるのか？

今回の例では（そしてDIYPloneStyleのデフォルトでは）、PloneをPloneたらしめているパブリックスタイルシートがオフになります。

具体的には以下のスタイルシートがオフになります。

• base.css（pやaなどの基本的なタグのスタイル）
• public.css（パブリックサイトの見た目にしている「綿毛」）
• portlets.css（ポートレットのマークアップを含んでいる）
• generated.css（コンテントタイプのアイコンを生成するもの…私は普段はログインユーザにのみ有効にしています：member.cssと同じように）

私は時にはbase.cssをそのままキープし、ヘッドラインなど、あまり使いたくないようなモノだけ上書きするようなやり方をします。このときフォントはbase_propertiesで調節します。しかしここではゼロから始めることにしましょう。こうすればこの先ずっと使えるようになります。

グラフィカルな要素をExportする

それではモックアップからグラフィカルな要素をExportしましょう。Photoshopのモックアップが手元にあるなら、レイヤー機能を使うとよいでしょう。背景や、ロゴ、その他の必要なグラフィックを抽出して、プロダクトディレクトリの中にあるmytheme_imagesディレクトリに保存してください。

ここまでくれば、あとはいよいよお楽しみのCSSです。CSSを加えて、Ploneをモックアップみたいな外見にしちゃいましょう。