デザイン変更方法

基本的な動作を確認したら、テンプレートを編集してデザイン変更を行ってみましょう。
設置がまだ済んでいない場合は「設置方法」から初めて下さい。

実際の制作の際は

このページでは、テンプレートファイルの変更がどのようにホームページのデザインに反映されるかや、管理画面テンプレートを編集する事による機能追加の方法についてご説明しています。

実際の制作でWebサイトにCMSを設置する際は (1)サンプルページ(モックアップ)を先に完成してから (2)テンプレートファイルにコピー の順で作業するのがお勧めですが、「何ができるのか」が分からないとサンプルページを作るときに迷ってしまいますので、まずはこのチュートリアルで概要をつかんで下さい。

1テンプレートの仕組み

「すぐ使えるCGI」ではページのデザインを「テンプレート」で管理します。「テンプレート」とは、プログラムとは分けてデザインを指定するためのファイルで、形式は、HTMLファイルまたはHTMLコードを含むテキストファイルです。初期設定では templates/ ディレクトリの中にこれらのファイルが含まれています。

まずは全一覧(目次)を例に挙げてデザイン変更を行ってみます。

i. テキストエディタでファイルを開く

解凍したファイルの中の templates/article/article_list.html をテキストエディタで開いて下さい。

「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/

ii. ファイルの修正

ページのタイトルとして「記事一覧」と書いてある部分があるので、これを試しに変更してみます。「○○株式会社 お知らせ」等、お好きなように変更して下さい。

変更前 (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=Shift_JIS">
<title>記事一覧</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<link rel="start" href="%_page_first_%">
<link rel="prev" href="%_page_prev_%">
     :
     : (13行省略)
     :
</head>
<body>
<div class="pure-g sugu-window">
<div class="pure-u-1 sugu-container">

<h1>記事一覧 <small>%_total_%件中 %_min_%-%_max_% を表示</small></h1>

<!-- ページネーション(JavaScriptで構成) -->
<ul class="sugu-pagination">
</ul>
<div class="sugu-clearfix-old-ie"></div>
     :
     : (53行省略)
     :

</script>

</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=Shift_JIS">
<title>○○株式会社 お知らせ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<link rel="start" href="%_page_first_%">
<link rel="prev" href="%_page_prev_%">
     :
     : (13行省略)
     :
</head>
<body>
<div class="pure-g sugu-window">
<div class="pure-u-1 sugu-container">

<h1>○○株式会社 お知らせ <small>%_total_%件中 %_min_%-%_max_% を表示</small></h1>

<!-- ページネーション(JavaScriptで構成) -->
<ul class="sugu-pagination">
</ul>
<div class="sugu-clearfix-old-ie"></div>
     :
     : (53行省略)
     :

</script>

</body>
</html>

iii. 上書き保存

変更が終わったらファイルを保存して下さい。
保存の際の文字コードは 製品の文字コードと同じ にして下さい。

iv. アップロード

保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.html をアップロードして下さい。

v. テンプレート修正後のテスト

article_list.html をアップロードしたら、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

再構築が終わったら、もう一度「編集結果をチェック: [一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればブラウザのキャッシュをクリアしてからページの再読み込みをして下さい。

今度はタイトルが、「○○株式会社 お知らせ」と表示されますか?

vi. ページとテンプレートファイルの対応

上記 templates/article/article_list.html は全一覧(目次、webdir/index.html)のデザインに反映されましたが、この他の画面とテンプレートファイルの対応は「テンプレート一覧」をご覧下さい。
http://sugutsukaeru.jp/products/P092-G0-A9/template_map.html

2HTMLタグの変更

このように、テンプレートに指定した内容はそのままWebページ(ホームページ)に書き出されます。変更内容は、上の例のようなテキストの他、HTMLタグも変更できます。通常のWeb編集と同じように編集して下さい。ここで、HTMLタグを編集する例を一つ取り上げてみます。

i. テキストエディタでファイルを開く

解凍したファイルの中の templates/article/article.html をテキストエディタで開いて下さい。このファイルは詳細ページのデザインテンプレートです。

「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/

ii. ファイルの修正

初期設定で記事のタイトルは <h1> と </h1> に囲まれています。ここを、<h1> にはページのシリーズ名を入れる事にして、タイトルは <h2> での表示に変更しましょう。

変更前 (templates/article/article.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=Shift_JIS">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
     :
     : (31行省略)
     :
<li class="sugu-previous"><a href="%_to_prev_%" tabindex="-1">前</a></li>
<li class="sugu-next"><a href="%_to_next_%" tabindex="-1">次</a></li>
</ul>
<div class="sugu-clearfix-old-ie"></div>

<h1>%_subject_%</h1>
<p class="sugu-pull-right">%_yyyy_%/%_mm_%/%_dd_% (%_dayname_%)</p>
<div class="sugu-clearfix"></div>

<div class="pure-g sugu-article">

     :
     : (74行省略)
     :
});
</script>

</body>
</html>

変更後 (templates/article/article.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=Shift_JIS">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
     :
     : (31行省略)
     :
<li class="sugu-previous"><a href="%_to_prev_%" tabindex="-1">前</a></li>
<li class="sugu-next"><a href="%_to_next_%" tabindex="-1">次</a></li>
</ul>
<div class="sugu-clearfix-old-ie"></div>

<h1>○○株式会社 お知らせ</h1>
<h2>%_subject_%</h2>
<p class="sugu-pull-right">%_yyyy_%/%_mm_%/%_dd_% (%_dayname_%)</p>
<div class="sugu-clearfix"></div>

<div class="pure-g sugu-article">

     :
     : (74行省略)
     :
});
</script>

