Ploneの初期画面です。

Ploneはbodyタグ以下のコンテンツ全体を「visual-portal-wrapper」で包んでいます。そこでこの visual-portal-wrapper の幅を設定してやって、固定幅で表示させてみます。

＊IEバグ回避のために、bodyタグに「text-align: center」、visual-portal-wrapperに「text-align: left」を設定しています。またwrapperがよくわるようにボーダーを表示し、トップマージンに20pxを確保します

Plone.cssは以下のような変更になります。

body {
 font: &dtml-fontBaseSize; ;
 background-color: &dtml-backgroundColor;;
 color: &dtml-fontColor;;
 margin: 0;
 padding: 0;
 text-align: center;　←追加
}

#visual-portal-wrapper {
 margin: 0 auto;
 margin-top: 20px;　←追加
 padding: 0;
 width: 700px;　←追加
 border: 1px solid black;　←追加
 text-align: left;　←追加
}

これを表示すると



とまぁ、ここまではいいですが、
bodyの背景をちょっと変えてみましょう。
bodyの背景色はbackgroundColorというプロパティで指定されているので、base propertyをいじってやります。試しに黒にしてみます。


wrapperの部分は白のままにしておきたいので、Plone.cssは以下のような変更になります。

#visual-portal-wrapper {
 margin: 0 auto;
 margin-top: 20px;
 padding: 0;
 width: 700px;
 border: 1px solid black;
 text-align: left;
 background: white;　←追加
}

と、背景色の指定を追加します。
これを表示すると



検索ボタンとコンテンツ部まで黒になります。

なんでやねん。
まぁ、こいつらが背景にbackgroundColorを指定しているからなんだけど…

検索ボタンは↓こいつ。

input.searchButton {
 font-size: 100%;
 margin-bottom: &dtml-borderWidth; ! important;
 background: &dtml-backgroundColor; url(&dtml-portal_url;/search_icon.gif) 2px 1px no-repeat;
 cursor: pointer;
 padding: 1px 1px 1px 15px;
 text-transform: &dtml-textTransform;;
}

コンテンツ部は↓こいつ。

.documentContent {
 font-size: 110%;
 padding: 0em 1em 2em 1em !important;
 background: &dtml-backgroundColor;;
}

まったく何でこんなふうになってるんだヾ(*`Д´)ノ

Ploneをいじるにあたって、誰もが先ず一番はじめにやろうとするのはロゴを変えることでしょう。これをカスタマイズしませう。

＊ここではPloneのIDは TestPlone としています

デフォルトで表示されるロゴは TestPlone/portal_skins/plone_images/logo.jpg です。




これを変えるには上図の「Customize」ボタンを押します。

「Customize」ボタンを押すと TestPlone/portal_skins/custom/logo.jpg に移動したと思います。Ploneは、画像にかかわらず何でもかんでもデフォルトの材料を直接編集するのではなく、材料を一度customフォルダにコピーしてからそのコピーしたものをいじる仕組みをとっています。なので「Customize」ボタンを押すと、このcustomフォルダにくるわけですな。

customフォルダに持ってきたものの、まだ差し替える画像を用意しておりませぬ。ので、とりあえず作ってみました。

Poloneですヾ( ´( ェ )｀)ノ



サァ、これをアップロードします。
「参照」ボタンを押して画像を指定し、「Upload」ボタンを押し、最後に「Save Changes」ボタンを押します。



名前は「logo.jpg」だけど、Content Typeは「image/gif」。変な感じだけど、まぁ、ヨシ…

Ploneのロゴはカスタマイズできましたが、このロゴはどのように表示されているのでしょうか。まずはcssを見てみます。

Plone.cssより抜粋

#portal-logo {
 background: url(&dtml-portal_url;/&dtml-logoName;) no-repeat;
 border: 0;
 margin: 0.75em 0em 0.75em 1.5em;
 padding: 0;
}

#portal-logo a {
 display: block;
 text-decoration: none;
 overflow: hidden;
 border: 0;
 margin: 0;
 padding: 0;
 padding-top:  <dtml-var "_[logoName].height">px;
 height: 0px !important;
 height /**/:  <dtml-var "_[logoName].height">px;
 width: px;
 cursor: pointer;
}

まずわかるのは、このロゴが背景画像として表示されていることです。#portal-logo {}内の、背景を指定している「url(&dtml-portal_url;/&dtml-logoName;)」の部分がそれです。

＊「&dtml-portal_url;」や「&dtml-logoName;」という表記はそれぞれ、「<dtml-var portal_url>」や「<dtml-var logoName>」と同じです

＊「logoName」は /TestPlone/portal_skins/plone_styles/base_properties で「logo.jpg」が指定されています

背景画像は普通クリックできませんが、#portal-logo a {}内で、これをブロック表示し（display: block;）、この領域のカーソルをポインタにすることによって（cursor: pointer;）、あたかもこのロゴをクリックしているかのように見せています。

このロゴが背景画像だとすると、その背景の上に乗っている実体は何なのか？そしてその実体はどこにいってしまったのか？その答えは、#portal-logo a {}内の「overflow: hidden;」にあります。

overflowは「はみだし」を制御するもので、ここでは「hidden」を指定していますので、「はみだし部分は隠す」という意味になります。そこでこのはみだし部分を表示してみます。表示するにはこのoverflowの指定をコメントアウトしてやればOKですな。

overflow: hidden;　→　/* overflow: hidden; */

としてやりませう。
そうすると、このロゴ部分はどうなるか。

overflow: hidden;　の場合（デフォルト）
(-ω- )


/* overflow: hidden; */　の場合（コメントアウト）
（゜д゜）ｙ＼〟


姿を現したなヾ(*`Д´)ノ
本来はサイトのタイトルが表示されるはずですが、表示する場所がはみだしていて、overflowの指定によって隠されているんですね。

