Dreamweaver でコードのコメントなど、コード要素のカラー(コードカラーリング)をカスタマイズする方法を説明します。

Dreamweaver では、編集/環境設定/インターフェイスを選択し、インターフェイスのカラー設定を変更することができます。

4 つのカラーテーマから選択でき、明るめ、または暗めのコードテーマを選択できます。 

カラーとコードテーマを設定した後、組み込みの main.less ファイルでセレクターを編集することによって、Dreamweaver のコードカラーをカスタマイズすることができます。

Dreamweaver CC 2017 のコードカラーリングについて

Dreamweaver CC 2017 のコードカラーリングは、main. less テーマファイル内にあるセレクターを使用して制御します。

Dreamweaver CC 2017 のコードカラーリングをカスタマイズするには、次の操作をおこないます。

  1. Dreamweaver の初期設定のカラーおよびコードテーマの環境設定を行います。 
  2. 既存のコードテーマをベースとして使用してコードテーマを作成します。
  3. 新しいコードテーマを編集します。
  4. 変更する必要があるセレクターを把握し、他のコード要素への影響を理解します。
  5. main.less テーマファイルでセレクターを編集し、変更を保存します。

カラーテーマとコードテーマの設定

Dreamweaver の起動時に、環境設定に応じたカラーテーマを選択できます。この環境設定はいつでも変更できます。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 左のカテゴリーリストから「インターフェイス」を選択します。

  3. カラーテーマリストからテーマを選択します。 

  4. インターフェイステーマを設定したら、コードテーマを設定します。

    暗めのテーマと明るめのテーマから選択できます。このテーマを新しい名前で保存し、さらにテーマをカスタマイズできます。

    初期設定のコードテーマ
    初期設定のコードテーマ

  5. 「適用」をクリックして変更を保存します。

コードテーマのカスタマイズ

コードテーマを選択した後、新しい名前でコードテーマを保存して編集することによって、コードカラーリングをカスタマイズします。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 明るめまたは暗めのコードテーマを選択し、プラスアイコンをクリックして、新しい名前でテーマを保存します。

    注意:

    初期設定の明るめのコードテーマと暗めのコードテーマは編集できません。したがって、これらのテーマのコピーを編集する必要があります。作成した新しいテーマはいつでも編集することができます。

    テーマをコピーして編集する
    テーマをコピーして編集する

  3. 新しい名前で初期設定のコードテーマを保存します。

    初期設定のコードテーマからコードテーマを作成する
    初期設定のコードテーマからコードテーマを作成する

  4. 新しく作成したコードテーマを選択し、編集アイコンをクリックします。

    main.less ファイルが Dreamweaver で開き、テーマのセレクターを編集してコードカラーリングをカスタマイズすることができます。

    main.less ファイルを保存すると、コードビューは新しいカラーを使用して更新されます。

セレクターについて

コード要素のカラーを変更するには、main.less ファイルでセレクターのプロパティを編集します。

ただし、main.less ファイル内のセレクターの編集を始める前に、各種のセレクターが意味するものや影響を受けるコード要素について理解しておくことが重要です。HTML、CSS、JavaScript および PHP ファイル内でこれらのセレクターによって影響を受けるコード要素については、次の表を参照してください。

