山形を拠点に活動するフリーランスWEBデザイナーのサイト兼備忘録です

Dreamweaver 2017にコードカラーリングが復活!…ちょっとクセがあるけどねぇ…

前回の記事で、メジャーバージョンアップの際、コードカラーリングが消えてしまった…と嘆いていたところ、今朝方のマイナーバージョンアップでなんと復活していました!

やり方は、Dreamweaver→「環境設定」(Winは「編集」→「環境設定」)→「インターフェイス」から入ります。そう、アプリケーションの明暗を設定するところです。

←これね

その下の「コードテーマ」に+ーと鉛筆マークが増えているかと思います。
「+」を押せば、テーマの基準を「Dark」と「Light」から選択し、テーマ名をつける画面に映ります。まずはどっちをベースに作るかという感じなんですね。

とりあえずこれで、自分のテーマ…ん?
CC2015の時のコードカラーいれる画面は?というボケはさすがにやらかしません。「鉛筆」マークを使えば編集…ほげぇ!

LESSじゃねーか!まさか自分自身のカラーリングまでコードでやるとは…
まーた山のように英語が見えるよ…とはいえ、SASSを少しかじったおかげで、すんなりと入り込めそう(?)

基本となるコードのクラス名はここです
/* Color Theme Selectors & Color Values */
直訳で「色のテーマのセレクタと色の値」という部分の .cm- から始まるコードです。
CSSを弄れる人なら即わかる color:#xxxxxx; をいじればクラスに応じた部分が変更できます。

この部分は基本的なコードの変更であり、じゃあ、コードの種類に応じて変更する場合はどうするの?ということになるのですが、そこはLESSです。先ほどのコードを内側にインデントして、一番外側にコードの種類をクラスとして記述します。

「Dark」テーマならPHP、Javascript、CSS・SCSS・LESSの記述がすでにあり、HTMLは内側のコードが空ですが、ガワは用意されています。他のコードも、ちょっと上のコメントアウトされてるあたりに、このクラスで用意してねという一覧があります。

また、デフォルトでは@background@foreground という2つのベースカラーが用意されていますが、これも独自の色をまとめて追加する場合、@なんとかでコードを追加すれば共通の色を設定していくことができます。

また、これ自体、右クリック→「クイック編集」でカラーピッカーを出して色を決めることができるので、直感派でも安心!(?)

ちょっと英語を読み進めるのは大変ですが、Dreamweaverを自分の色に染めて、目に優しくするもよし、奇抜なカラーで他のコーダーを出し抜くもよし、あなた色に染めちゃってみてください!

投稿日時:

最終更新:


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

※コメントは承認制となっています。管理人の承認を得て初めて掲載されます。
※コメントには以下の HTML タグと属性のみ使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください