基本的な動作を確認したら、テンプレートを編集してデザイン変更を行ってみましょう。
設置がまだ済んでいない場合は「設置方法」から初めて下さい。
実際の制作の際は
このページでは、テンプレートファイルの変更がどのようにホームページのデザインに反映されるかや、管理画面テンプレートを編集する事による機能追加の方法についてご説明しています。
実際の制作でWebサイトにCMSを設置する際は (1)サンプルページ（モックアップ）を先に完成してから (2)テンプレートファイルにコピー の順で作業するのがお勧めですが、「何ができるのか」が分からないとサンプルページを作るときに迷ってしまいますので、まずはこのチュートリアルで概要をつかんで下さい。
初期設定の違い
ダウンロードした製品によっては、テンプレートが既に特定の目的のために加工されていて、初期設定のコードがこのページでご説明するものと違う場合があります。加工済製品の場合は templates.default/ というディレクトリが製品に含まれており、このページで説明するテンプレートファイルはその中に入っています。
1テンプレートの仕組み
「すぐ使えるCGI」ではページのデザインを「テンプレート」で管理します。「テンプレート」とは、プログラムとは分けてデザインを指定するためのファイルで、形式は、HTMLファイルまたはHTMLコードを含むテキストファイルです。初期設定では templates/ ディレクトリの中にこれらのファイルが含まれています。
まずは全一覧（目次）を例に挙げてデザイン変更を行ってみます。
i. テキストエディタでファイルを開く
解凍したファイルの中の templates/article/article_list.html をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
https://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_%">
:
: （19行省略）
:
</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>
:
: （203行省略）
:
</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_%">
:
: （19行省略）
:
</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>
:
: （203行省略）
:
</script>
</body>
</html>
iii. 上書き保存
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは 製品の文字コードと同じ にして下さい。
iv. アップロード
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.html をアップロードして下さい。
v. テンプレート修正後のテスト
article_list.html をアップロードしたら、管理画面一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、もう一度「編集結果をチェック： [一覧]」のリンクからページを表示して下さい。
表示内容が変わらないようであればブラウザのキャッシュをクリアしてからページの再読み込みをして下さい。
今度はタイトルが、「○○株式会社 お知らせ」と表示されますか？
vi. ページとテンプレートファイルの対応
上記 templates/article/article_list.html は全一覧（目次、webdir/index.html）のデザインに反映されましたが、この他の画面とテンプレートファイルの対応は「テンプレート一覧」をご覧下さい。
https://cms.sugutsukaeru.jp/ja/support/manual/template-file-mapping.html
2HTMLタグの変更
このように、テンプレートに指定した内容はそのままWebページ（ホームページ）に書き出されます。変更内容は、上の例のようなテキストの他、HTMLタグも変更できます。通常のWeb編集と同じように編集して下さい。ここで、HTMLタグを編集する例を一つ取り上げてみます。
i. テキストエディタでファイルを開く
解凍したファイルの中の templates/article/article.html をテキストエディタで開いて下さい。このファイルは詳細ページのデザインテンプレートです。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
https://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>
:
: （36行省略）
:
<li class="sugu-previous"><a href="%_to_prev_%" tabindex="-1" id="sugu-t-to_prev">前</a></li>
<li class="sugu-next"><a href="%_to_next_%" tabindex="-1" id="sugu-t-to_next">次</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">
:
: （179行省略）
:
});
</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>
:
: （36行省略）
:
<li class="sugu-previous"><a href="%_to_prev_%" tabindex="-1" id="sugu-t-to_prev">前</a></li>
<li class="sugu-next"><a href="%_to_next_%" tabindex="-1" id="sugu-t-to_next">次</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">
:
: （179行省略）
:
});
</script>
</body>
</html>
iii. 上書き保存
変更が終わったらファイルを保存して下さい。
保存の際の文字コードは 製品の文字コードと同じ にして下さい。
iv. アップロード
保存したファイルを、サーバにもう一度アップロードします。
FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article.html をアップロードして下さい。
v. テンプレート修正後のテスト
article.html をアップロードしたら、管理画面一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。
再構築が終わったら、記事一覧の「チェック」のリンクからページを表示して下さい。
表示内容が変わらないようであればブラウザのキャッシュをクリアしてからページの再読み込みをして下さい。
タイトル部分に「○○株式会社 お知らせ」が追加された事が確認できます。
vi. 記号（テンプレート変数）と表示要素の対応
デザインテンプレートファイル中にある「%_subject_%」などの記号は、入力した内容に置き換えられます。例えば今見たように、「%_subject_%」は記事のタイトルに置き換えられます。この記号の事を「テンプレート変数」と呼んでいます。どのテンプレート変数がどの項目に対応するかは「テンプレート一覧」をご覧下さい。
https://cms.sugutsukaeru.jp/ja/support/manual/template-file-mapping.html
不要な表示項目は、テンプレート変数をデザインテンプレートファイルから削除して下さい。
3CSSファイルの変更
これまでに、HTMLテンプレートファイルの編集で表示要素の追加や変更、削除、HTMLタグの編集ができる事が分かりました。デザイン変更は、この他に、読み込まれているCSSファイルの編集でも行えます。初期設定で使用している CSS ファイルは webdir/parts/ 内にありますので、これらのファイルも自由に編集して下さい。
ここでは、公開ページ側のテンプレートファイル webdir/parts/css/sugu-site.css を編集してページのデザインを変更してみましょう。
i. テキストエディタでファイルを開く
解凍したファイルの中の webdir/parts/css/sugu-site.css をテキストエディタで開いて下さい。
「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
https://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タグで異なる内容の表示が繰り返される場合があります。また、記事の内容として画像がアップロードされている時は画像の説明や枠を表示する一方、画像がアップロードされていなければそれらをまとめて削除してしまいたい場合などがあります。
「すぐ使えるCMS」ではそれらのタグのまとまりを所定の形式のコメントタグで囲み、「タグセット」と呼んでいます。
5.x 以前のバージョンとの対応
「タグセット」は Ver. 6.0 で導入されました。Ver. 5.x 以前は .html ファイルと組みになる .txt ファイル内にこれらのタグを記載していました。Ver. 6.0 では新規導入された「タグセット」の他、Ver. 5.x 以前の記法（テンプレート変数）やテンプレートファイルがそのまま使えます。
Ver. 6.0 で導入されたタグセットと、Ver. 5.x 以前の記法の両方が一つのテンプレートに指定されている場合、タグセットが優先されます。
i. タグセットのコメントタグの構成
タグセットは以下の2つのコメントタグで挟まれたHTMLコードです。
<!-- sugu_(タグセット名を表すアルファベット)_begin -->
<!-- sugu_(タグセット名を表すアルファベット)_end -->「(タグセット名を表すアルファベット)」の部分以外は共通で固定です。1つのタグセットで「タグセット名を表すアルファベット」には同じ文字が入り、どのテンプレートでどのタグセットが使えるかは決まっています。同じ名前のタグセットを一つのテンプレートファイルに複数指定できます（中身のタグは異なっても同じでも構いません。）。
タグセットの例
<!-- sugu_file_begin -->
<li>
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="filelink %_icon_class_%" title="ファイル名: %_filename_%">%_filetext_%</a>
</li>
<!-- sugu_file_end -->ii. 2種類のタグセット
タグセットは、繰り返し表示に使われる場合（例えば、目次内の記事1件分）と、一連のタグをまとめるために使われる場合（例えば、画像タグとその周辺のタグをまとめる）があります。それぞれの例を下記に示します。
繰り返し表示タグセットの例（短い一覧） (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=Shift_JIS">
<title>新着記事</title>
:
: （25行省略）
:
<h1>新着記事</h1>
<ul class="sugu-ruled-list sugu-interactive-list">
<!-- sugu_list_item_begin -->
<!-- 一覧繰り返しパート（旧 short_list.txt） -->
<li class="pure-g">
<span class="pure-u sugu-listdate">%_yyyy_%-%_mm_%-%_dd_%</span>
<span class="pure-u pure-u-1 pure-u-md-3-4 sugu-listlink"><a href="%_to_article_%" target="_top">%_subject_%</a></span>
</li>
<!--
詳細ページを作らない（＝全一覧に記事内容を掲載する）場合は、下記のようにこのページ（短い一覧）から全一覧にリンクさせます。
<a href="%_to_index_%#e%_d_%" target="_top">%_subject_%</a>
-->
<!-- sugu_list_item_end -->
</ul>
</div><!-- /pure-u-1 -->
</div><!-- /pure-g -->
</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>
:
: （135行省略）
:
<!-- この形式は、例えば画像があった時だけキャプションを表示したい場合や、
画像があった時だけカスタム項目を使った詳細情報を付記したい場合などに使って下さい。 -->
<!-- 画像用タグセット内のテンプレート変数は5つの画像全て共通で、
テンプレート変数内には連番方式のような通し番号の付記はありません。 -->
<!-- sugu_image_2_begin -->
<!-- 画像2 -->
<div>
<!-- 例: 画像があったら画像の説明をタイトルとして表示する。画像が無ければタグごと削除される -->
<h4>%_imagetext_%</h4>
<a href="%_d_%/%_filename_escaped_%" target="_blank" title="拡大:%_imagetext_%" class="image-link" data-caption="%_imagetext_%">
<img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%" class="pure-img"></a>
</div>
<!-- sugu_image_2_end -->
<!-- sugu_image_3_begin -->
<!-- 画像3 -->
<div>
<!-- 例: カスタム項目を使って画像の説明追記をしている。blocktext3 の入力の有無にかかわらず、
画像が無ければこの部分の表示が全て削除される。 -->
:
: （72行省略）
:
});
</script>
</body>
</html>
どの記事テンプレートでどのタグセットが使えるかは「テンプレート一覧」をご覧下さい。
https://cms.sugutsukaeru.jp/ja/support/manual/template-file-mapping.html
5画像の表示変更と追加・削除
i. 画像の追加
初期設定では画像は1つしかアップロードできません。画像を追加する場合は、管理画面のテンプレートを修正して下さい。
Ver. 5.0 からは、初期設定のテンプレートに2から5までの画像のアップロード欄が含まれています。これらはスタイル設定で隠されていますので、style属性内の設定を削除して画面に表示させます。
a. 管理画面の編集
templates/admin/2.html と templates/admin/3.html を開いて、それぞれのファイルにある追加の画像欄のコードから下記青字部分を削除して下さい。下記例は2番画像のコードですが、3から5番画像までも必要に応じて同様に編集して下さい。
同様の表示が見つからない場合
管理画面のテンプレートに入力欄のHTMLコードが見つからない場合、Ver. 4.8 以下のバージョン用に編集された製品をお使いです。この場合は下記ページでご案内する方法で編集して下さい。
https://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. 上書き保存とアップロード
変更が終わったらファイルを保存してサーバに上書きアップロードして下さい。管理画面にアクセスすると、画像欄が表示されます。
ii. 画像の削除
a. 管理画面からの画像の削除
画像のアップロードが一つも必要ない場合は、追加する場合と逆に、画像1の欄のHTMLタグに「style="display: none;"」の表記を足して画像のアップロード欄を隠して下さい。
b. 記事ページからの画像の削除
画像を特定のページにのみ表示してそれ以外は削除したい場合は、管理画面からの削除は必要ありません。この場合は、画像を削除する記事ページ側のテンプレートから画像の表示部分のHTMLコードを削除して下さい。
ページとテンプレートの対応や、ファイル内のどの部分が画像に対応するかは「テンプレート一覧」をご覧下さい。
c. 画像が無い時に削除する要素と残す要素のコントロール
画像はタグセットで指定できる他、srcやhref属性に画像番号ごとのテンプレート変数を指定する事もできます。
後者の方法で<a>タグのhref属性にアップロード画像が指定されている場合、アップロードされなかった画像への<a>タグに挟まれた表示要素は、その内容によって削除される場合と残る場合があります。具体的には、画像タイトルと固定文字列は削除され、それ以外の入力項目（タイトルや本文など）は、画像が無い場合も入力内容が残ります。
これらの違いを考慮してテンプレートファイルへの記載方法を決定して下さい。下記に具体例を挙げます。
例：タグセットを使い、画像が無かったら追加テキストを削除する
<!-- sugu_image_#_begin -->
<div>
<!-- 例: カスタム項目を使って画像の説明追記をしている。blocktext# の入力の有無にかかわらず、
画像が無ければこの部分の表示が全て削除される。 -->
<a href="%_d_%/%_filename_escaped_%" target="_blank" title="拡大:%_imagetext_%" class="image-link" data-caption="%_imagetext_%">
<img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%" class="pure-img"></a>
<p>%_blocktext#_%</p>
</div>
<!-- sugu_image_#_end -->画像とその周辺のコードをコメントで挟んでタグセットとする方法です。たとえば画像の詳細説明を複数行テキスト（blocktext#）に記入する設定にした場合、画像がアップロードされなければ、仮に blocktext# にテキストが入力されていたとしても表示が削除されます。
（#は1から5までの数字。）
例：テンプレート変数を使い、画像が無くてもリンクテキストを残す
<!-- 画像（ファイル）が無くてもaタグで挟んだテキスト（記事タイトル）が表示される -->
<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%">%_subject_%</a>
<!-- 画像（ファイル）が無くてもaタグで挟んだテキスト（日付情報）が表示される -->
<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%">%_yyyy_%-%_mm_%-%_dd_%</a>タグセットを使わずに、href属性に画像のパス（URL）を画像番号付きのテンプレート変数で指定する方法です。上記例では、他の入力項目のテンプレート変数がリンクテキストに含まれているので、画像がアップロードされずに<a>タグが削除された場合でも、これらのリンクテキストは入力内容に置き換えられた上で表示されます。
（#は1から5までの数字。）
例：画像が無い場合<a>タグごと削除される要素（画像に関わる内容と固定テキスト）
<!-- 画像（ファイル）が無いとaタグで挟んだテキスト（画像タイトル）も削除される -->
<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%">%_imagetext_#_%</a>
<!-- 画像（ファイル）が無いとaタグで挟んだ固定テキストも削除される -->
<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%">拡大画像はこちら</a>
<!-- 画像（ファイル）が無いとサムネイルもリンクも削除される -->
<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%"><img src="%_d_%/%_thumbnail_escaped_#_%" alt="%_imagetext_#_%"></a>これもタグセットを使わずに、href属性に画像のパス（URL）を画像番号付きのテンプレート変数で指定する方法です。上記例では、リンクテキストは固定文字列、または、画像に付随する情報が指定されています。これらの場合は、画像がアップロードされなかった場合、<a>タグ全体が中身（リンクテキストなど）とともに削除されます。
（#は1から5までの数字。）
6テキスト項目の追加
初期設定のテキスト項目（日付、タイトル、記事内容）の他にも、1行テキスト項目を5つ、複数行テキスト項目を5つまで追加できます。項目を追加する場合は、管理画面のテンプレートを修正して下さい。
Ver. 5.0 からは、初期設定のテンプレートにこれらの項目の入力欄が含まれています。これらはスタイル設定で隠されていますので、style属性内の設定を削除して画面に表示させます。
i. 管理画面の編集
templates/admin/2.html と templates/admin/3.html を開いて、それぞれのファイルにある追加のテキスト欄の下記青字部分を削除して下さい。赤字部分は使用する項目名に置き換えて下さい。下記例は1行テキスト項目の例ですが、他の項目についても必要に応じて同様に編集して下さい。
同様の表示が見つからない場合
管理画面のテンプレートに追加のテキスト項目の入力欄が見つからない場合、Ver. 4.8 以下のバージョン用に編集された製品をお使いです。この場合は下記ページでご案内する方法で編集して下さい。
https://support.sugutsukaeru.jp/ja/customize/extending-features/223.html
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.html にある項目は全て短い一覧（新着情報）のテンプレートファイル templates/article/short_list.html で使えますので、適宜コピーして使って下さい。例えば、画像1を短い一覧に表示するには以下のタグを templates/article/short_list.html に追加して下さい。
画像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> のスクロールバーを出さないようにする方法は下記ページをご参照下さい。
https://support.sugutsukaeru.jp/ja/tutorials/news-widget/78.html
<IFRAME> ページへの直接アクセスを回避する
検索エンジンなどから <IFRAME> 内のページに直接アクセスされてしまった場合にメインのページにジャンプする方法は下記ページをご参照下さい。
https://support.sugutsukaeru.jp/ja/customize/news-widget/59.html
ii. 表示件数の設定
短い一覧の書き出し件数は変更可能です。（初期設定では最新3件を表示。）
設定方法は「オプション設定」を参照して下さい。
<IFRAME> 以外の方法
SSI（Server Side Include） や PHP を使った組み込み方法については、サイト上のサポート情報をご覧下さい。
https://support.sugutsukaeru.jp/ja/tutorials/news-widget/193.html
この他の使い方
この他、最新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.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>
<!-- sugu_list_item_begin -->
<!-- 一覧繰り返しパート（旧 rss_list.txt） -->
<item>
<title>%_subject_%</title>
<link>http://www.example.com/sugu/webdir/%_to_article_%</link>
<guid isPermaLink="true">http://www.example.com/sugu/webdir/%_to_article_%</guid>
<!--
詳細ページを作らない（＝全一覧に記事内容を掲載する）場合、
上記2か所のURLは下記のように指定して下さい（全一覧にリンク）。
http://www.example.com/sugu/webdir/%_to_index_%#e%_d_%
-->
<!-- link タグおよび guid タグ内の http から webdir/ までは、
書き出しディレクトリまでのURLに変更して下さい。 -->
<pubDate>%_dayname_%, %_dd_% %_mon_% %_yyyy_% 00:00:00 +0900</pubDate>
<description>%_summary_%</description>
</item>
<!-- sugu_list_item_end -->
</channel>
</rss>
必要があれば <pubDate> タグ内末尾のタイムゾーン（「+0900」の部分）も変更して下さい。「+0900」は日付が日本（東京）の標準時に基づくものであることを表しますが、例えばアルゼンチンであれば「-0300」となります。なお、時刻は 0時0分の固定表示になります。
<!-- と --> で挟まれているコメントは設置用の説明ですので、編集が終わったら削除して下さい。。
ii. 表示件数の設定
RSSファイルへの書き出し件数は変更可能です。（初期設定では最新10件を表示。）
設定方法は「オプション設定」を参照して下さい。
iii. RSSファイルの公開（リンク）
RSSファイル（RSSフィード）で効率よく情報を配信するには、閲覧者の方に「購読」して頂く必要があります。
「購読」とは、URLをブックマークするのと同様の作業です。
閲覧者の方にRSSファイルがある事が分かるように、サイト内のページからRSSファイル（ webdir/new.xml ）にリンクして下さい。オレンジ色の地に白抜きの扇形のマークか、文字で「RSS」と表示した小さいアイコンでリンクするのが一般的です。アイコンのサンプルは下記URLからダウンロードできます。
https://support.sugutsukaeru.jp/ja/tutorials/installation/178.html
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">