基本的な動作を確認したら、テンプレートを編集してデザイン変更を行ってみましょう。
設置がまだ済んでいない場合は「ステップ by ステップガイド」から初めて下さい。
このページでは、テンプレートファイルの変更がどのようにページのデザインに反映されるかを、少しずつテンプレートを変更する事でご説明しています。
実際の制作では (1)サンプルページ（モックアップ）を先に完成してから (2)テンプレートファイルにコピー の順で作業するのがお勧めですが、「何ができるのか」が分からないとサンプルページを作るときに迷ってしまいますので、まずはこのチュートリアルで概要をつかんで下さい。
まずは全一覧のデザイン変更を行ってみます。
解凍したファイルの中の templates/article/article_list.html をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
ページのタイトルとして「記事一覧」と書いてある部分があるので、これを試しに変更してみます。「○○株式会社 スタッフのご紹介」等、お好きなように変更して下さい。
変更前 (templates/article/article_list.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>記事一覧</title>
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<style type="text/css">
.filelink {
padding-left: 20px;
margin-right: 10px;
background: url(./icons/general.gif) no-repeat top left;
}
.doc {
background-image: url(./icons/doc.gif)
}
.pdf {
background-image: url(./icons/pdf.gif)
}
.ppt {
background-image: url(./icons/ppt.gif)
}
.txt {
background-image: url(./icons/txt.gif)
}
.xls {
background-image: url(./icons/xls.gif)
}
.zip {
background-image: url(./icons/zip.gif)
}
</style>
</head>
<body bgcolor="#ffffff">
<h1>記事一覧</h1>
<!-- article list : generate from article_list.txt -->
%_article_list_%
</body>
</html>
変更後 (templates/article/article_list.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>○○株式会社 スタッフのご紹介</title>
<link rel="alternate" type="application/rss+xml" title="○○株式会社 スタッフのご紹介" href="new.xml">
</head>
<body bgcolor="#ffffff">
<h1>○○株式会社 スタッフのご紹介</h1>
<!-- article list : generate from article_list.txt -->
%_article_list_%
</body>
</html>
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.html をアップロードして下さい。
article_list.html をアップロードしたら、管理画面一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、もう一度「編集結果をチェック： [一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
今度はタイトルが、「○○株式会社 スタッフのご紹介」と表示されますか？
このように、デザインはHTML形式で自由に変更する事ができます。
先ほどの変更では、全一覧の全体のデザインが変更されました。
今度は、記事の内容が表示される部分を変更してみます。
templates/article/article_list.txt をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
日付を表示する部分で「%_yyyy_%-%_mm_%-%_dd_%」と記載されている部分がありますので、これに色を付けてみることにします。
<span> タグなどのコードを足してみて下さい。
変更前 (templates/article/article_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
<div>
<a name="%_d_%"></a>
<h2>[%_yyyy_%-%_mm_%-%_dd_% (%_dayname_%)] %_subject_%</h2>
%_body_%
<div>
<a href="%_d_%/%_imagename_escaped_1_%" target="_blank" class="%_icon_class_1_%">
<img src="%_d_%/%_thumbnail_escaped_1_%" height="150" alt="%_imagetext_1_%"></a>
<a href="%_d_%/%_imagename_escaped_2_%" target="_blank" class="%_icon_class_2_%">
<img src="%_d_%/%_thumbnail_escaped_2_%" height="150" alt="%_imagetext_2_%"></a>
</div>
<div>
<a href="%_d_%/%_imagename_escaped_3_%" target="_blank" class="filelink %_icon_class_3_%">%_imagetext_3_%</a>
</div>
</div>
変更後 (templates/article/article_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
<div>
<a name="%_d_%"></a>
<h2>[<span style="color: #00cc00;">%_yyyy_%-%_mm_%-%_dd_% (%_dayname_%)</span>] %_subject_%</h2>
%_body_%
<div>
<a href="%_d_%/%_imagename_escaped_1_%" target="_blank" class="%_icon_class_1_%">
<img src="%_d_%/%_thumbnail_escaped_1_%" height="150" alt="%_imagetext_1_%"></a>
<a href="%_d_%/%_imagename_escaped_2_%" target="_blank" class="%_icon_class_2_%">
<img src="%_d_%/%_thumbnail_escaped_2_%" height="150" alt="%_imagetext_2_%"></a>
</div>
<div>
<a href="%_d_%/%_imagename_escaped_3_%" target="_blank" class="filelink %_icon_class_3_%">%_imagetext_3_%</a>
</div>
</div>
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.txt をアップロードして下さい。
もう一度管理画面を開き、管理画面一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、もう一度「編集結果をチェック： [一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
今度は日付に色が付きましたか？
短い一覧（新着情報）も同様にデザイン変更ができます。
以下のようにデザイン変更を試して下さい。
短い一覧用のファイルは、 templates/article/short_list.html です。このファイルをテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
今度は背景色を変更して見ましょう。
「<body bgcolor="#ffffff">」を変更して「<body bgcolor="#ccccff">」にしてみます。
変更前 (templates/article/short_list.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>新着記事</title>
</head>
<body bgcolor="#ffffff">
<!-- article list : generate from short_list.txt -->
%_article_list_%
</body>
</html>
変更後 (templates/article/short_list.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>新着記事</title>
</head>
<body bgcolor="#ccccff">
<!-- article list : generate from short_list.txt -->
%_article_list_%
</body>
</html>
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.html をアップロードして下さい。
short_list.html をアップロードしたら、管理画面の一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、「編集結果をチェック： [短い一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
背景色が変更されます。
短い一覧（新着情報）の記事部分の変更も可能です。
以下の手順で変更を試してみます。
templates/article/short_list.txt をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
タイトルの表示位置に「%_subject_%」と記載されている部分があります。タイトルが目立つように、ボールド表記にしてみます。
<b> タグを足して下さい。
変更前 (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top">%_subject_%</a><br>
変更後 (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top"><b>%_subject_%</b></a><br>
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。
管理画面を開き、一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、「編集結果をチェック： [短い一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
表示内容が変更されます。
「短い一覧」（ webdir/index_short.html ）は新着情報としてトップページなどに組み込んで使用する想定になっています。
新着情報として組み込む場合の方法は後述します。
その他、最新1件分の内容をトップページに表示したり、記事ページの中に新着一覧として組み込むといった使い方もできます。
「短い一覧」の使い方について詳しくは、「すぐ使えるCGI」ウェブサイトの「テンプレート解説 No. 3 『短い一覧』の利用方法」を参照して下さい。
不要であれば短い一覧の書き出しを抑えることもできます。
設定方法は「オプション設定」を参照して下さい。
短い一覧の書き出し件数は変更可能です。（デフォルトでは最新3件を表示。）
設定方法は「オプション設定」を参照して下さい。
短い一覧を「新着情報」としてホームページ（トップページ）などに表示するには、以下のような方法が使えます。
- <IFRAME> タグ
- SSI（Server Side Include）
- PHPの readfile 関数
ここでは、一番簡単な <IFRAME> タグでの組み込みを試してみましょう。
SSI（Server Side Include） や PHP を使った組み込み方法については、サイト上のサポート情報をご覧下さい。
http://sugutsukaeru.jp/support/337/
組み込み先ホームページに以下のコードを挿入して下さい。
青字の部分は組み込み先ページから書き出しディレクトリまでのパスを設定して下さい。
<IFRAME> タグ設定例
<iframe
frameborder="0"
allowtransparency="true"
height="300"
width="270"
marginheight="0"
marginwidth="0"
scrolling="no"
src="webdir/index_short.html"
></iframe>
これでページ内に新着情報（短い一覧）が表示されます。
登録した内容が長い場合も <IFRAME> のスクロールバーを出さないようにする方法は下記ページをご参照下さい。
http://sugutsukaeru.jp/cgi/j/44/
検索エンジンなどから <IFRAME> 内のページに直接アクセスされてしまった場合にメインのページにジャンプする方法は下記ページをご参照下さい。
http://sugutsukaeru.jp/cgi/j/45/
短い一覧の書き出し件数は変更可能です。（デフォルトでは最新3件を表示。）
設定方法は「オプション設定」を参照して下さい。
短い一覧（新着情報）にもサムネイル（縮小版）を表示する事ができます。
以下の手順で変更します。
先ほど編集した templates/article/short_list.txt をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
先ほどボールド表記に変更したタイトルの右側に、サムネイルを表示するコードを追加します。
変更前 (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top"><b>%_subject_%</b></a><br>
変更後 (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top"><b>%_subject_%</b></a>
<img src="%_d_%/%_thumbnail_escaped_1_%"
alt="%_imagetext_1_%" width="50" vspace="4" hspace="4"><br>
変更が終わったらファイルを保存して下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。
管理画面を開き、一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
処理完了のメッセージが表示されたら「編集結果をチェック： [短い一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
画像が表示されるようになります。
全一覧と短い一覧（新着情報）には、記事内容のサマリー（抜粋）を表示する事ができます。
ここでは、短い一覧にサマリーを表示させてみます。
templates/article/short_list.txt をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/
サマリーを表示するテンプレート変数は %_summary_% です。タイトルの下にこれを追加します。
変更前（デフォルト） (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top">%_subject_%</a><br>
変更後 (templates/article/short_list.txt)
<!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%" target="_top">%_subject_%</a><br>
<blockquote>%_summary_%</blockquote>
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。
管理画面を開き、一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
処理完了のメッセージが表示されたら「編集結果をチェック： [短い一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればページの再読み込みをして下さい。
サマリーが表示されるようになります。
同じ方法で全一覧にもサマリーの表示が可能です。
全一覧の場合は templates/article/article_list.txt を編集して下さい。
サマリーとして表示する文字数は変更できます。
設定方法は「オプション設定」を参照して下さい。
RSSは、サイト閲覧者が効率的にサイトの更新情報をチェックできる仕組みです。
RSSファイルをウェブサイトに公開することにより、メールなどを送信しなくてもサイト閲覧者の方に効率よく情報配信できます。
またRSSファイルがあれば、そこから自動的に Twitter など他のサイトに情報を反映してくれる外部サービスなどを利用する事もできます。
「すぐ使えるCGI」から登録した情報は自動的にRSSファイル（ webdir/new.xml ）に書き出されます。
不要であればRSSファイルの書き出しを抑えることもできます。
設定方法は「オプション設定」を参照して下さい。
RSSファイル用のデフォルトのテンプレートには、ダミーのサイト情報が記載されています。
設置するサイトの情報に書き換えて下さい。
必要があれば <pubDate> タグ内末尾のタイムゾーンも変更して下さい。
なお、時刻は 0時0分の固定表示になります。
RSSファイル用テンプレートファイルは templates/article/rss_list.html と templates/article/rss_list.txt です。
サイト情報の更新箇所（青字） (templates/article/rss_list.html)
<?xml version="1.0" encoding="Shift_JIS"?>
<rss version="2.0">
<channel>
<title>ここにサイト名やコーナーの名前を入力</title>
<!-- link タグの中身はサイトのURLに変更して下さい -->
<link>http://input.your.domain.name/</link>
<description>ここにサイト名やコーナーの説明を入力</description>
<language>ja</language>
<!-- image タグ（以下10行）は任意要素です。不要なら削除して下さい。 -->
<image>
<title>ここにサイト名やコーナーの名前を入力</title>
<!-- url タグの中身はサイトのロゴのURLに変更して下さい -->
<url>http://input.your.domain.name/your_site_logo.gif</url>
<!-- link タグの中身はサイトのURLに変更して下さい -->
<link>http://input.your.domain.name/</link>
<width>88</width>
<height>31</height>
<description>ここにサイト名やコーナーの説明を入力</description>
</image>
%_article_list_%
</channel>
</rss>
サイト情報の更新箇所（青字） (templates/article/rss_list.txt)
<item>
<title>%_subject_%</title>
<!-- link タグおよび guid タグ内の http〜webdir/ は、
書き出しディレクトリまでのURLに変更して下さい。 -->
<link>http://input.your.domain.name/webdir/index.html#%_d_%</link>
<guid isPermaLink="true">http://input.your.domain.name/webdir/index.html#%_d_%</guid>
<pubDate>%_dd_% %_mon_% %_yyyy_% 00:00:00 +0900</pubDate>
<description>%_summary_%</description>
</item>
<!-- と --> で挟まれているコメントは設置用の説明ですので、編集が終わったら削除して下さい。。
RSSファイルへの書き出し件数は変更可能です。（デフォルトでは最新10件を表示。）
設定方法は「オプション設定」を参照して下さい。
RSSファイル（RSSフィード）で効率よく情報を配信するには、閲覧者の方に「購読」して頂く必要があります。
「購読」とは、URLをブックマークするのと同様の作業です。
閲覧者の方にRSSファイルがある事が分かるように、サイト内のページからRSSファイル（ webdir/new.xml ）にリンクして下さい。
オレンジ色の地に白抜きの扇形のマークか、文字で「RSS」と表示した小さいアイコンでリンクするのが一般的です。
リンクによるRSSファイルの公開に加えて、<head> タグ内に以下のコードを記載すると対応しているブラウザでのRSS購読が簡単になります。
Webサイトのトップページなどにこのコードを追加して下さい。
同じサイトに複数の製品を設置してRSSファイルが複数ある場合、この <link> タグも複数記載できます。
Webサイトのトップページの <head> タグ内に記載（青字はサイトに合わせて変更）
<link rel="alternate" type="application/rss+xml"
title="○○株式会社 スタッフのご紹介 更新情報" href="/webdir/new.xml">
記事ページのテンプレートには予め <head> タグ内に AutoDiscovery 用の <link> タグが設定してあります。
使用する場合は title 属性（青字）をサイトに合わせて変更して下さい。
テンプレートに指定のある AutoDiscovery タグ（ templates/article/xxx.html ）
<link rel="alternate" type="application/rss+xml"
title="○○株式会社 スタッフのご紹介 更新情報" href="new.xml">