</body>
</html>

iii. 上書き保存

変更が終わったらファイルを保存して下さい。
保存の際の文字コードは 製品の文字コードと同じ にして下さい。

iv. アップロード

保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article.html をアップロードして下さい。

v. テンプレート修正後のテスト

article.html をアップロードしたら、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

再構築が終わったら、記事一覧の「チェック」のリンクからページを表示して下さい。
表示内容が変わらないようであればブラウザのキャッシュをクリアしてからページの再読み込みをして下さい。

タイトル部分に「○○株式会社 お知らせ」が追加された事が確認できます。

vi. 記号(テンプレート変数)と表示要素の対応

デザインテンプレートファイル中にある「%_subject_%」などの記号は、入力した内容に置き換えられます。例えば今見たように、「%_subject_%」は記事のタイトルに置き換えられます。この記号の事を「テンプレート変数」と呼んでいます。どのテンプレート変数がどの項目に対応するかは「テンプレート一覧」をご覧下さい。

不要な表示項目は、テンプレート変数をデザインテンプレートファイルから削除して下さい。

3CSSファイルの変更

これまでに、HTMLテンプレートファイルの編集で表示要素の追加や変更、削除、HTMLタグの編集ができる事が分かりました。デザイン変更は、この他に、読み込まれているCSSファイルの編集でも行えます。初期設定で使用している CSS ファイルは webdir/parts/ 内にありますので、これらのファイルも自由に編集して下さい。

ここでは、公開ページ側のテンプレートファイル webdir/parts/css/sugu-site.css を編集してページのデザインを変更してみましょう。

i. テキストエディタでファイルを開く

解凍したファイルの中の webdir/parts/css/sugu-site.css をテキストエディタで開いて下さい。

「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
http://sugutsukaeru.jp/cgi/j/36/

ii. CSSファイルの修正

先ほど詳細ページの記事のタイトル部分に <h1> でシリーズ名を入ましたが、シリーズ名の表示は <h2> で表示した記事のタイトルより小さくていいかもしれません。CSS を編集してそれぞれのタグに指定されているフォントサイズを変更してみましょう。

変更前

h1 {
  font-size: 31.5px;
}
h2 {
  font-size: 24.5px;
}

変更後

h1 {
  font-size: 18.5px;
}
h2 {
  font-size: 24.5px;
}

iii. 上書き保存

変更が終わったらファイルを保存して下さい。

iv. アップロード

