エディタ内スタイルで使用するカラーセット一覧と使い方

この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。

投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。

目次

カラーセット全91色　一覧

ヴィヴィッド(V) ブライト(B) ディープ(DP) ライト(L) ダル(DL) ベリーペール(VP) ダークグレイッシュ(DG) モノ

Vyellow
#FFF100
イエロー

 Byellow
#FFF338		 DPyellow
#CBBD00		 Lyellow
#FFF89A		 DLyellow
#CAC04E		 VPyellow
#FFFDED		 DGyellow
#675F00		 white
#FFFFFF
ホワイト
Vorange
#F49801
オレンジ		 Borange
#F6AD3A		 DPorange
#BF7601		 Lorange
#FBCE8A		 DLorange
#C39043		 VPorange
#FEF5E8		 DGorange
#633C00		 VLgray
#D8D8D8
ベリーライトグレー
Vred
#E60112
レッド		 Bred
#EA5532		 DPred
#B60105		 Lred
#F39C76		 DLred
#BA5536		 VPred
#FEEDE3		 DGred
#5f0100		 Lgray
#B2B2B2
ライトグレー
Vmagenta
#E5004F
マゼンタ		 Bmagenta
#E9536B		 DPmagenta
#B5003C		 Lmagenta
#F29C9F		 DLmagenta
#BA5460		 VPmagenta
#FDEDEC		 DGmagenta
#5F0017		 gray
#8C8C8C
グレー
Vpink
#E4017F
ピンク		 Bpink
#E95098		 DPpink
#B50165		 Lpink
#F29FC3		 DLpink
#BA5584		 VPpink
#FDEFF5		 DGpink
#600033		 Dgray
#656565
ダークグレイ
Vpurple
＃920883
パープル		 Bpurple
#A54A98		 DPpurple
＃740169		 Lpurple
#C490BF		 DLpurple
#EC4B82		 VPpurple
#F3EAF4		 DGpurple
#3E0036		 VDgray
#3F3F3F
ベリーダークグレイ
Vnavy
#1C1E84
ネイビー		 Bnavy
#4C4398		 DPnavy
#14116E		 Lnavy
#8F82BC		 DLnavy
#4E4282		 VPnavy
#E8E6F3		 DGnavy
#08003A		 black
＃191919
ブラック
Vblue
#0068B7
ブルー		 Bblue
#2B71B8		 DPblue
＃005293		 Lblue
#87ABDA		 DLblue
#3970A2		 VPblue
#E9EEF9		 DGblue
#00274F		  
Vsky
#00A0E9
スカイ		 Bsky
#00B0EC		 DPsky
#0081BA		 Lsky
#7ECFF5		 DLsky
#1894BE		 VPsky
#EAF6FE		 DGsky
＃004462		  
Vturquoise
#009E96
ターコイズ		 Bturquoise
#00ADA9		 DPturquoise
#007F78		 Lturquoise
#83CCC9		 DLturquoise
#1D928F		 VPturquoise
#EAF5F4		 DGturquoise
＃004340		  
Vgreen
#009944
グリーン		 Bgreen
#0BA95F		 DPgreen
#007C36		 Lgreen
#88C997		 DLgreen
#218F59		 VPgreen
#EBF5EB		 DGgreen
＃004215		  
Vlime
#8EC31F
ライム		 Blime
#A9CF52		 DPlime
#6F9B12		 Llime
#CCE199		 DLlime
#8EA953		 BPlime
#F2F7E5		 DGlime
＃395104		  

 

アルファベットは、テーマのスタイルシートで設定されている各カラーの名称です。高度な使い方で利用できます。

基本的なカラーセットの使い方

カラーセットは、投稿や固定ページなどを作成・編集する際に使用でき、ビジュアルエディタ内の「スタイル」の中にあります。基本的には、ラベル、ボタン、ボックスなどのスタイルを使用しているときに利用できます。

投稿エディタ　スタイル＞カラーセット

 

例として、デフォルトパーツのラベルを使って、背景色を変更してみたいと思います。

デフォルトパーツ・ラベル

 

背景色を変更する

１．ラベル内にカーソルを合わせておきます。

ラベル内にカーソルを合わせる

 

２．スタイル ＞ カラーセット ＞ 文字色 ＞ 好きな色を選択します。

「ライトトーンのピンク」に変更したいと思います。「スタイル」をクリックし、カラーセット、背景色、ライトトーンの順番にカーソルを合わせていき、最後にピンクをクリックします。

ラベルの背景をライトトーンピンクにする

３．背景色を「ライトトーン・ピンク」に変更できました。

デフォルトパーツ・ラベル

 

高度な使い方

カラーセット一覧には、アルファベットのカラー名も表示しています。これは、テーマ内に設定されているスタイルシードのコードになります。

「どこを置き換えれば変更できるのか？」というポイントさえ押さえておけば、テキストエディタ内で簡単にカラーの変更が行えるようになります。

背景色は、bgc-***で指定されている

たとえば、さきほどの「デフォルトパーツ・ラベル」について見ていきましょう。

＝ ビジュアルエディタでの見た目 ＝

 デフォルトパーツ・ラベル

 

これをテキストエディタで見てみると、

<span class=”ep-label bgc-Lpink”>デフォルトパーツ・ラベル</span>

と表示されます。

<span>はHTML言語で、<span>～</span>で囲んだ部分を1つのグループとみなします。「class=””」の「”」と「”」の間に、スタイルシートで設定されているスタイルの名前を入れていきます。

ザ・トールでは、ラベルには「ep-label」という名前が付けられています。同じように、スタイル利用時に背景色を指定する場合、「bgc-」+「カラーの名前」というルールが設けられています。

 

では、もう一度ラベルを見てみましょう。

<span class=”ep-label bgc-Lpink“>デフォルトパーツ・ラベル</span>

背景色にライトトーン・ピンクを選択したので、bgc-の後ろに「Lpink」という名前が入っています。

例えば、

ディープトーン・レッドへ変更したい場合には、どうすればよいのでしょうか？
カラーセットの一覧表からディープトーン・レッドのスタイル名を探します。ディープトーン・レッドは「DPred」。「bgc-Lpink」の「Lpink」部分を「DPred」に書き換えると、背景色が変更されます。

<span class=”ep-label bgc-DPred“>デフォルトパーツ・ラベル</span>

デフォルトパーツ・ラベル

 

関連記事
エディターのスタイル【高度な使い方】

この記事では、エディタスタイルの高度な使い方について、解説しています。 高度な使い方とはどんな使い方？ スタイルの名前を利用する。 テキストエディタ（HTML）で装飾を編集する。 ビジュアルエディタで編集した内容を確認する[…]

エディタのスタイル【高度な使い方】
スポンサーリンク