小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

テンプレート解説 No.2 一覧の指定方法

最終更新日: 2012-08-10

CMS「すぐ使えるCGI」ではデザインを「テンプレート」で管理します。
このページでは、一覧ページのテンプレートの基本的な仕組みをご説明します。
「一覧ページ」とは、「全一覧」や「目次」「短い一覧」等と呼ばれているページです。

このページの目次

  1. 2つのファイルによるテンプレート構成
  2. 一覧の編集例
    1. <ol>を使用
    2. <table>を使用してレイアウトする
    3. <h2> + <div>を並べる

「No. 1 デザインはテンプレートで指定する」から読む

2つのファイルによるテンプレート構成

例として「ウェブページ更新ツール Ver.3.1」を取り上げ、一覧ページの基本的な構造を解説します。
下図はテンプレート変更をしていない場合に書き出される記事一覧(全一覧、目次)です。

この一覧のデザインは、2つのテンプレートファイルで構成されています。
各テンプレートファイルでの指定領域を示したのが下の図です。

templates/article/artilce_list.txt 一覧中の、記事1件分のデザインを指定。
templates/article/artilce_list.html HTMLページ全体のデザイン。<head>、<body>タグはここに入る。

リスト部分を指定するテンプレート templates/article/article_list.txt

登録した記事の部分は記事の数によって増減させなければなりませんので、これだけ別に取り出して指定しているのが templates/article/article_list.txt です。

リスト1件分(上図の赤枠)を指定しており、内容は下記のようになっています。
リストのアイテムを示す<li>〜</li> は記載されていますが、リストの開始と終了を示す<ul>〜</ul>はありません。

このテンプレートを元に、登録した記事の分だけ内容を繰り返しリスト部分が作成されます。
実際に作成されるリスト部分は以下のようになります。

ページ全体を指定するテンプレート templates/article/article_list.html

一方、ページ全体を指定するテンプレートファイルが templates/article/article_list.html です。

「%_article_list_%」は生成したリスト部分を挿入する場所のマーカーとなるテンプレート変数です。

この例では <li>を使用したリストが挿入されますので、開始と終了の <ul> と </ul> はこのテンプレート変数を挟んで配置されています。

一覧の編集例

一覧のデザインも自由に変更できます。
繰り返し部分の形式も上記の<ul>だけでなく、<ol>による構成、<div> の繰り返しや<table>による構成など、全体のHTMLコードの整合性が保てればどんな形式でも問題ありません。

構成方法をいくつか紹介します。

<ol>を使用

<ol>を使用する場合は上の<ul>の場合とほぼ同様です。

templates/article/article_list.txtの内容(<li>〜</li>で1件分)

templates/article/article_list.txt には、<ol>内の1アイテム分を記載します。

<li><B>%_yyyy_%-%_mm_%-%_dd_%</B> <a href="%_d_%.html">%_subject_%</a></li>

templates/article/article_list.htmlの内容(リスト付近)

templates/article/article_list.html には、リストの開始タグと終了タグを記載します。

 (省略)
:
<ol>
<!--- article list : generate from article_list.txt --->
%_article_list_%
</ol>
:
(省略)

<table>を使用してレイアウトする

一覧を<table>で表示する方法です。

templates/article/article_list.txtの内容

<tr>〜</tr>内に1件分の設定をします。記事1件分が複数の<tr> - </tr>に渡っても問題ありません。

<tr>
  <td>%_yyyy_%/%_mm_%/%_dd_%</td>
  <td><a href="%_d_%.html">%_subject_%</a></td>
</tr>

templates/article/article_list.htmlの内容(リスト付近)

templates/article/article_list.html には <table>の開始タグとテーブルヘッダ、終了タグを記載し、その間に templates/article/article_list.txt から生成されるリストを組み込むためのテンプレート変数「%_article_list_%」を配置します。

 (省略)
:
<table>
<tr>
<th>日付</th>
<th>タイトル</th>
</tr>
<!--- article list : generate from article_list.txt --->
%_article_list_% 
</table>
:
(省略)

<h2> + <div> を並べる

3つ目の例です。
下記のコードでは、記事ごとに<h2>と<div>で記事の抜粋(%_summary_%)を並べています。

templates/article/article_list.txtの内容(<h2>+<div>で1件分)

<h2 class="item_title">
<a href="%_d_%.html">%_subject_%</a>
</h2>
<div class="item_contents">
%_summary_%
<br>
(%_yyyy_%-%_mm_%)
<div class="right">
<a href="%_d_%.html"><img src="../image/go.gif"  alt="詳しく"></a>
</div>
</div>

templates/article/article_list.htmlの内容(リスト付近)

この構成の場合、templates/article/article_list.html には %_article_list_% の位置のみを指定します。<ol>のような「外側のタグ」は必要ありません。

 (省略)
:
<!--- article list : generate from article_list.txt --->
%_article_list_% 
:
(省略)

関連リンク

さらに詳しく