つまり、#portal-logoの表示領域の高さは、

    height /**/:  <dtml-var "_[logoName].height">px;

と、指定してあるとおり、logoName（実体はロゴ画像であるlogo.jpg）の高さしか無いんだけど、

    padding-top:  <dtml-var "_[logoName].height">px;

と、パディングトップをこれまたlogoNameの高さのぶんだけ取っているので、表示領域からはみだしてしまう。これをoverflowの指定によって隠しているので見えなくなっている、という仕掛けになってるのですな。

まぁ、ありがちな仕掛けです。ユーザビリティ（音声リーダ、テキストブラウザなどへの対応）を考慮して、ということですな。ここではoverflowを利用していますが、他にも例えば、

    text-indent: -10000px;

こんなふうに横にすっとばしてやる手もあります。

Ploneのロゴがcssでどのように実現されていたかは既に見ましたが、文書としてはどのように記述されているのでしょうか。

ファイルは /TestPlone/portal_skins/plone_templates/global_logo です。そう、このパスの中にもあるとおり、これはテンプレートファイルなのです…

ZPT（ゾープページテンプレート）。今まで避けてきた道ですが、昨今のZopeやそれ以外のWeb業界の傾向を鑑みれば、この先避けては通れない道だと思っています。まぁ、まったりと理解してゆければと思います。

ZPTではtalやmetalなどといった用語をよく見かけます。talというのはTag Attribute Language、metalというのはMacro Expansion TALらしいです。
タグ属性言語、マクロ展開タグ属性言語。日本語に直してもよくわかりませんヾ( ´( ェ )｀)ノ

まぁとにもかくにも、実際のPloneのファイルを見てみることにします。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
 i18n:domain="plone">

<body>

<!-- THE PORTAL LOGO DEFINITION -->
<h1 id="portal-logo" metal:define-macro="portal_logo">
 <a href="/"
     tal:attributes="href portal_url"
     tal:define="portal_title portal_properties/title;"
     tal:content="string:$portal_title">
         Plone
 </a>
</h1>

</body>
</html>

見出し１タグにmetalが、リンクタグにtalが使われてますね。なるほど確かにタグのattributeとして記述されています。

metalの方は「マクロ」と名前が付くくらいですから、マクロなんでしょう。そしてここでは「metal:define-macro="portal_logo"」と書いてあるくらいですから、おそらくはマクロ定義をしているわけですな。見出し１タグで囲われた部分がportal_logoとして定義されていますから、これを使うときには見出し１タグで「マクロ展開しま～す」と宣言してやればよい、と。まぁ、そんなところでしょう。


