応用編：PCのデザインテンプレートについて
デザインテンプレートは、FF-CMSで作成したエントリーの表示方法を記述します。
デザインテンプレートの書式は、HTMLとデザインテンプレートタグから成ります。
また、デザインテンプレートタグには大きく分けて以下の種類があります。
  • コンテナタグ
  • 機能タグ
  • 式言語
ここでは、FF-CMSにデフォルトで組み込まれているデザインテンプレートを例に説明します。

【画面一覧について】

はじめに、デフォルトで組み込まれているデザインテンプレートで表示する画面一覧は以下の通りです。
 画面種別
  説明
 トップページ  サイトのトップページになります。
カテゴリ別一覧ページ カテゴリ別のエントリ一覧ページになります。
月別一覧ページ 月別のエントリ一覧ページになります。
エントリーページ エントリ内容を表示するページになります。

また、上記ページはすべて、以下のパーツで構成されます。
パーツ種別
 説明
レイアウト　　  「ヘッダー」、「左サイドバー」、「メインエリア」、「フッター」を
どのように配置するかを定義します
ヘッダー ページ上部のエリアになります
左サイドバー ページ左部のエリアになります
メインエリア ページ右部のエリアになります
フッター ページ下部のエリアになります



 

 

【画面毎のデザインテンプレートの構成について】

各画面は、上記のパーツで構成されており、パーツ毎にデザインテンプレートを定義しています。
以下に各画面毎のデザインテンプレートの構成を説明します。

■トップページ

パーツ種別
 デザインテンプレート名
レイアウト layout
ヘッダー header
左サイドバー sub
メインエリア top
フッター footer

■カテゴリ別一覧ページ

パーツ種別
 デザインテンプレート名
レイアウト layout
ヘッダー header
左サイドバー sub
メインエリア categories
フッター footer

■月別一覧ページ

パーツ種別
 デザインテンプレート名
レイアウト layout
ヘッダー header
左サイドバー sub
メインエリア monthly
フッター footer

■エントリーページ

パーツ種別
 デザインテンプレート名
レイアウト layout
ヘッダー header
左サイドバー sub
メインエリア entry
フッター footer

デフォルトのデザインテンプレートでは、メインエリア以外のパーツについては、共通のパーツとして再利用をしています。

【各デザインテンプレートについて】

デザインテンプレートは、HTMLとデザインテンプレートタグから成ります。
ここでは、各デザインテンプレートについて説明します。

■header

デフォルトで組み込まれているheaderの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<img src="/default/images/top-main.jpg" width="877" height="292">
------------------------------------------------------------------------------------------------------------
ヘッダーエリアの画像のみを定義しています。


■footer

デフォルトで組み込まれているfooterの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<img src="/default/images/footer.jpg" width="870" height="42">
------------------------------------------------------------------------------------------------------------
フッターエリアの画像のみを定義しています。


■sub

デフォルトで組み込まれているsubの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<div id="menuHeader">
    <img src="/default/images/contents-header.jpg" alt="contents" width="190" height="28">
</div>
<a href="<* IndexLink name="top" *>" class="contents">HOME</a>
<p class='line'>&nbsp;</p>
<* Categories *>・・・・・・・①
  <a href="<* Link name="categories" category_code="{ category.code }" *>" class="contents">・・・・・・②
    <* CategoryName *>(<* CategoryEntryCount *>)・・・・・・③
  </a>
<* End *>
<p class='line'>&nbsp;</p>
<* Months *>・・・・・・④
  <a href="<* ArchiveLink name="monthly" year="{ month.year }" month="{ month.month }" *>" class="contents">・・・・・・⑤
    <* Month *>(<* MonthEntryCount *>)・・・・・・⑥
  </a>
<* End *>
------------------------------------------------------------------------------------------------------------
①<* Categories *>～<* End *>
カテゴリーループを作り出します。

②<* Link name="categories" category_code="{ category.code }" *>
カテゴリコードを基にカテゴリ別エントリー一覧へのリンクを出力します。

③<* CategoryName *>(<* CategoryEntryCount *>)
・<* CategoryName *>
    カテゴリ名を出力します。
・<* CategoryEntryCount *>
    カテゴリ内のエントリ件数を出力します。

④<* Months *>～<* End *>
月のループを作成します。通常は、エントリーが１つもない月は対象になりません。

⑤<* ArchiveLink name="monthly" year="{ month.year }" month="{ month.month }" *>
年と月を基に月別別エントリー一覧へのリンクを出力します。

⑥<* Month *>(<* MonthEntryCount *>)
・<* Month *>
    月を出力します。
・<* MonthEntryCount *>
    月内のエントリ件数を出力します。


■top

デフォルトで組み込まれているtopの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ section.name + ' トップページ' }" *>・・・・・・・①
<* Layout name="layout" *>・・・・・・・②
<div class="column-center">
  <div id="allView">
    <h2>最新の記事</h2>
    <div class="h2Bottom"> </div>
    <* Entries size="10" *>・・・・・・・③
      <h3>
        <a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>・・・・・・・④
      </h3>
      <p><* EntryBody *></p>・・・・・・・⑤
      <br />
    <* End *>
  </div>
</div>
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ section.name + ' トップページ' }" *>
変数「title」に「セクション名+"トップページ"」をセットしています。

②<* Layout name="layout" *>
topのページレイアウトを指定します。

③<* Entries size="10" *>～<* End *>
エントリーのループを作成します。
ループ件数は10で指定しています。

④<a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>
・<* EntryLink name="entry" *>
    エントリーページへのリンクを出力します。
・<* EntryTitle *>
    エントリーのタイトル名を出力します。

⑤<* EntryBody *>
エントリーの内容を出力します。


■categories

