マニュアル キャンセル

コードカラーリングのカスタマイズ

 

 

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

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

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

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

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

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 ファイル内のセレクターの編集を始める前に、テーマファイル内のコメントや指示を読んでおいてください。編集するセレクターがわからない場合は、次のリソースを参照してください。

  • セレクターについて - 特定のセレクターによって影響を受けるコード要素に関する情報を記載した参照テーブル
  • Token Inspector の使用 - Token Inspector を使用して、特定のファイルをインスペクトし、特定のセレクターの影響を受けるコード要素をハイライト表示します。
  • コメントのコードカラーを編集するには、またはペアになったタグのハイライト表示のカラーを調整するには、コードカスタマイズの例に表示されたサンプルのコードスニペットを参照してください。

編集するセレクターを確認できたので、main.less ファイルに変更を加えましょう。

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

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

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

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

    注意:

    1 つのファイル内に複数のコード言語があり、そのコードカラーによって各言語を識別したい場合は、コードが混在しているファイルのコードカラーのカスタマイズを参照してください。

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

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

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

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

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

注意:

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

コードが混在しているファイルのコードカラーのカスタマイズ

HTML/CSS、HTML/PHP、または HTML/JavaScript などの混合モードファイル(1 つのファイルに複数のコーディング言語が含まれている場合)を使用する場合、次の方法でコードカラーをカスタマイズできます。

  1. コードテーマのカスタマイズに記載された手順に従って、カスタムコードテーマを作成します。新しいテーマを選択して適用します。

  2. Dreamweaver を終了します。

  3. package.json をテキストエディターで開きます。

    Windows の場合: %appdata%¥Adobe¥Dreamweaver CC 2017¥ja_JP¥Configuration¥Brackets¥extensions¥user¥¥

    Mac の場合: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/ja_JP/Configuration/Brackets/extensions/user//

    theme{} に次の行を追加します。

    "addModeClass": true

    package.json ファイルの編集
    package.json ファイルの編集

  4. Dreamweaver を開き、編集/環境設定/インターフェイスを選択し、新しいテーマを選択して、編集アイコンをクリックします。

  5. モード固有のスタイルを main.less ファイルの末尾に追加します。

    次の表に示されているセレクターを使用して、対応するファイル形式のコードカラーを編集します。

    セレクター

    コードファイル形式

    .cm-m-clike

    PHP

    .cm-m-css

    CSS、Less

    .cm-m-javascript

    JavaScript

    .cm-m-xml

    HTML、XML

    例えば、CSS でタグ名のコードカラーを、HTML または PHP でスタイルタグをカスタマイズするには、次の構文を使用します。

    .cm-tag {color: #BD46BD;}
    .cm-m-css.cm-tag {color: #38D08B;}
    .cm-tag {color: #BD46BD;} .cm-m-css.cm-tag {color: #38D08B;}
    .cm-tag {color: #BD46BD;} 
    .cm-m-css.cm-tag {color: #38D08B;}
  6. main.less ファイルを保存します。 

    コードカラーの変更がコードファイルに反映されます。

コードカスタマイズの例

様々なシナリオでコードカラーをカスタマイズする方法を以下に例をあげて紹介します。

ペアになったタグのハイライト表示のカラーの調整

main.less ファイルで、次のコードスニペットを検索し、カラーを調整します。

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
/* Ensure visibility against gray inline editor background */
background-color: #B53A3A;
color: #fff!important;
.CodeMirror-matchingbracket, .CodeMirror-matchingtag { /* Ensure visibility against gray inline editor background */ background-color: #B53A3A; color: #fff!important;
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;
注意:

次のコードスニペットは、テーマによって異なります。テーマによっては、含まれていない場合があります。

コードのコメントのカラーの調整

main.less ファイルで、次のコードスニペットを検索し、カラーを調整します。

.cm-comment {color: #717171; font-style: italic;}
.cm-comment {color: #717171; font-style: italic;}
.cm-comment {color: #717171; font-style: italic;}

セレクターについて

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

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

また、Token Inspector を使用して、特定のセレクターによって影響を受けるコード要素を把握することもできます。

セレクター HTML CSS JavaScript PHP
.cm-atom    などのエンティティ名 16 進数、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; }

次の表に、1 つのファイルに複数の言語が存在するシナリオでのコードカラーのカスタマイズ時に使用するセレクターを示します。

セレクター

コードファイル形式

.cm-m-clike

PHP

.cm-m-css

CSS、Less

.cm-m-javascript

JavaScript

.cm-m-xml

HTML、XML

Token Inspector の使用

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

  1. Google Chrome を使用して Token Inspector を開きます。

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

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

    A. コードエディター B. モードオプションの変更 C. セレクターのリスト 

  2. コードエディターでファイルの内容をコピー&ペーストします。

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

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

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

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

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

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

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

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合