保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの webdir/parts/css ディレクトリに移動して、 編集後の sugu-site.css をアップロードして下さい。

v. CSS修正後のテスト

CSSファイルを編集した場合は「再構築」の必要はありません。

ただし、読み込まれるCSSファイルはブラウザの単純な再読み込みでは更新されない場合がありますので、ブラウザのキャッシュを確実にクリアしてからページの再読み込みをして下さい。

文字サイズが変更された事が確認できます。

vi. 読み込まれているファイル

表示のために初期設定で読み込まれているファイルの一覧は、「ファイル一覧」をご覧下さい。

4テンプレートの組み合わせ(HTMLファイルとTXTファイル)

一つの記事ページ(ホームページ)のデザインテンプレートは、2つ以上のファイルの組み合わせで構成されています。これは例えば、目次のように一つ一つの記事で同じパターンが繰り返される場合に、繰り返し部分と、それ以外の部分を別のテンプレートファイルに分けて設定しているためです。繰り返し部分は .txt ファイル、それ以外の親となる部分は .html ファイルです。

ここではその一つの例として、記事ページの添付ファイルの表示部分を示します。

記事ファイル用テンプレート templates/article/article.html の %_file_list_% は、添付ファイルリストの挿入位置を示しています。
挿入されるHTMLタグは templates/article/article_file.txt に指定します。

添付ファイル表示用の HTMLコードが挿入される位置(青字) (templates/article/article.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=Shift_JIS">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
     :
     : (48行省略)
     :
		</div>

		<!-- ファイルの表示 -->
		<ul class="sugu-file-list">
		<!-- attached files : generate from article_file.txt -->
		%_file_list_%
		</ul>

	</div><!-- /pure-u-md-2-3 pure-u-lg-3-4 -->

	<div class="pure-u pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 sugu-article-right">
     :
     : (57行省略)
     :
});
</script>

</body>
</html>

挿入される添付ファイル表示用 HTMLコード(1ファイル分) (templates/article/article_file.txt)

<!-- 製品の文字コードと同じ で保存して下さい -->
<li>
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="filelink %_icon_class_%" title="ファイル名: %_filename_%">%_filetext_%</a>
</li>

templates/article/article_file.txt での指定は添付したファイルの数に応じて繰り返されて挿入されます。試しに管理画面から複数のファイルをアップロードしてみて、書き出される記事ページに templates/article/article_file.txt で指定したコードが繰り返し現れる事を確認して下さい。HTMLソースはブラウザの右クリックメニューなどから表示できます。

i. ページと表示要素、テンプレートファイルの対応

書き出されるページのどの部分がどのテンプレートファイルに対応しているかは「テンプレート一覧」をご覧下さい。
http://sugutsukaeru.jp/products/P092-G0-A9/template_map.html

また、HTML形式のテンプレートファイル内にも、以下のようなコメントがあり、青字が繰り返される側のテンプレートファイル名を示しています。赤字が繰り返して挿入される位置を示しています。挿入される内容によって、記号やファイル名は異なります。

ファイルが組み合わされることを示すコメントの例(templates/article/article.html)

<!-- attached files : generate from article_file.txt -->
%_file_list_%

5画像の表示変更と追加・削除

i. 画像の表示変更

詳細ページに表示される画像は、2つのファイルの組み合わせで表示調整されています。

記事ファイル用テンプレート templates/article/article.html にある %_article_image_1_% は画像の位置を指定しています。
実際に挿入されるタグは、templates/article/article_image_1.txt に指定します。

画像(またはファイルの)タグが挿入される位置(青字) (templates/article/article.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=Shift_JIS">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
     :
     : (39行省略)
     :

<div class="pure-g sugu-article">

	<div class="pure-u pure-u-1 pure-u-md-2-3 pure-u-lg-3-4 sugu-article-left">
		<!-- アップロードされた時に、対応する article_image_#.txt から生成 -->
		%_article_image_1_%

		<div>
			%_body_%
		</div>

     :
     : (66行省略)
     :
});
</script>

</body>
</html>

