[Dreamweaver] テンプレートの入れ子

公開日： : 最終更新日：2014/08/20 Dreamweaver, Web制作

テンプレートは入れ子に出来る！

Dreamweaverのテンプレートは、ベースを作り、さらにそのベースを入れたテンプレートを作成することができます。

ヘッダー・フッターは変わらないけど、その他が変わる場合、例えばトップページと下層ページは、結構レイアウトが違うものですがヘッダー・フッターは大体同じです。
そういう場合に、トップだけベーステンプレートを適用して、下層ページは下層用の入れ子になったテンプレートを使えば、リンクの変更や文言の変更等柔軟に対応出来るでしょう。

入れ子のテンプレートの作り方

まずは、ベースとなるテンプレートを作りましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テンプレート</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<link rel="stylesheet" type="text/css" href="common/css/base.css" media="all" />
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
  <div id="header">
    <div id="logo"><a href="index.html">ロゴエリア</a></div>
    <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a></div>
  </div>
  <!-- //ヘッダー -->
  <!-- フッター -->
  <div id="footer">
    <div id="footlink">| <a href="#">このサイトについて</a> | <a href="#">プライバシーポリシー</a> |</div>
    <div id="copyright">Copyright &copy; hidef,jp. All Rights Reserved.</div>
  </div>
  <!-- //フッター -->
</div>
</body>
</html>

こうして、ヘッダー・フッターの要素があるだけのHTMLファイルを用意します。
見た目は、下記のようになります。

20140803_img01

本当に最低限のものしかありませんが、このヘッダー・フッターは全ページで同じものであり、変わる事がありません。

次にこれをテンプレート化します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>テンプレート</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../common/css/base.css" media="all" />
<!-- TemplateBeginEditable name="head" -->
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<!-- TemplateEndEditable -->
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
  <div id="header">
    <div id="logo"><a href="../index.html">ロゴエリア</a></div>
    <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a></div>
  </div>
  <!-- //ヘッダー -->
  <!-- フッター -->
  <div id="footer">
    <div id="footlink">| <a href="#">このサイトについて</a> | <a href="#">プライバシーポリシー</a> |</div>
    <div id="copyright">Copyright &copy; hidef,jp. All Rights Reserved.</div>
  </div>
  <!-- //フッター -->
</div>
</body>
</html>

テンプレート化しただけですので、特に変化はなくテンプレート用のタグが追加されています。

最後にヘッダーとフッターの間に、編集可能領域を追加します。

<!-- //ヘッダー -->
  <!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable -->
<!-- フッター -->

このようにヘッダーとフッターの間に編集可能領域が追加されていればベースとなるテンプレートは完成です。
Dreamweaverでのプレビュー画面では下記のようになっています。

20140803_img02

青い枠内が編集可能領域になります。

ベーステンプレートを使って入れ子テンプレートを作る

新規にHTMLファイルを作り、そのファイルにベーステンプレートを適用します。
適用すると、プレビュー画面では下記のように右上に適用されているテンプレートの名前が出ます。

20140803_img03

この状態で、このファイルをテンプレートとして保存すると、入れ子になったテンプレートが完成します。

完成と言っても、単に入れ子になっているだけなので、この入れ子テンプレートにも編集可能領域を追加していきます。
ただ、全体を通してレイアウトが変わらない箇所は編集可能領域の外側に、内容が変わる部分のみ編集可能領域としておくことが重要です。
そうすることで、余計なミスを未然に防ぐ事ができます。

仮にいろいろな要素を入れて、編集可能領域を追加したものが下の画像になります。
入れ子になると、編集可能領域の色が変わります。変わるのはベーステンプレートの方の編集可能領域の色で、常に現在のテンプレートの編集可能領域の色は青緑色です。

20140803_img04

今回は、ローカルナビとH1見出しの内容、そしてその下にあるコンテンツが編集可能領域としてあります。
グローバルナビゲーションも変化するのですが、それは別の方法で出来ますので、今回は割愛してあります。

まとめ

簡単な説明ですが、入れ子にする方法を紹介しました。
数ページ程度のサイトでは必要ないかもしれませんが、中規模から大規模のサイトにはとても威力を発揮してくれる機能です。

また、複数人による作業でも、テンプレート化してあることで、編集できる箇所が限られてくるので、ミスを減らしたりもできるでしょう。

まだまだテンプレートの機能を紹介しきれていないほど多機能なので、是非Dreamweaverを使う際にはテンプレートに挑戦してみてください。
慣れればサイトの制作もすごく速くなりますよ！

ad

関連記事

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない！

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる！

デフォルトのままじゃ、狭い！ DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ（切り抜き）するjQueryの

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え！

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[CSS] animationを使ってみる！

色の変化をCSSのみで実装できる！ CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[Dreamweaver] テンプレート機能初級編！

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[jQuery] フルサイズ（ブラウザいっぱい）で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[Dreamweaver] テンプレート機能を使う！初級〜中級編

まだまだある便利機能！ 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREV
[Dreamweaver] 便利な検索&置換
NEXT
[Dreamweaver] オプション領域を極める！テンプレート上級編

ad

NEW ENTRY

[PHP] curl転送してみる（googleに）

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト（plist）の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • プロフィール

    1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

  • おすすめレンタルサーバー

  • WordPressのカスタマイズがよくわかる！

PAGE TOP ↑