Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

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

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


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

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

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

関連記事

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

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

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン！

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索＆置換は、便利な機能が満載！ サイトを制作する上で厄介になってくるのが

記事を読む

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

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

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ！[第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載？を再開しなきゃと思い、重

記事を読む

[CSS] メディアクエリ（Media Queries）を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

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

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

記事を読む

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

まずはベースとなるHTMLを作成しましょう。 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のカスタマイズがよくわかる！


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
PAGE TOP ↑

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524