挿入されるHTMLタグ(画像1) (templates/article/article_image_1.txt)

<!-- 画像1の表示指定。article.html の %_article_image_1_% 部分に挿入されます。 -->
<div>
	<img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%" class="pure-img">
</div>

画像の表示位置を変更するには templates/article/article.html を編集して「%_article_image_1_%」の位置を変更して下さい。
画像部分のHTMLコードを変更する場合は(例えば新しいclass属性を追加したり、画像からのリンクを追加したりする場合)、 templates/article/article_image_1.txt を変更して下さい。

ii. 画像の追加

初期設定では画像は1つしかアップロードできません。画像を追加する場合は、管理画面のテンプレートを修正して下さい。
Ver. 5.0 からは、初期設定のテンプレートに2から5までの画像のアップロード欄が含まれています。これらはスタイル設定で隠されていますので、style属性内の設定を削除して画面に表示させます。

a. 管理画面の編集

templates/admin/2.html と templates/admin/3.html を開いて、それぞれのファイルにある追加の画像欄のコードから下記青字部分を削除して下さい。下記例は2番画像のコードですが、3から5番画像までも必要に応じて同様に編集して下さい。

同様の表示が見つからない場合

管理画面のテンプレートに入力欄のHTMLコードが見つからない場合、Ver. 4.8 以下のバージョン用に編集された製品をお使いです。この場合は下記ページでご案内する方法で編集して下さい。
http://sugutsukaeru.jp/cgi/j/61/

templates/admin/2.html の削除箇所(2番画像の例)
<!-- 画像/ファイル2 -->
<div class="pure-g sugu-control-group" style="display: none;">
	<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="imagename2">画像2</label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
		<div class="sugu-form-wrapper">
			%_imagename2_%
			<div class="sugu-form-wrapper">
				<b>(新規・変更)</b>
				<input type="file" name="imagename2" id="imagename2" class="sugu-input-image">
			</div>
		</div>
		<div class="sugu-form-wrapper">
			<label for="imagetext2">画像の説明</label> <input type="text" name="imagetext2" id="imagetext2" value="%_imagetext2_%" maxlength="100" class="imeauto pure-input-1-2">
		</div>
	</div>
</div>
templates/admin/3.html の削除箇所(2番画像の例)
<!-- 画像/ファイル2 -->
<div class="pure-g sugu-control-group" style="display: none;" id="sugu-t-image2">
	<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">画像2</label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
		%_imagename2_%
	</div>
</div>

b. 上書き保存とアップロード

変更が終わったらファイルを保存してサーバに上書きアップロードして下さい。管理画面にアクセスすると、画像欄が表示されます。

iii. 画像の削除

a. 管理画面からの画像の削除

画像のアップロードが一つも必要ない場合は、追加する場合と逆に、画像1の欄のHTMLタグに「style="display: none;"」の表記を足して画像のアップロード欄を隠して下さい。

b. 記事ページからの画像の削除

画像を特定のページにのみ表示してそれ以外は削除したい場合は、管理画面からの削除は必要ありません。この場合は、画像を削除する記事ページ側のテンプレートから画像の表示部分のHTMLコードを削除して下さい。

ページとテンプレートの対応や、ファイル内のどの部分が画像に対応するかは「テンプレート一覧」をご覧下さい。
http://sugutsukaeru.jp/products/P092-G0-A9/template_map.html

6テキスト項目の追加

初期設定のテキスト項目(日付、タイトル、記事内容)の他にも、1行テキスト項目を5つ、複数行テキスト項目を5つまで追加できます。項目を追加する場合は、管理画面のテンプレートを修正して下さい。
Ver. 5.0 からは、初期設定のテンプレートにこれらの項目の入力欄が含まれています。これらはスタイル設定で隠されていますので、style属性内の設定を削除して画面に表示させます。

i. 管理画面の編集

templates/admin/2.html と templates/admin/3.html を開いて、それぞれのファイルにある追加のテキスト欄の下記青字部分を削除して下さい。赤字部分は使用する項目名に置き換えて下さい。下記例は1行テキスト項目の例ですが、他の項目についても必要に応じて同様に編集して下さい。

