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

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

まだまだある便利機能!

既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

まだ読んでない人は下記の記事もどうぞ

任意の場所にidやclassを付ける

テンプレートを使用していて、どうしても他と違うCSSを設定したい時などにidを付けたり、classを付けたりしたい時ってありますよね。
そんなときに使う方法が今回紹介する方法です。

まずは、テンプレートファイルの<head>内にというよりは、</head>の直前の方がミスがなくていいです。

<!-- TemplateParam name="id" type="text" value="" -->

このタグを記入します。

name=”id”というところにvalueが入るんですが、それを入れるためのテンプレートタグをhtmlに記入します。

<body id="@@(id)@@">

こうです。この「@@()@@」がテンプレートタグになります。
そして、<head>の方に書いたnameが()内のidということです。

これで準備は完成です。
後は、テンプレートを適用したファイルを開き、上部メニュー > 修正 > テンプレートプロパティを選択しましょう。

img_20140808_01

このウィンドウが表示されますので、idとなっているところに、付けたいidを入れるだけです。

img_20140808_02

このようにidの部分にvalueの値であるaboutが入っています。

※Dreamweaverでは、テンプレートの編集不可領域は全てグレーの文字で表示されるため、<body>がグレーになっています。

上記と同じ様に、classも付ける事ができます。
方法は全く同じなので、応用してみましょう。

テンプレートタグを外して書き出す

たまに、テンプレートタグを入れたままだと困りますって言われたりします。
そういう場合、テンプレート機能を使う事をあきらめるんじゃなく、存分に使った上で最終的にテンプレートタグを除いてしまえばいいんです。

方法は、上部メニュー > 修正 > テンプレート > マークアップを省略して書き出し を選択し、書き出すフォルダを指定するだけです。
そして、書き出されたファイルを納品すればいいでしょう。

テンプレートを切り離す

余談ですが、どうしてもテンプレートが邪魔なときは、テンプレートを切り離す事ができます。

上部メニュー > 修正 > テンプレート > テンプレートから切り離す を選択すると、テンプレートタグが全てなくなります。
既に付けていたidなどはそのまま残ります。

まとめ

Dreamweaverを使っているなら必ずマスターしたいテンプレート機能。
もし、まだ使ってなかったり、使ってみようかなーと思っている人は、少しずつ使っていってみましょう。

どんどん便利さが理解出来、最終的にはテンプレート機能が使えない案件だと面倒だなーと思ったりします。
(実際は、あまり使えない案件はありません。)

今回紹介した他に、以前紹介したものも含めてもまだ全て紹介出来ていませんし、実際に僕自身が使いこなせていない機能もあります。
次回は、勉強も兼ねてそういった機能にも触れていってみたいです。

ad

関連記事

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

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

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

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

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

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

ad

Message

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

ad

[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アプリの開発もしております。
PAGE TOP ↑