デフォルトで組み込まれているcategoriesの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ category.name + 'のアーカイブ' }" *>・・・・・・・①
<* Layout name="layout" *>・・・・・・・②
<div class="column-center">
  <div id="allView">
    <h2><* CategoryName *>のアーカイブ</h2>・・・・・・・③
    <div class="h2Bottom"> </div>
    <* Entries category_name="{ category.name }" *>・・・・・・・④
      <h3>
        <a href="<* EntryLink name="entry" *>" ><*   EntryTitle *></a>・・・・・・・⑤
      </h3>
      <p><* EntryBody *></p>・・・・・・・⑥
      <br />
    <* End *>
  </div>
</div>
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ category.name + ' トップページ' }" *>
変数「title」に「カテゴリ名+"トップページ"」をセットしています。

②<* Layout name="layout" *>
categoriesのページレイアウトを指定します。

③<* CategoryName *>
カテゴリ名を出力します

④<* Entries category_name="{ category.name }" *>～<* End *>
カテゴリ名に紐づくエントリーのループを作成します。

⑤<a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>
・<* EntryLink name="entry" *>
    エントリーページへのリンクを出力します。
・<* EntryTitle *>
    エントリーのタイトル名を出力します。

⑥<* EntryBody *>
エントリーの内容を出力します。


■monthly

デフォルトで組み込まれているmonthlyの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ year.to_s() + '年' + month.to_s() + '月の月間アーカイブ' }" *>・・・・・・・①
<* Layout name="layout" *>・・・・・・・②
<div class="column-center">
  <div id="allView">
    <h2><* Echo value="{ year }" *>年<* Echo value="{ month }" *>月の月間アーカイブ</h2>・・・・・・・③
    <div class="h2Bottom"> </div>
    <* Entries year="{ year }" month="{ month }" *>・・・・・・・④
      <h3>
        <a href="<* EntryLink name="entry" *>" ><*   EntryTitle *></a>・・・・・・・⑤
      </h3>
      <p><* EntryBody *></p>・・・・・・・⑥
      <br />
    <* End *>
  </div>
</div>
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ year.to_s() + '年' + month.to_s() + '月の月間アーカイブ' }" *>
変数「title」に「XX年+XX月+"月の月間アーカイブ"」をセットしています。

②<* Layout name="layout" *>
monthlyのページレイアウトを指定します。

③<* Echo value="{ year }" *>年<* Echo value="{ month }" *>
・<* Echo value="{ year }" *>
    年を出力します。
・<* Echo value="{ month }" *>
    月を出力します。

④<* Entries year="{ year }" month="{ month }" *>～<* End *>
指定した年月に紐づくエントリーのループを作成します。

⑤<a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>
・<* EntryLink name="entry" *>
    エントリーページへのリンクを出力します。
・<* EntryTitle *>
    エントリーのタイトル名を出力します。

⑥<* EntryBody *>
エントリーの内容を出力します。


■entry

デフォルトで組み込まれているentryの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ entry.title }" *>・・・・・・・①
<* Layout name="layout" *>・・・・・・・②
<div id="detail">
  <div class="column-center"></div>
  <h2>記事</h2>
  <div class="h2Bottom"> </div>
  <h3><* EntryDate format="%Y年%m月%d日" *>&nbsp;<* Echo value="{ entry.title }" *></h3>・・・・・・・③
  <div class="h3Bottom">&nbsp;</div>
  <p><* EntryBody *></p>・・・・・・・④
  <p>&nbsp;</p>
  <br />
</div>
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ entry.title }" *>
変数「title」にエントリーのタイトルをセットしています。

②<* Layout name="layout" *>
entryのページレイアウトを指定します。

③<* EntryDate format="%Y年%m月%d日" *>&nbsp;<* Echo value="{ entry.title }" *>
・<* EntryDate format="%Y年%m月%d日" *>
    エントリーの表示用日付を出力します。
・<* Echo value="{ entry.title }" *>
    エントリーのタイトルを出力します。

④<* EntryBody *>
エントリーの内容を出力します。


■layout

デフォルトで組み込まれているlayoutの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript " />
  <meta http-equiv="Content-Style-Type" content="text/css " />
  <title><* Echo value="{ title }" *></title>
  <link href="/default/css/common.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="8" marginheight="8">
  <div id="container">
    <div id="header">
      <* Include name="header" *>・・・・・・・・・・・・・・・・・・・・①
    </div>
    <table border="0" cellpadding="0" cellspacing="0" id="main">
      <tr>
        <td rowspan="2" id="menu">
            <* Include name="sub" *>・・・・・・・・・・・・・・・・・・・②
        </td>
        <td id="contents">
          <* Yield *>・・・・・・・・・・・・・・・・・・・・・・・・・・③
        </td>
      </tr>
      <tr>
        <td rowspan="2" valign="bottom" id="contentsBanner">
            <a href="#">
                <img src="/default/images/banner.jpg" alt="CLASS MEDIATE" width="640" height="108" border="0">
            </a>
        </td>
      </tr>
      <tr>
        <td id="menuBottom"><img src="/default/images/contents-bottom.jpg" width="190" height="15"></td>
      </tr>
    </table>
    <div id="footer">
      <* Include name="footer" *>・・・・・・・・・・・・・・・・・・・・④
    </div>
  </div>
</body>
</html>
------------------------------------------------------------------------------------------------------------
①<* Include name="header" *>
デザインテンプレート(header)の内容を出力します。

②<* Include name="sub" *>
デザインテンプレート(sub)の内容を出力します。

③<* Yield *>
呼び出し元のデザインテンプレートの内容を出力します。
例えば、デザインテンプレート(top)から
<* Layout name="layout" *>
のように呼び出されている場合は、topの内容を出力します。

④<* Include name="footer" *>
デザインテンプレート(footer)の内容を出力します。