同様の表示が見つからない場合

管理画面のテンプレートに追加のテキスト項目の入力欄が見つからない場合、Ver. 4.8 以下のバージョン用に編集された製品をお使いです。この場合は下記ページでご案内する方法で編集して下さい。
http://sugutsukaeru.jp/support/373/

templates/admin/2.html の削除箇所(1行項目-1の例)

<!-- 1行項目名-1 -->
<div class="pure-g sugu-control-group" style="display: none;">
	<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="linetext1">1行項目名-1</label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
		<input type="text" name="linetext1" id="linetext1" value="%_linetext1_%" class="imeauto pure-input-1">
	</div>
</div>

templates/admin/3.html の削除箇所(1行項目-1の例)

<!-- 1行項目名-1 -->
<div class="pure-g sugu-control-group" style="display: none;">
	<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">1行項目名-1</label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
		<span id="sugu-t-linetext1">%_linetext1_html_%</span>
	</div>
</div>

ii. 上書き保存とアップロード

変更が終わったらファイルを保存してサーバに上書きアップロードして下さい。管理画面にアクセスすると、追加項目欄が表示されます。

7詳細ページの有無を調整する

Ver. 5.0 からは、各記事を登録する時に、詳細ページを作るか作らないかを指定できるようになりました。この機能は初期設定では無効になっていますが、有効にするには管理画面のテンプレートを修正して下さい。初期設定のテンプレートに必要な入力欄が含まれていますが、これらはスタイル設定で隠されていますので、style属性内の設定を削除して画面に表示させます。

詳細ページを一切書き出さない場合

全ての記事で詳細ページが不要な場合は、ここで説明する方法ではなくオプション設定(環境変数)で調整します。方法は「オプション設定」をご覧下さい。

i. 管理画面の編集

templates/admin/2.html と templates/admin/3.html を開いて、それぞれのファイルにある追加のテキスト欄の下記青字部分を削除して下さい。

templates/admin/2.html の削除箇所

<!-- admin option -->
<fieldset>
<legend>記事ページファイル名の設定</legend>

	<!-- 記事ページファイル名 -->
	<div class="pure-g sugu-control-group" id="sugu-t-article_filename" style="display: none;">
		<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="article_filename">ファイル名</label>
		<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
			<input type="text" name="article_filename" id="article_filename" value="%_article_filename_%" class="imeauto pure-input-1">
			<div class="">
				:(省略)
			</div>
		</div>
	</div>
</fieldset>

templates/admin/3.html の削除箇所

<!-- admin option -->
<fieldset>
<legend>記事ページファイル名の設定</legend>

	<!-- 記事ページファイル名 -->
	<div class="pure-g sugu-control-group" id="sugu-t-article_filename" style="display: none;">
		<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">ファイル名</label>
		<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
			<span id="sugu-t-article_filename_parsed">%_article_filename_parsed_html_% <span id="article_filename-holder">(%_article_filename_html_%)</span></span>
		</div>
	</div>
</fieldset>

ii. 上書き保存とアップロード

変更が終わったらファイルを保存してサーバに上書きアップロードして下さい。管理画面にアクセスすると、詳細ページの設定欄が表示されます。

ファイル名変更機能

この機能を有効にすると、同時に、各記事ごとに個別にファイル名を指定する事もできるようになります。個別に指定するのではなく、一括してファイル名の規則を変更したい場合(例えば、拡張子を変更したい場合)は、ここで説明する方法ではなくオプション設定(環境変数)で調整します。方法は「オプション設定」をご覧下さい。

8短い一覧(新着情報)に画像やファイルを表示する

短い一覧(新着情報)にも、全一覧(目次)と同様に画像やファイルを表示する事ができます。短い一覧と全一覧の違いは表示件数が違う事、また、それに伴い、短い一覧にはページ移動のリンクが無い点だけです。