セレクター HTML CSS JavaScript PHP
.cm-atom    などのエンティティ名 Hex、rgb または HSL 形式のカラー、定義済みの属性値(strong、none、auto、inherit など) true、false、null、undefined、NaN、Infinity True、False、Nullおよびマジック定数(__LINE__、__DIR__ など)
.cm-attribute  属性名 メディアタイプ(all、braille、print、screen など)    
.cm-bracket タグのカッコ(<、>、/>、</ など)      
.cm-builtin    ID セレクター   組み込み関数(htmlspecialchars、trim、substr など)
.cm-comment  コメント コメント コメント コメント
.cm-def    「@ ルール」 変数、関数定義および関数パラメーター  関数定義の関数名 
.cm-error  開始タグのない終了タグ
引用符のない属性値
中カッコ { や } の不足、引用符のないプロパティ値、または認識されないプロパティ名によるエラー    
.cm-keyword    カラー名、!important、@media 内のキーワード(and、only など) 制御構造のキーワード(if、else、...)、in、of、from、default、public、private など キーワード(function、if、else、new、echo、isset など)
.cm-meta  <!DOCTYPE> 宣言 ブラウザー固有の接頭辞(-webkit-、-o- など) スプレッド構文での省略記号。例:myFunction(...iterableObj); <!DOCTYPE> 宣言および PHP 開始タグと終了タグ(<?php、?>)
.cm-number    単位付きまたは単位なしの任意の数 任意の数(12、2.1、123e-5、0x11、0b11、0o11 など) 任意の数(12、2.1、0x11、0b11、0123、5.0E+19 など)
.cm-operator      演算子:+、-、*、+=、!==、&&、>>> など 演算子(===、&&、!、=>、+、- など)
.cm-property    プロパティ名 オブジェクトのプロパティまたはメソッド  
.cm-qualifier    クラスセレクター    
.cm-string  属性値 通常の文字列(url() の呼び出しに渡される文字列、引用符で囲まれたフォント名など) リテラル文字列 リテラル文字列
.cm-string-2    非標準プロパティ(scrollbar-arrow-color、scrollbar-base-color など) 正規表現  
.cm-tag  タグ名 タグセレクター    
.cm-variable    引用符のないフォント名 グローバル変数/関数、クラス参照 ユーザー定義関数名、インターフェイス/クラス参照、クラスプロパティ、キャスト 
.cm-variable-2    カスタムプロパティ(main-bg-color など) スコープ付き変数/関数参照 ユーザー定義および定義済みの変数、パラメーターまたは属性
.cm-variable-3   疑似クラス(:hover、:focus など)および疑似エレメント(::first-letter、::selection など)    

次の表に、main.less ファイルのセレクターによって影響を受ける Dreamweaver のテンプレートとライブラリを示します。

クラス テンプレート(DWT) ライブラリ(LBI)
.cm-templateComment テンプレートコメント  
.cm-templateAttrVal テンプレートのメントの属性値  
.cm-instanceParam InstanceParamコメントおよび属性  
.cm-instanceParamAttrVal InstanceParam属性値  
.cm-libraryItem   ドキュメント内の挿入されたライブラリ。例:.cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

他のコードファイルへのセレクターの影響について

main.less テーマファイル内のセレクターがコードファイル(HTML、CSS、JavaScript、PHP 以外)のコード要素にどのように影響するかを理解するには、Token Inspector をダウンロードして使用します。

ダウンロード

  1. Token Inspector をダウンロードして展開します。

  2. Google Chrome で TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html ファイルを開きます。

    TokenInspector ユーティリティは、次のセクションで構成されています。

    • コードエディター
    • モードを変更するためのオプション
    • 右側のセレクターのリスト
    セレクターを理解するために Token Inspector を使用する
    セレクターを理解するために Token Inspector を使用する

    A. コードエディター B. モードオプションの変更 C. セレクターのリスト 
  3. コードエディターでファイルの内容をコピー&ペーストします。

  4. ファイル拡張子を入力し、モードの変更をクリックして、ファイルのモードを変更します。

    例えば、HTML ファイルの場合はファイル拡張子を html に変更します。モードが変更されるとページが更新され、ページの最上部に現在のモードが表示されます。

    Token Inspector でのモードの表示
    Token Inspector でのモードの表示

  5. 外観を変更するコード要素を選択します。

    Token Inspector で、セレクターがハイライト表示されます。

  6. (オプション)個々のセレクターを選択すると、コードファイル内でセレクターに影響を受けたコード要素がわかります。

  7. 編集して更新するセレクターを書き留め、Token Inspector を閉じます。

main.less ファイル内のセレクターの編集

編集するセレクターを認識できたので、main.less ファイルに変更を加えることができます。

  1. 次のコメントが表示されるまで、ファイルの末尾に移動します。

    /* Custom code colors or overrides should start after this line */

  2. カラーを編集するコード要素のセレクターを入力します。次の例のような構文を使用します。

    .cm-tag {color: #00D0D0; }

  3. 複数のエレメントに同じカラーを割り当てる場合は、複数のセレクターをグループ化します。次の例では、コンマで区切られた複数のセレクターに単一のカラーが割り当てられます。

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. コードカラーリングのカスタマイズをファイルタイプ固有にするには、次の例に示すように、ファイルタイプセレクターでコード要素セレクターを囲みます。

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. 変更を加えたら、ファイルを保存します。

    Dreamweaver によって、開いているすべてのドキュメントのコードビューの表示が新しいカラーで更新されます。

注意:

変更部分に構文エラーまたは未定義の変数がある場合、Dreamweaver はカスタムコードの変更内容をロードせずに、初期設定の暗めのコードテーマに戻します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー