スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

DreamweaverのテンプレートでCSSシグネチャを行う方法

ページ毎にスタイルを切り替えたい場合には、bodyタグにidやclassを振るCSSシグネチャが便利です。今回、Dreamweaverのテンプレートを使ってCSSシグネチャを行う機会があったので、その方法をメモ。

まずは普通にテンプレートを作成し、bodyに適当なIDを振っておきます。

<body id="default">

そして、bodyタグにカーソルを合わせた状態で「修正」→「テンプレート」→「属性を編集可能にする」をクリック。

Dreamweaverキャプチャ

「編集可能なタグ属性」のダイアログが表示されるので、属性を編集可能にするにチェックをつけ、タイプはテキストを選択してOK。ラベルと初期設定は最初に記述していたbodyタグのIDが入ります。

Dreamweaverキャプチャ

下図のようにbodyのidが変更され、テンプレートパラメータが追記されます。

Dreamweaverキャプチャ

これでCSSシグネチャを行う準備は完了。

このテンプレートから新規にページを作成すると、bodyタグは編集不可能になりますが、テンプレートパラメータが編集可能の状態でページが作成されます。

Dreamweaverキャプチャ

テンプレートパラメータのvalueを任意の値(bodyに設定したいid名)に変更します。このままページを保存してもidは変更されないので、「修正」→「テンプレート」→「現在のページの更新」をクリック。

Dreamweaverキャプチャ

bodyのidが任意の値に更新されていればOK。これでページ毎にスタイルを切り替えることが可能になります。

Dreamweaverキャプチャ

ただ、テンプレートをネストして作成すると、親のテンプレートでは編集可能な属性が子のテンプレートでは編集不可になるので注意が必要。これについては調べてみましたがよくわからず、今回はひとまず置いておきますw

Dreamweaverを使ってはいるものの、まだまだ試した事のない機能がたくさんあるなー。。

--------- 2009/12/16 追記 ----------

ネストしたテンプレートで属性を編集可能にする方法がわかりました。

ネストしたテンプレート( base.dwt をもとに sub.dwt を作成した場合、sub.dwt )を開き、「修正」→「テンプレートプロパティ」をクリック。

Dreamweaverキャプチャ

表示されたダイアログにある、「ネストされたテンプレートによる制御を許可」にチェック。

Dreamweaverキャプチャ

すると、属性の編集可能部分が以下のように書き替えられます。

Dreamweaverキャプチャ

あとはこのテンプレートからアセットしてページを作成し、属性を編集するとCSSシグネチャの完成!

ちなみにこの方法は、このエントリーを読まれた方がTwitterでネストしたテンプレートでのやり方を質問。その後Twitter上で返答されたものを偶然発見。という経緯で知りました。Twitterすごいw ありがとうございます!

関連するエントリー
CSSシグネチャを初めて知った

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。