btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

Web制作全般

Dreamweaver のテンプレートで編集可能領域外の要素の属性を編集可能にする方法

投稿日:

いっっっっっつも「どこだっけなーーー」ってなるので、メモ。

Dreamweaver のテンプレートを適用したページは、テンプレートの方で設定した「編集可能領域」の中身しか編集できません。
でも、例えば「body 要素に id を設定して、ページごとやカテゴリーごとに変えたい」なんてこともよくある話で、じゃあそのために編集可能領域の範囲を広げたり新たに追加したりするのも面倒ってもの。
そんなときは、特定の要素の属性を各ページで変更できるようにテンプレートで設定できます。

というワケでその手順。

(ちなみに、バージョンは CS4 です)

テンプレートを設定

body 要素の id 属性を変更できるようにした場合。

  1. テンプレート(.dwt)を開き、body 要素に id 属性を設定する。
  2. body 要素にカーソルを合わせた状態で、[修正]−[テンプレート]−[属性を編集可能にする…]を選択する。

    (メニュー自体がグレーアウトしてる場合があるんですけど、何が原因かよく分かってません……。編集可能領域を設定したら直ったりしますが……)
  3. 「属性を編集可能にする」のチェックを入れ、ラベル(例:bodyID)と初期設定の値(例:index)を入力する。属性は「ID」、タイプは「テキスト」を選択しておく。
  4. </head>の前に「<!– TemplateParam name=”bodyID” type=”text” value=”index” –>」が挿入され、body 要素の id 属性値が「@@(bodyID)@@」になっていれば成功。

属性は id じゃなくても class などが(たぶん src とか href とかでも)設定可能。
タイプも、その属性に合わせて選ぶのが良さげです。
(僕は今まで id くらいしか使ったことがないので詳細は分かりませんが)

各ページで属性値を変更

  1. ページのファイル(.html)を開き、[修正]−[テンプレートプロパティ…]を選択する。
  2. 設定したラベルを選択して、その値を入力する。
  3. </head>の前にある「<!– InstanceParam name=”bodyID” type=”text” value=”index” –>」の value の値が入力した内容に変化すれば成功。

当然のことながら、ソースを直接いじっても変化しません。
必ずメニューから操作しましょう。

尚、この機能はネストされたテンプレートでも有効です。
つまり、サイト共通のテンプレートと、カテゴリーごとにテンプレートを作成していた場合、共通テンプレートで上記設定をしておけば、カテゴリーごとのテンプレートで body 要素の id 属性値を変更することができ、それをベースにページのファイルを作ることができます。

逆に、ネストされたテンプレートを適用していても、ページごとに属性値を変更したい場合もあると思います。
そんなときは、ネストされた(ここの例ではカテゴリーごとの)テンプレートを開いた状態で、「属性値を変更」の手順で選択した[修正]−[テンプレートプロパティ…]のダイアログを開き、「ネストされたテンプレートによる制御を許可」のチェックを入れてください。

</head>の前のタグが「<!– InstanceParam name=”bodyID” type=”text” value=”index” passthrough=”true” –>」になり、body 要素の id 属性値も「@@@(bodyID)@@@」になります。
これで、ネストされたテンプレートをベースに作られたページでも、属性値を変更することができます。







-Web制作全般
-, , , ,

執筆者:


comment

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

関連記事

no image

新聞を読んでいる人のRSSアイコンを配布しているサイトをようやく発見。

いろんなサイトでよく見かける、新聞を読んでいる姿を描いた→のようなRSS用のアイコン。 ようやくその画像を配布しているページを発見しました。 どのサイトでも同じ画像を使ってるっぽいので、きっと大元の「 …

no image

4 月 7 日(土)『「Web な人」大阪お話し会』開催のお知らせ。

Twitter やら Facebook やらで散々告知してるにも関わらず、ブログという手段をすっかり忘れてました。 という訳で、いきなりですが告知! 4 月 7 日(土)に『「Web な人」大阪お話し …

no image

.htaccess で gzip 圧縮してデータ転送量を少なくする方法。

メモ的エントリー。 タイトルのまんまです。 Web ページを表示するときには、まず HTML やら CSS やら JavaScript やら 画像やらをダウンロードする必要があります。 それら各ファイ …

no image

Mac版「Google Chrome」のスクリーンショットが初公開

»「Chrome」Mac版、初のスクリーンショットが公開 – ITmedia エンタープライズ いやぁ、楽しみですなぁ。 というか、Windows 版が出てからもう5ヶ月も経っ …

no image

最高の UX を提供する Web サイトやアプリを作るただ一つの方法。

とっても簡単なことです。 それは、ユーザーのことをちゃんと考えて作ること。 以上!