Dreamweaverの活用法、HTML・CSSなどのコーディング技術を発信する、クリエイティブホープのマークアップエンジニアによるBlog(ブログ)です。

プロフィール

(株)クリエイティブホープ
Webインテグレート事業部
Webクラフトユニット
マークアップエンジニア
藤田 洋正(fujita hiromasa)

昼夜を問わずHTML、CSS、ブラウザとの格闘に明け暮れている。

Dreamweaverのウィンドウをカスタマイズする方法

2009年
1月29日

今回は、「Dreamweaverのテンプレートのプロパティを変更するウィンドウ」のカスタマイズ方法について解説します。

ただし、注意点が2点。

  • カスタマイズに関しては、ご自身の責任において作業を行ってください。
    弊社ではいかなる内容においても責任を負いかねます。
  • 必ず該当ファイルのバックアップをとってから作業を行ってください。

きっかけは、弊社のスタッフの「ここの幅が狭くて使いづらい!」という意見。
「ここの幅」というのは、下記の画像の赤い枠の箇所です。

幅はCSSで設定されているようなので、該当する箇所のCSSの記述を変更すれば変更可能です。
手順を説明します。

(1)まず、今回編集するファイルのバックアップをとってください。
該当ファイルは「TemplateParams.htm」と「fields.css」の計2つのファイルです。
ファイルの保存場所は下記の通りとなります。

※下記は、CドライブのProgram Filesにインストールした場合のファイルの場所です。

・HTML「TemplateParams.htm」

[WindowsのDreamweaver 8の場合]

C:\Program Files\Macromedia\Dreamweaver 8\configuration\Commands\TemplateParams.htm

[WindowsのDreamweaver CS3の場合]

C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Commands\TemplateParams.htm

・CSS「fields.css」

[WindowsのDreamweaver 8の場合]

C:\Program Files\Macromedia\Dreamweaver 8\configuration\fields.css

[WindowsのDreamweaver CS3の場合]

C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\fields.css

(2)次に、CSSの編集を行います。
該当するclassは「medTField」というclassです。
このclassは複数個所で使用されているので、新しいclassを作成しましょう。

ここでは「medTField2」としました。(安易な名称ですが・・・)
下記のソースを「fields.css」に追記してください。
widthは250pxにしました。

.medTField2 {width:250px}

(3)次に、HTMLの編集を行います。
下記のソースに(2)で作成したclassを追記します。

<INPUT NAME="textField" TYPE="text" class="medTField" onBlur="updateUI('textField')" VALUE="">

追記した後のソースは下記のようになります。
widthを上書きすることになりますね。

<INPUT NAME="textField" TYPE="text" class="medTField medTField2" onBlur="updateUI('textField')" VALUE="">

以上で作業は完了です。

トラックバック

このブログ記事に対するトラックバックURL

http://blog.creativehope.co.jp/mt/mt-tb.cgi/76