ちょっと探してみたら見つかりました（ /TestPlone/portal_skins/plone_templates/main_template）。これですな。

<a metal:use-macro="here/global_logo/macros/portal_logo">
 The portal logo, linked to the portal root
</a>

なんか見出し１タグじゃなくてリンクタグで書いてあるけど…。まぁ、タグは何でもよい、と。レンダリングされたものを見てみると見出し１になってるので、おそらく置き換わるのでしょう(-ω- )

• meta:define-macro="hoge"でマクロ定義
• metal:use-macro="hoge"でマクロ展開

ということだけ覚えておこう。

一方talの方はどんなものか。ロゴではリンクタグの中で３種類出現している。attributes、define、content。

まぁ名前からなんとなく予想できるけど、attributesは「href portal_url」なんていう指定があるからおそらくリンク先の指定をしているのでしょう。defineは変数を定義してるだけかな。それからcontentは「string:$portal_title」なんて書いてあるから、中身をサイトのタイトルとする指定。

うーむ。何となく意味はわかったけど、書式をしっかりおさえないとダメだなぁ。

COREBlog1.2a1およびPlone配下のCOREBlog用のスキン「Plonified0.8」がリリースされましたので早速試してみました。ちなみにPlonifiedスキンはページテンプレートで記述されているスキンです。

いずれも問題なく作動しているようです。


一応Plonifiedの導入手順。

・Zopeインスタンスのimportフォルダにplonified08.zexpをコピー
・ZMIでPloneインスタンス以下にCOREBlogを追加し、「contents（コンテンツ）」タブをクリックして、skinフォルダに行く
・skinフォルダ内で「import/export（日本語化している場合は取り込み/書き出し）」ボタンを押す
・画面下部の「import file name（インポートファイル名）」を「plonefied08.zexp」としてimport（インポート）ボタンを押す
・COREBlogフォルダに戻って「settings（設定）」タブをクリックし、「スキン設定」からスキン設定画面に行く
・プルダウンメニューから「plonified」を選び「Change Skin」ボタンを押す
・めでたしめでたし


さらに一応Ploneの上部タブにCOREBlogを出現させる手順。

・Ploneフォルダ内の「 portal_actions (Contains custom tabs and buttons)」をクリック
・たくさーん並んでる一番下の「Add an action」という所に入力する

　　・Name…何でもよい。タブの名前になる
　　・id…他のモノとかぶらない名前なら何でもよい
　　・Action…「string:$portal_url/（COREBlogインスタンス名）」とする
　　　　例）COREBlogのidが「hoge」であれば「string:$portal_url/hoge」
　　・Condition…空欄でよい
　　・Permission…プルダウンメニューから「View」を選ぶ
　　・Category…「portal_tabs」とする
　　・Visible?…チェックを入れておく

具体例↓



さらに右メニューにブログメニュー（ブログカレンダーとかカテゴリーとか）を表示させてみよう。
COREBlogフォルダ以下に「portlets」というフォルダがあるんだけど、この中にカレンダーとかカテゴリーとかいろいろ入ってる。まっとうなやり方かどうかはわかりませんが、自分なりにやってみると以下の感じで追加できました（正統なやり方があったら教えてください）。

・COREBlogフォルダでプロパティタブをクリック
・名前を「right_slots」、タイプを「lines」、値を「here/portlets/calendar」としてとりあえず追加
・あとはportletsフォルダに入ってるお好きなモノを「here/portlets/hoge」などとして一行に一つずつ追加してやって、変更を保存

具体例↓


＃archivesポートレットの名前が「categoriess」になっているので「archives」に変えてやりましょう
＃categoriesポートレットの名前が「categoriess」になっているので「categories」に変えてやりましょう

＊何かrecentcommentsのタイトルに「ｓ」がひっついてます…


以上でこんな感じ↓になります。


実際のPloneサイトはこちら。

あれ？何かMembersフォルダが…増殖してる…

ページテンプレートを見てみたいけど時間がない。<br />
<br />
「時間がない、というのは言い訳だ、時間は作るもんだ」と昔よくいわれたけど、毎日１１時間以上働いて残業代も出ないげっそりな職場にいるうちは、時間を作る気力もありません（´ω｀）