テンプレート＆コンテンツ

全体デザインのテンプレート

ファイルの種類	拡張子	説明
テンプレートファイル	.hstp	各コンテンツページの全体のデザインを決めるファイル。
ヘッダーファイル		テンプレートにタイトル画像などのヘッダーの部分として埋め込むためのファイル。必要な時に使用。
パーツ1ファイル		テンプレートにサイドメニュー部分などのパーツとして埋め込むためのファイル。必要な時に使用。
パーツ2ファイル		テンプレートにサイドメニュー部分などのパーツとして埋め込むためのファイル。必要な時に使用。
フッターファイル		テンプレートにフッターの部分として埋め込むためのファイル。必要な時に使用。

全体のデザインと本文を分割したファイル

メインコンテンツファイルに分割した本文のHTML用のファイル。テンプレートと分けることで、全体のデザインやメニューを変更した場合に、再作成すれば全体を変更することができます。

外部ファイルとして読み込むCSSファイルやJavaScriptファイルはメインコンテンツのあるフォルダーに置いてください。

メインコンテンツ部分のファイル

ファイルの種類	拡張子	説明
メインコンテンツファイル	.hstp_hs	本文部分のメインコンテンツを別ファイルにしてテンプレートに埋め込むためのファイル。
その他のHTMLファイル	.xxxx_hs	拡張子.htmlや.phpなどの後ろに_hsを付けたもの。例：.html_hs、.php_hs。 .hstp_hs以外の拡張子でメインファイルを作成する場合。

・HTML作成でのテンプレート作成

<html>
<head>
<!--HTMLヘッダー情報-->
<!--文字コード・言語-->
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Language" content="ja">
<!--説明文-->
<meta name="keywords" content="キーワード">
<meta name="description" content="説明文">
<meta name="author" content="作者">
<!--ロボット巡回設定-->
<meta name="robots" content="ロボットに参照させるかどうか">
<!--外部ファイル読み込み-->
<link rel="stylesheet" type="text/css" href="CSSファイルのパス">
<script type="text/javascript" src="JSファイルのパス">
<!--ホームページタイトル-->
<title>タイトル</title>
</head>

<!--本文表示部-->
<body>
<--ヘッダー-->
<div>タイトル画像などヘッダー</div>

<--パーツ-->
<div>メニューなどのパーツ</div>

<--メインコンテンツ-->
<div>本文などのメインコンテンツ</div>

<--フッター-->
<div>コピーライトなどフッター</div>
</body>
</html>

以下はhsタグに設定しなおしたもの。hsタグは必要なところだけ設定すれば良い。

<html>
<head>
<!--HTMLヘッダー情報-->
<!--文字コード・言語-->
<meta http-equiv="Content-Type" content="text/html; charset={/charset}">
<meta http-equiv="Content-Language" content="{/lang}">
<!--説明文-->
<meta name="keywords" content="{/keywords}">
<meta name="description" content="{/escription}">
<meta name="author" content="{/author}">
<!--ロボット巡回設定-->
<meta name="robots" content="{/robots}">
<!--外部ファイル読み込み-->
<link rel="stylesheet" type="text/css" href="{/css-file}">
<script type="text/javascript" src="{/js-file}">
<!--ホームページタイトル-->
<title>{/title}</title>
</head>

<!--本文表示部-->
<body>
<--ヘッダー-->
<div>{/header}</div>　ここのタグにヘッダーファイルが挿入されます。

<--パーツ-->
<div>{/parts1}</div>　ここのタグにパーツ1ファイルが挿入されます。

<--メインコンテンツ-->
<div>{/main}</div>　ここのタグにメインコンテンツファイルが挿入されます。

<--フッター-->
<div>{/footer}</div>　ここのタグにフッターファイルが挿入されます。
</body>
</html>

・その他にもタグがあります。

その他にも相対パスなどのタグやメインファイルでタグの設定を上書きする方法もありますので、詳しくはそちらを参照してください。まずは試してみることをお勧めします。