全一覧(目次)用の初期設定のテンプレートファイル templates/article/article_list.txt にある項目は全て短い一覧(新着情報)のテンプレートファイル  templates/article/short_list.txt で使えますので、適宜コピーして使って下さい。例えば、画像1を短い一覧に表示するには以下のタグを templates/article/short_list.txt に追加して下さい。

画像1の表示用タグ(一覧用)

<img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%">

初期設定のテンプレートに項目が見つからない場合

初期設定のテンプレートに追加の項目が見つからない場合、既に加工済の製品をダウンロードしている場合があります。この場合は「テンプレート一覧」から使いたい画像のテンプレート変数を探して下さい。

9アイコンファイルの入れ替え

webdir/icons/ 配下にあるアイコン画像ファイルも、サイトのデザインに合せて変更して下さい。そのままのご利用も可能です。画像ファイルを置き換えてもよいですし、スタイルシート上で別のファイル名の画像を指定しても構いません(下記青字部分)。ディレクトリの移動も可能です。

アイコンの入れ替え(記事ページのスタイルシートの例)(webdir/parts/css/sugu-site.css)

.doc {
	background-image: url(../../icons/doc.gif)
}
.pdf {
	background-image: url(../../icons/pdf.gif)
}
  :
  :
  :
.zip {
	background-image: url(../../icons/zip.gif)
}

画像のピクセルサイズを変更した場合は、表示設定も変更して下さい。スタイルシートで下記のように背景画像として設定されていますので、青字部分を変更して下さい。使用するアイコンのピクセルサイズは全て揃えて下さい。

アイコンのサイズ変更

.filelink {
	padding-left: 22px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 0.06em 50%;
	background-image: url(../../icons/general.gif);
}

10短い一覧(新着情報)のホームページへの表示

「短い一覧」( webdir/index_short.html )は新着情報としてトップページなどに組み込んで使用する想定になっています。

短い一覧を「新着情報」としてホームページ(トップページ)などに表示するには、以下のような方法が使えます。

- <IFRAME> タグ
- SSI(Server Side Include)
- PHPの readfile 関数

ここでは、一番簡単な <IFRAME> タグでの組み込みを試してみましょう。

i. <IFRAME> タグの設定

組み込み先ホームページに以下のコードを挿入して下さい。
青字の部分は組み込み先ページから書き出しディレクトリまでのパスを設定して下さい。

<IFRAME> タグ設定例

<iframe
    style="width: 270px; height: 300px; border-width: 0px; padding: 0; margin: 0 auto; overflow: auto;"
    src="webdir/index_short.html"
>(IFRAME 機能を有効にして下さい)</iframe>

これでページ内に新着情報(短い一覧)が表示されます。

表示の設定

スクロールバーの調整

登録した内容が長い場合も <IFRAME> のスクロールバーを出さないようにする方法は下記ページをご参照下さい。
http://sugutsukaeru.jp/support/180/

<IFRAME> ページへの直接アクセスを回避する

検索エンジンなどから <IFRAME> 内のページに直接アクセスされてしまった場合にメインのページにジャンプする方法は下記ページをご参照下さい。
http://sugutsukaeru.jp/support/151/

ii. 表示件数の設定

短い一覧の書き出し件数は変更可能です。(初期設定では最新3件を表示。)
設定方法は「オプション設定」を参照して下さい。

<IFRAME> 以外の方法

SSI(Server Side Include) や PHP を使った組み込み方法については、サイト上のサポート情報をご覧下さい。
http://sugutsukaeru.jp/support/337/

この他の使い方

この他、最新1件分の内容をトップページに表示したり、記事ページの中に新着一覧として組み込むといった使い方もできます。「短い一覧」の使い方について詳しくは、「テンプレート解説 No. 3 『短い一覧』の利用方法」を参照して下さい。

11RSSファイルの設定

RSSは、サイト閲覧者が効率的にサイトの更新情報をチェックできる仕組みです。
RSSファイルをウェブサイトに公開することにより、メールなどを送信しなくてもサイト閲覧者の方に効率よく情報配信できます。
またRSSファイルがあれば、そこから自動的に Twitter など他のサイトに情報を反映してくれる外部サービスなどを利用する事もできます。

