CSSレイアウト[便利な小技]
テンプレートの活用
CSSの使い方から外れるが、Dreamweaverでは「テンプレート」を使用するとページ追加が容易になるのでメモしておく。 Macromedia Dreamweaver 8とAdobe Dreamweaver CS3で確認。
[1] XHTMLファイルをテンプレートファイルにする
[2] テンプレート式（＠＠(PageTitle)＠＠）の設定
[3] 2つのパンくずリストを作る（カテゴリートップ用とカテゴリー用）
[4] <title>も2つ作る
[5] CSSシグネチャ用にbodyにclass名を付ける
[6] カテゴリートップの一覧用に「リピート領域」を作る
[7] カテゴリートップとカテゴリーの切り替え用に「オプション領域」を作る
[8] ライブラリについて
[1] XHTMLファイルをテンプレートファイルにする
Dreamweaver上で、XHTMLとCSSでページを組む。ページレイアウトを完成させたら、テンプレートに変換し保存。次にそのテンプレートファイルを編集していく。
ここでは、この「便利な小技」カテゴリーでのフォーマットで説明。
フォーマットを組む時のヒントは...
●カテゴリートップページで一覧表を載せるなら「リピート領域」を利用できるので dl要素で作る。
●「オプション領域」を使って表示非表示を選択できるので、このテンプレートのまま下層ページも利用できるように、 下層ページ用のレイアウト作る。
●サイト全体に関わるアイテムは「ライブラリ」を利用する。ライブラリを編集すれば、すべてのページに存在するそのアイテムが変更される。
ファイルをテンプレートにする1─メニューバーの「ファイル」→テンプレートとして保存→名前を付ける。
2─ローカルのルートに「Templates」フォルダができ、拡張子 .dwt のファイルができる。このテンプレートファイルが開いているので、共通部分以外は削除。 （テンプレートにした元ファイルは残っている。）
3─編集可能領域を作る。
コードビューで、編集可能にしたいエリアを選択し→挿入バーの一般→テンプレート（フォルダの形のアイコン）→「編集可能領域」を選択。
●編集可能領域は、下記のグリーンのコメントで囲まれる。
<!-- TemplateBeginEditable name="EditRegion1" --> 〜 <!-- TemplateEndEditable -->
〜の部分が自由に編集できる
●デフォルトで、ヘッドの<title>は編集可能領域になっている。
●ヘッドの一部に下記のような編集可能領域がデフォルトで出来ている。外部ファイル追加用。
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
テンプレートから子ファイルを作る
1─新規ファイル→一般でなく、テンプレート（テンプレートから新規作成）を選ぶ。
2─サイトを選ぶ→保存したテンプレートがリストに表示されるので選ぶ。
3─ 「テンプレート修正時に更新」をチェックして→作成。
正しい場所に保存することで、子ファイルのリンクは有効になる。
子ファイルの編集可能領域以外のコードは、薄いグレーになって変更不可になる。変更したい場合はテンプレートを編集。
[2] テンプレート式（＠＠(PageTitle)＠＠）の設定
ページタイトルを一気に同一化できる。
<title>、hx要素のタイトル、パンくずリストなどを、一度の設定ですべてに反映させることができる。
※編集可能領域では使えない。<title>まわりの「Editable」コメントをとること。
1─<head>内の<title>、hx要素のタイトル、パンくずリストなどの要素が編集可能になっていたら、Editableコメントを削除しておく。
2─ <head>内に下記のコードを入力。
<!-- TemplateParam name="PageTitle" type="text" value="ページタイトル（この文言は自由）" -->
3─ページタイトルを反映させたい部分（編集不可にしてあること）に「@@(PageTitle)@@」と入力。
子ファイルでの操作
1─メニューバー→修正→「テンプレートプロパティ」
2─リストの「PageTitle」を選択し、入力スペースにページのタイトルを書き込む。→OK
[3] 2つのパンくずリストを作る（カテゴリートップ用とカテゴリー用）
このページのパンくずリストは「トップページ > 便利な小技 > テンプレートの活用」と3階層だが、
カテゴリートップページでは「トップページ > 便利な小技」の2階層になっている。
このように2タイプのパンくずリストを1つのテンプレートで賄うために、「Category」を0,1,2....と選択できるようにする。
テンプレートファイルでの編集1─まず2タイプのパンくずリストを所定の位置に書く。
2─2つまとめて<!-- TemplateBeginMultipleIf --><!-- TemplateEndMultipleIf -->で囲む。
3─それぞれを<!-- TemplateBeginIfClause cond="Category == 0（or1） " --> <!-- TemplateEndIfClause -->で囲む。0が初期値。
下記のようなコードになる。<!-- TemplateBeginMultipleIf -->
<!-- TemplateBeginIfClause cond="Category == 1" -->
<h2><a href="../index.html">トップページ</a> > <a href="../kowaza/index.html">便利な小技</a> > @@(PageTitle)@@</h2>
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Category == 0" -->
<h2><a href="../index.html">トップページ</a> > 便利な小技</h2>
<!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
</div>
子ファイルでの操作
1─メニューバー→修正→「テンプレートプロパティ」
2─リストの「Category」を選択し、0か1かを入力する。→OK
[4] <title>も2つ作る
上の [3] 2つのパンくずリストを作ると同様に、<title>もカテゴリートップ用とカテゴリー用が必要。
<head>内の<title>も2タイプ作り、カテゴリー用にはテンプレート式（@@(PageTitle)@@）を仕込んでおく。パンくずリストで入力したコードをコピペ。0か1かのカテゴリー分けはパンくずリストと統一させること。
これで、子ファイルでの「Category」の0か1かの選択により、<title>も切り替わる。
[5] CSSシグネチャ用にbodyにclass名を付ける
右図のように、下層ページでメニューボタンの画像変化で現在位置を示す時、いちいちCSSを編集するのは面倒。
こんなとき、<body>に各ページ別々の属性（idやclass）を与えてやり、あらかじめCSSで変化させたい<a>リンクの指定をしておく。
そして、テンプレートの「属性を編集可能にする」を利用すれば、子ファイル作成時に<body>の属性を指定するだけで
現在位置の画像変化が設定できる。
※メニューボタンをCSSで設定している場合のみ。imageファイルを直接貼り付けて作っている場合は不可。
※bodyタグでなくても、メニューの部位を囲んでいる要素なら何でも。bodyが一番大きいブロックなので、これにしておけば万全。
テンプレートファイルでの編集
1─<body>にクラス名を適当に付ける。
2─<body>タグ1行を選択→メニューバーの「修正」→テンプレート→「属性を編集可能にする」を選択。
3─「属性：calss」になっているので、その下の「属性を編集可能にする」をチェック→OK
4─cssファイルでカテゴリーメニュー用のaリンクの設定をしておく。
.kowaza02 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu02 a,
.kowaza03 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu03 a,
.kowaza04 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu04 a,
.kowaza05 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu05 a,
.kowaza06 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu06 a,
.kowaza07 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu07 a,
.kowaza08 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu08 a,
.kowaza09 #outlinebg #outline #side #sidespace #txtsubmenu #kowazamenu09 a
{
color: #CC0000;
background: #ECE4CD;
}
「.kowaza01（〜09）」が、bodyに付けるクラス名。「#kowazamenu01（〜09）」が、左サイドのサブメニューボタン。 カンマ（,）で区切って複数のセレクタをまとめて指定している。
子ファイルでの操作
1─メニューバー→修正→「テンプレートプロパティ」
2─リストの「class」を選択し、cssで設定したクラス名を入力する。→OK
[6] カテゴリートップの一覧用に「リピート領域」を作る
「リピート領域」は、カテゴリートップでの一覧表のほか、トップページの新着情報やFAQページなど、記事を追加・削除・順序の入れ替えしたい部分に便利。
テンプレートファイルでの編集1─dl要素で下記のように1つ作っておく。CSSでデザインを整えておく。
<dt><a href="index01.html">タイトル</a></dt>
<dd>内容</dd>
</dl>
2─dt要素、dd要素それぞれを別々に「編集可能領域」にしておく。
コードビューで選択し→挿入バーの一般→テンプレート（フォルダの形のアイコン）→「編集可能領域」を選択。
<!-- TemplateBeginEditable name="ttl" -->
<dt><a href="index01.html">タイトル</a></dt>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="naiyou" -->
<dd>内容</dd>
<!-- TemplateEndEditable -->
</dl>
3─dl要素全体を「リピート領域」にする。
2と同じようにコードビューで選択し→挿入バーの一般→テンプレート（フォルダの形のアイコン）→「リピート領域」を選択→名前をつけて→OK。
下記のようにdl要素の外側に、Repeatのコメントが付く。
<dl>
<!-- TemplateBeginEditable name="ttl" -->
<dt><a href="index01.html">タイトル</a></dt>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="naiyou" -->
<dd>内容</dd>
<!-- TemplateEndEditable -->
</dl>
<!-- TemplateEndRepeat -->
4─このままでもいいのだが、この状態だと、dl要素全体が何本もリピートされ、HTMLがすっきりしない。
dtとddが、<dl></dl>の内部でリピートするようにするには、3でできた上下のコメントを<dl></dl>の内側に手動で入れる。
<!-- TemplateBeginRepeat name="小技コンテンツ" -->
<!-- TemplateBeginEditable name="ttl" -->
<dt><a href="index01.html">タイトル</a></dt>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="naiyou" -->
<dd>内容</dd>
<!-- TemplateEndEditable -->
<!-- TemplateEndRepeat -->
</dl>
子ファイルでの操作
子ファイルには、右のように小さなコントロールパネルができているので、これによって増減入れ替えを行う。
[7] カテゴリートップとカテゴリーの切り替え用に「オプション領域」を作る
「オプション領域」に指定すると、表示・非表示を切り換えることができる。編集不可の領域にも使える。
1つのテンプレートを、カテゴリートップとカテゴリーページに流用したい時に便利。カテゴリートップ用の一覧表などを非表示にしてしまえば、下層のカテゴリーページにも使える。
テンプレートファイルでの編集コードビューで、オプション領域にしたいエリアを選択し→挿入バーの一般→テンプレート（フォルダの形のアイコン）→「オプション領域」を選択→名前を付ける→OK <!-- TemplateBeginIf cond="名前" -->〜<!-- TemplateEndIf -->で囲まれる。
子ファイルでの操作
1─メニューバー→修正→「テンプレートプロパティ」
2─リストに先程つけた名前がでているので、選択→表示したければチェックボックスをチェック。非表示にしたいならチェックをはずす→OK
[8] ライブラリについて
ライブラリはコードの固まりを保存する。ライブラリ内のコードを編集すれば、サイト全体にあるそのアイテムが1回で編集できる。
Page Up（ページのトップへ移動する）ボタンや、フッターの内容に利用すると良い。
1─「Page Up」など、ページ内で繰り返し使うアイテムの、コードを全部選択する。
2─アセットパネルの左側のアイコン群の一番下
「ライブラリ」をクリック。
→アセットパネルの右下の
「新規ライブラリ項目」をクリック。
→「CSSが一緒にコピーされるので.....」のメッセージが出るが「OK」をクリックする。
3─名前を付ける。
→コードの前後に「LibraryItem」とコメントが付き（取っては行けない）背景色が黄色になる。
→ローカルのルートに「Library」フォルダができ、拡張子 .lbi のファイルが出来る（アップ不要）。
使う
挿入したい箇所にカーソルを置き、アセットパネルの下の「挿入」をクリック。
ライブラリに格納したコードは、ライブラリ上でダブルクリック（プレビューでも名前でも）すると、ファイルが開いて編集できる。拡張子 .lbi のついたファイルを開いても同じ。