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

テンプレート解説 No.1 デザインはテンプレートで指定する

最終更新日: 2013-10-10

CMS「すぐ使えるCGI」ではデザインを「テンプレート」で管理します。
「すぐ使えるCGI」のテンプレートの編集に独自タグの知識やプログラミングの知識は一切不要です。HTMLタグをご存知であれば自由にデザインカスタマイズできます。

このページでは、テンプレートの基本的な仕組みをご説明します。

このページの目次

  1. 「テンプレート」とは
  2. 「テンプレート変数」とは
  3. テンプレートHTMLファイルとブラウザでの表示の関係
  4. テンプレートと書き出されるファイルの関係
  5. 未編集テンプレートと編集済みテンプレートの比較
  6. 生成された記事ページとテンプレートの比較

「テンプレート」とは

「テンプレート」とは、プログラムとは分けてデザインを指定するためのファイルです。形式としては以下のようなものがあります。

  • HTMLファイル
  • HTMLコードを記載したテキストファイル

「テンプレート」のファイル名やどちらの形式のファイルがいくつあるかなどは、製品によって決まっています。
製品の templates/ ディレクトリ配下にあるファイルが、その製品で使用できるテンプレートファイルです。

ここでは例として「ウェブページ更新ツール Ver.3.1」を取り上げ、テンプレートの基本的な構造を解説します。

「テンプレート変数」とは

「ウェブページ更新ツール」の記事ページ用テンプレート templates/article/article.html の内容は下図の通りです。

テンプレート中に「%_subject_%」や「%_body_%」という記載があります。「すぐ使えるCGI」ではこの部分を「テンプレート変数」と呼んでいます。
「テンプレート変数」は後で管理画面から登録された値を表示する位置を示しています。

「テンプレート変数」部分 記事ごとに登録した内容が挿入されます。
「テンプレート変数」部分以外 テンプレートファイル通りに記事ファイルが書き出されます。
テンプレートファイルの中身 (青枠は解説のためのマーク)

テンプレートHTMLファイルとブラウザでの表示の関係

テンプレートファイルはブラウザでHTMLページとして表示することができます。
以下の2つの図は、同じテンプレートファイルをブラウザで見た時と、HTMLコードを見た時の対応を示したものです。

テンプレートをブラウザで見た所

テンプレートのHTMLコードを見た所

テンプレートと書き出されるファイルの関係

次に、テンプレートファイルと実際の登録情報が入った記事ページとの対応関係を説明します。
管理画面から記事を登録すると、ファイル内の「テンプレート変数」の部分のみが入力された情報で置き換わり、その他の部分はそのままHTMLページになります。
下図はテンプレートファイルとそれを元に生成された記事ページの比較です。

テンプレートをブラウザで見た所(上と同じ)

生成された記事ページ

未編集テンプレートと編集済みテンプレートの比較

製品に添付されているテンプレートはごくシンプルなものですので、サイトのデザインに合わせて変更して使用します。

下図は未編集テンプレートと、実際の運用のために編集したテンプレートファイルの比較です。
デザインが違いますが、テンプレート変数は同じです。

未編集テンプレート(上と同じ)

デザイン変更済テンプレート

生成された記事ページとテンプレートの比較

登録された記事の情報が入ったページの表示は下図の通りになります。

編集済テンプレート(上と同じ)

生成された記事ページ

関連リンク

さらに詳しく