「すぐ使えるCGI」から登録した情報は自動的にRSSファイル( webdir/new.xml )に書き出されます。
不要であればRSSファイルの書き出しを抑えることもできます。
設定方法は「オプション設定」を参照して下さい。

i. サイトの情報を設定

RSSファイル用の初期設定のテンプレートには、ダミーのサイト情報が記載されていますので、設置するサイトの情報に書き換えて下さい。

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://www.example.com/</link>
<description>ここにサイト名やコーナーの説明を入力</description>
<language>ja</language>

<!-- image タグ(以下10行)は任意要素です。不要なら削除して下さい。 -->
<image>
	<title>ここにサイト名やコーナーの名前を入力</title>
	<!-- url タグの中身はサイトのロゴのURLに変更して下さい -->
	<url>http://www.example.com/your_site_logo.gif</url>
	<!-- link タグの中身はサイトのURLに変更して下さい -->
	<link>http://www.example.com/</link>
	<width>150</width>
	<height>150</height>
	<description>ここにサイト名やコーナーの説明を入力</description>
</image>

%_article_list_%

</channel>
</rss>

サイト情報の更新箇所(青字) (templates/article/rss_list.txt)

<item>
<title>%_subject_%</title>
<!-- link タグおよび guid タグ内の http から webdir/ までは、
     書き出しディレクトリまでのURLに変更して下さい。 -->
<link>http://www.example.com/sugu/webdir/%_to_article_%</link>
<guid isPermaLink="true">http://www.example.com/sugu/webdir/%_to_article_%</guid>
<pubDate>%_dd_% %_mon_% %_yyyy_% 00:00:00 +0900</pubDate>
<description>%_summary_%</description>
</item>

必要があれば <pubDate> タグ内末尾のタイムゾーン(「+0900」の部分)も変更して下さい。「+0900」は日付が日本(東京)の標準時に基づくものであることを表しますが、例えばアルゼンチンであれば「-0300」となります。なお、時刻は 0時0分の固定表示になります。

<!-- と --> で挟まれているコメントは設置用の説明ですので、編集が終わったら削除して下さい。。

ii. 表示件数の設定

RSSファイルへの書き出し件数は変更可能です。(初期設定では最新10件を表示。)
設定方法は「オプション設定」を参照して下さい。

iii. RSSファイルの公開(リンク)

RSSファイル(RSSフィード)で効率よく情報を配信するには、閲覧者の方に「購読」して頂く必要があります。
「購読」とは、URLをブックマークするのと同様の作業です。

閲覧者の方にRSSファイルがある事が分かるように、サイト内のページからRSSファイル( webdir/new.xml )にリンクして下さい。オレンジ色の地に白抜きの扇形のマークか、文字で「RSS」と表示した小さいアイコンでリンクするのが一般的です。アイコンのサンプルは下記URLからダウンロードできます。

http://sugutsukaeru.jp/support/317/

iv. RSSファイルの公開( AutoDiscovery の設定、トップページ)

リンクによるRSSファイルの公開に加えて、<head> タグ内に以下のコードを記載すると対応しているブラウザでのRSS購読が簡単になります。
Webサイトのトップページなどにこのコードを追加して下さい。

同じサイトに複数の製品を設置してRSSファイルが複数ある場合、この <link> タグも複数記載できます。

Webサイトのトップページの <head> タグ内に記載(青字はサイトに合わせて変更)

<link rel="alternate" type="application/rss+xml"
    title="○○株式会社 お知らせ 更新情報" href="/webdir/new.xml">

v. RSSファイルの公開( AutoDiscovery の設定、記事ページ)

記事ページのテンプレートには予め <head> タグ内に AutoDiscovery 用の <link> タグが設定してあります。
使用する場合は title 属性(青字)をサイトに合わせて変更して下さい。

テンプレートに指定のある AutoDiscovery タグ( templates/article/xxx.html )

<link rel="alternate" type="application/rss+xml"
    title="○○株式会社 お知らせ 更新情報" href="new.xml">