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

「写真が語るUXとUIの違い」について思うこと。

及川卓也さんが「写真が語るUXとUIの違い」というブログ記事で、タイトルの通り「UX と UI の違いを示す写真」を紹介しています。 その写真を見て、僕は Facebook にこう書きました(5 月 …

no image

.htaccess で、ページごとにピンポイントで 301 リダイレクトする方法。

ディレクトリごとリダイレクトする方法は過去の記事にも書いてますし、ググれば比較的すぐに見付かります。 一応書いとくと、 Redirect permanent /old/ http://www.btmu …

no image

.htaccessで「Redirect permanent」が使えない場合に「RewriteRule」を使ってリダイレクトする方法。

.htaccess でリダイレクトする場合、一般的に使うのはこんな↓書式だと思います。 Redirect permanent /old/ http://www.btmup.com/new/ 「/old …

no image

「Cyberduck」の動作が突然遅くなったときの対処法。

職場でメインのFTPソフトとして使っているのは、「アヒル」でおなじみの「Cyberduck」(現行バージョン:3.0.3)。 フリーソフトなのに機能はしっかりしていて、非常に使いやすくて重宝してます。 …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …