[Dreamweaver]コードカラーリングをカスタマイズする

引き続き、コーディングに奮闘中の@cappeeです。

デザイナーのみなさんはDreamweaverのコードカラー指定していますか?

私は今までデフォルトで指定されていた色でやっていたのですが、エンジニアに憧れて黒背景のコードカラーに変更しました。これが結構見やすいです。もちろん色の選択次第ですが。

いつもお世話になっているWebデザインのタネさんで、「Dreamweaverのコードカラーリングまとめ」という記事があったので色々と試して自分なりにしっくりくるものを模索していました。今コレかなという設定をメモしておきます。

黒背景に最適なカラーコードリング

一番コードが見やすいと感じたのは、これまたいつもお世話になっているバシャログ。さんで配布されているSublime Text2と同じ配色のカラーコードリングです。

[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた

HTMLの画面

codecolor [Dreamweaver]コードカラーリングをカスタマイズする

CSSの画面

codecolor2 [Dreamweaver]コードカラーリングをカスタマイズする

女子的にはこのパッションピンクがなんともカワイイです。

最初少しどぎつく感じるかもしれませんが、色がはっきり要素で分かれているので探しているコードが目に入りやすくなりました。設定も簡単なので騙されたと思って一度試してみてください。

Dreamweaverのコードカラーリングの変更方法

こちらの配布先から「Colors.xml」をダウンロードしたら、下記の場所にある同じファイルを念のためバックアップとってから上書きします。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver (バージョン)\ja_JP\Configuration\CodeColoring

Dreamweaverを起動し、Ctrl+Uで「環境設定」を開き、「コードカラーリング」の「デフォルトの背景」を「#272822」に書き換えます。

codecolor3 [Dreamweaver]コードカラーリングをカスタマイズする

テキストのカラーを設定する

上記に加えてひとつだけ設定したのは「テキスト」のカラーです。同じく「環境設定」の「コードカラーリング」から、ドキュメントタイプの「テキスト」を選択し、「カラーリングスキームの編集」ボタンを押します。「テキストカラー」を白「#FFF」に設定して完了です。

codecolor4 [Dreamweaver]コードカラーリングをカスタマイズする

これで.htaccessも問題なく見えます。

Sublime Text2使いこなしたらカッコイイだろうなぁ。ぜひデモご覧になってください。
Sublime Text

Pocket
article clipper [Dreamweaver]コードカラーリングをカスタマイズする