作業の内容を記録したムービー(AVI形式，69MBytes，QuickTime形式,74MBytes)がありますので，参考にして下さい。

Ploneインスタンスの作成

ZMIにアクセスし，右上のメニューから「Plone Site」を選んでPloneインスタンスを作成します。Ploneインスタンスを作成したら，Webブラウザでタブを2つ開いて，ZMIとPloneを表示しておきましょう。

CSSカスタマイズの準備

見栄えのカスタマイズは，CSSを使って行います。PloneのCSSの要素を上書きすることで，見栄えをカスタマイズします。

PloneのCSSをカスタマイズするために，ZMI上で「portal_skins」->「plone_styles」->「ploneCustom.css」をクリック，「Customize」ボタンをクリックして編集できるようにします。「portal_skins」->「custom」フォルダに，ploneCustom.cssというオブジェクトができます。ここにCSSを書き込んで行きます。

"ploneCustom.css"はDTML Methodです。PloneのBase Propertyに設定された値を引くためにdtml-withが記述されています。この部分は削除したり書き換えたりしないようにしてください。それ以外の部分は，編集しやすいように削除してしまってかまいません。

Ploneを固定幅に

Ploneを固定幅にするために，ploneCustom.cssに以下のCSSを記述します。

 body {
 width: 720px !important;
 margin: 0 auto 0 auto;
 padding: 0;
 min-width: 720px;
 }

Ploneのタブをリロードしてみてください。表示が固定幅になっているはずです。

トップ部分のカスタマイズ

トップをコンパクトにして，バックグラウンドに画像を入れてみましょう。ploneCustom.cssに以下のCSSを追加します。

 #portal-top {
 margin: 0;
 padding: 0;
 height: 105px;
 background: #fff url(top_plate.jpg) no-repeat;
 }

その後，custom以下にCSSで指定した画像を設置します。

Ploneのタブをリロードしてみてください。トップ部分がコンパクトになって，背景画像が挿入されているはずです。

Ploneデフォルトのロゴが邪魔になってきましたので，ロゴ部分をテキスト表示に変更してみましょう。

 #portal-logo {
 background: none;
 }
 
 #portal-logo a {
 width: auto !important;
 height: auto !important;
 padding: 0 !important;
 font: 280% Arial;
 color: #fff !important;
 border-style: none !important;
 }

Ploneインスタンスのタイトルが大きめのフォントで表示されるはずです。フォントはWeb 2.0を意識してArialにしてみました。

グローバルナビゲーションをカスタマイズ

トップの背景に画像置いたせいで，Plone標準のグローパルナビゲーションに違和感が出てきました。CSSをカスタマイズして枠などを消してみましょう。

 #portal-globalnav {
 background-color: transparent;
 padding: 0 0 0 2em;
 white-space: nowrap;
 list-style: none;
 margin: 0;
 height: auto;
 line-height: normal;
 }
 
 #portal-globalnav li a {
 border-style: none;
 color: #fff;
 }
 
 #portal-globalnav li.selected a {
 /* The selected tab. There's only one of this */
 background-color: transparent;
 border-style: none;
 color: #000;
 }

同じようにサイトアクションも文字だけにしてみます。

 #portal-siteactions li a {
 border: none !important;
 color: #fff;
 }

COREBlog2のインストール

Ploneの見栄えはだいたいカスタマイズし終わりました。次にQuick Installerを使ってCOREBlog2をPloneにインストールしましょう。

右上のサイトアクション部分にある「サイト設定」をクリックします。その後，「プロダクトを追加・削除」をクリックします。「COREBlog2」にチェックを入れ，「インストール」ボタンを押します。これでPlone上でCOREBlog2を利用できるようになりました。

メンバー追加時にCOREBlog2を自動作成する

Ploneに新たなメンバーを追加した際，COREBlog2を自動的に追加する設定を行います。

ZMIに戻ります。Ploneインスタンス直下にある「portal_membership」というオブジェクトをクリックします。「Set member area type」セクションにあるメニューで「COREBlog2」を選び，「Change」ボタンを押します。これで，メンバーを新規追加した際にメンバー専用のCOREBlog2インスタンスを自動作成するようになります。

新しいメンバーを追加して，実際にCOREBlog2が作られるかどうか試してみましょう。Webブラウザを終了するなどして，一端Ploneからログアウトします。その後，「ログイン」ポートレットから新規ユーザとして登録します。登録後，ログインし，「マイフォルダ」に移動すると，そこがCOREBlog2になっています。

Ploneは標準では3ペインですが，COREBlog2は標準で2ペインとなっています。ZMI上からPropertyを編集するなどして，右スロット(right_slot)にあるポートレットを左に移すなどするとよいでしょう。

タイトル部分のカスタマイズ

Blogにはタイトルをつけることが多いと思います。Plone標準の状態では，どこにいてもPlone自体のタイトルが表示され，ちょっと面白くありません。COREBlog2以下にいるときだけ，Blogのタイトルを表示するようにしてみましょう。

タイトル部分をカスタマイズするには，テンプレートを書き換えます。Ploneのタイトル(ロゴ)はZMI上の「portal_skins」->「plone_templates」->「global_logo」に定義されています。これを「customize」して，テンプレートの表示内容を変更します。h1タグの中身を以下のように書き換えて下さい。

 <h1 id="portal-logo" metal:define-macro="portal_logo"
     tal:define="title_obj here/blog_object | portal_properties;
                 display_title title_obj/title;" >
  <a href="/"
     tal:attributes="href portal_url"
     tal:define="portal_title portal_properties/title;"
     tal:content="display_title"
     accesskey="1">
      Plone
  </a>
 </h1>

これで，COREBlog2の下にいるときだけ，Blogのタイトルを表示するようになります。確認のため，COREBlog2の設定でBlogのタイトルを書き換えて，変更が反映されるかどうか試してみましょう。

エントリを書く

カスタマイズ，設定が終わったので，エントリを書いてみましょう。

COREBlog2では，エントリを書くためにはカテゴリが必要ですので，最初にカテゴリを作っておきます。その後，エントリを追加します。

追加したエントリは，Ploneの「最近の更新」ポートレットに表示されます。ポートレットを見ていれば，最近書かれたエントリを確認できるようになっています。

以上でPloneとCOREBlog2を組み合わせたBlogポータルの完成です。みなさんもぜひご自身で試してみて下さい。