Dreamweaverを見直そう!!Dreamweaverのおすすめの7つの設定を紹介

コーディング作業でもっとも使われているソフトがAdobe Dreamweaverでしょう。でもDreamweaverは有料のソフトだし、フリーでもっと使いやすいエディタがあるし、実はあまり使いこなせていない・・・という方は多いと思います。PhotoshopやIllustratorのおまけ位にしか考えていない人もいると思いますが、今回のエントリーはそんなDreamweaverを使う上で、設定した方がいいおすすめの設定7つを紹介します。

1.Dreamweaver起動時の設定

まず最初の設定はDreamweaverの起動時の動作をカスタマイズします。
「環境設定」→「一般」→「ドキュメントオプション」
へと進みます。
ここで
・[ようこそ]画面を表示
オフにします。
そして、
・起動時にドキュメントを開く
はオンにします。

20140202_001

個人的にはようこそ画面はいらないかなーという立場です。立ち上がったらすぐに作業を開始したいのです。そして、「起動時にドキュメントを開く」にチェックを入れる事で、前回のDreamweaverの終了時に開いていたファイルが、起動時に自動的に立ち上がるようになります。

2.フォントの設定

コード画面で使用するフォントを好きなフォントに変更しましょう。
コーディングやプログラミング向けのフォントはネットで検索して、あらかじめOSにインストールしておきましょう。私のおすすめのフォントは「Consolas」です。それとこれは完全にお好みですが、フォントサイズも大きくしたり小さくしたりすることができます。私のフォントの設定は、
コードビュー 「Consolas」 サイズ「12px(中)」
にしています。

20140202_002

3.コードカラーリング

コード画面でタグ名、関数名、予約語、などの色分けをしてくれる設定です。自分でちまちま設定することもできるのですが、すでに複数の方が作成されたコードカラーリングのファイルがあるので、それを使うのもありです。

以下のサイトがDreamweaverのさまざまなコードカラーリングを紹介しています。
・Dreamweaverのコードカラーリングまとめ

さて、このコードカラーリングというやつですが、どうなっているのかというと、「Colors.xml」というxmlファイルに設定が記述されています。上記サイトなどからダウンロードしたColors.xmlを自分のPCのDreamweaverの特定のフォルダにコピーするだけで、コードカラーリングを変更することができます。Colors.xmlの設置場所は、

C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\CodeColoring

です。(CS6の場合)

あとはコードの背景色のカスタマイズです。
これは完全な真っ黒(#000000)よりも、ほんの気持ち明るい黒色(#222222)などがよろしいと思います。

4.コードヒント

次はコードヒントの設定です。ここも各自好きな設定でよろしいのですが、個人的におすすめの設定が「終了タグ」の設定です。デフォルトでは「”</” の入力後」となっていますが、ここは「開始タグ”>”の入力後」にするのがお勧めです。

20140202_003< 最初の「"</" の入力後」の設定だと当たり前ですが、 「 <span class="hogehoge">aaaa</ 」 まで入力しないと、「</span>」が補完されませんが、「開始タグ">“の入力後」にすると

「 <span>」

まで入力すると自動的に

「<span></span>」

としてくれます。これはいいですよ!

5.CSSパネル

さて、コード画面のカスタマイズはここまでにして、ここからはDreamweaverの他の機能をカスタマイズしちゃいましょう。「CSSスタイルシート」の「CSSパネルのダブルクリック時」の設定を変更します。

20140202_004

デフォルトでは「CSSダイアログを使用して編集」

となっています。でもコーディングをバシバシやってる人にとってはCSSダイアログなんて、まどろっこしいだけですよね。そこで、CSSパネルのプロパティをダブルクリックしたときに、直接CSSファイルの変更箇所をコードビューに表示させることができます。

設定を

「コードビューを使用して編集」

へ変更します。
これでCSSファイルをコードビューで直接変更できるようになります。

6.ファイルタイプ/エディター

サイドバーに表示されている「ファイル」ウィンドウに関する設定を行います。ここでは拡張子が「.jpg」「.png」「.gif」の画像ファイルをダブルクリックしたときに起動するアプリケーションを選択します。

20140202_005

個人的にDreamweaverでコーディングするときに画像ファイルを見るのって、ちょっとした確認のために開くだけなので、PhotoshopとかFireworksとかが起動して欲しくないのですよね。ということで、これらの画像ファイルをダブルクリックするときに立ち上げるソフトを起動の速い普段使用しているブラウザを指定することにします。私はGoogle Chromeでこれらの画像ファイルを開くように設定しています。

7.サイトの設定

最後にファイルウィンドウで表示させるローカルファイルの場所を変更します。
DreamweaverにはデフォルトでFTP機能がありますが、なぜかローカルファイルの表示場所が右なんですよね。Dreamweaverを使い始める前にFFFTPを使っていたのですが、ローカルファイルの表示場所が左だったので、ちょっと違和感を感じました。というわけで、DreamweaverのFTPウィンドウでローカルファイルを左に表示させることにしましょう。

20140202_006

以上7つがDreamweaverのおすすめの設定です。
業務や趣味でDreamweaverを使っている人にとって参考になれば、うれしく思います。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

Adobe | Posted on 2014/02/02 14:54

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。