Personal tools
You are here: Home → Plone Visual → Plone 2.1 CSS → トップページの構成（テンプレート）
 

トップページの構成（テンプレート）

全体的な構成を見てみる。

Ploneのトップページを構成するテンプレートを見てみる。

何と言ってもまず最初に見るのはindex_htmlである。とはいえindex_htmlは非常に短い。

実際にportal_skins/plone_templates/index_htmlを見てみればわかるけどbodyの中身は

<div metal:fill-slot="main">

    <h1 i18n:translate="heading_welcome_to">Welcome to
        <span i18n:name="sitename" tal:omit-tag="" tal:content="here/Title">Portal title</span>
    </h1>

    <p tal:content="utool/description">
        Portal description
    </p>

</div>

メインテンプレートを展開するだけ（￣（●●）￣）

それじゃぁ、まぁとにかくメインテンプレート（portal_skins/plone_templates/main_template）
を見てみようと思ったらクソ長いしorz…

と文句もいってられないので、一番外側の部分を見てみることにしよう。

メインテンプレートのbody部は大きく3つの部分に分けることができる。

  • portal-top：ポータルのトップ部分
  • portal-columns：左右のメニューと中央のコンテンツ
  • portal-footer及びportal-colophon（ブロックとしては2つだけど1つと見なしてもいいよね？）

この3つのブロックをportal-visual-wrapperで包んでいるという構造になっている（下図参照）。

portal-index-structure

colophonというのはあまり耳にしない単語だけど、「奥付、出版社のマーク」という意味らしく、Ploneの場合は下部に見えるplone poweredなどの画像群がそれにあたる。まぁ、footerだと思っていいかと。むしろいずれ切り捨ててしまっていいかと。

ともかくこういった構造になっているけれども、ここまではどのサイトにも見られる非常にスタンダードな構造になっている。ここまでは、というか、Ploneの基本的な構造は（portalサイトというだけあって）非常にわかりやすいものになっており、誰もが使いやすいユーザビリティに優れたツールになってるのがわかる。

コードとして注意しておく点としては、portal-columnsがテーブルレイアウトになっていることだろうか。3段組をどう実現するかはいろいろだけど、とりあえず間違いのない段組をしようと思ったらやっぱりテーブルになっちゃうのかな。旧世代ブラウザとかIEとか滅んでしまえばいいのに。

まとめ
1つのページは「portal-top」、「portal-columns」、「portal-footer/portal-colophon」3つのパーツがまとまった形で構成されている
portal-columnsはテーブルレイアウトになっている

Document Actions