THORの投稿エディタには、マーカー、ラベル、ボタン、ボックスのスタイルが用意されています。CSSがわからない方でも、使用したいアイテムを順番に選んでいくだけで、投稿記事内に設置することができます。
今回は、スタイル使用時のカラーを変更する方法について解説していきたいと思います。
カラーセットで用意されている色見本（一覧）
まずは、カラーセットで用意されている色を一覧にしました。
スタイル（マーカー、ラベル、ボタン、ボックス）を利用しているときに使用でき、文字や背景、ボーダーなどの色を変更することができます。
色見本内の「Vyellow」などの文字は、記事後半の「少しだけ高度なカラーを変更する方法」で使用します。
| ヴィヴィッド(V) | ブライト(B) | ディープ(DP) | ライト(L) | ダル(DL) | ベリーペール(VP) | ダークグレイッシュ(DG) | モノ |
| Vyellow イエロー |
Byellow | DPyellow | Lyellow | DLyellow | VPyellow | DGyellow | white ホワイト |
| Vorange オレンジ |
Borange | DPorange | Lorange | DLorange | VPorange | DGorange | VLgray ベリーライトグレー |
| Vred レッド |
Bred | DPred | Lred | DLred | VPred | DGred | Lgray ライトグレー |
| Vmagenta マゼンタ |
Bmagenta | DPmagenta | Lmagenta | DLmagenta | VPmagenta | DGmagenta | gray グレー |
| Vpink ピンク |
Bpink | DPpink | Lpink | DLpink | VPpink | DGpink | Dgray ダークグレイ |
| Vpurple パープル |
Bpurple | DPpurple | Lpurple | DLpurple | VPpurple | DGpurple | VDgray ベリーダークグレイ |
| Vnavy ネイビー |
Bnavy | DPnavy | Lnavy | DLnavy | VPnavy | DGnavy | black ブラック |
| Vblue ブルー |
Bblue | DPblue | Lblue | DLblue | VPblue | DGblue | |
| Vsky スカイ |
Bsky | DPsky | Lsky | DLsky | VPsky | DGsky | |
| Vturquoise ターコイズ |
Bturquoise | DPturquoise | Lturquoise | DLturquoise | VPturquoise | DGturquoise | |
| Vgreen グリーン |
Bgreen | DPgreen | Lgreen | DLgreen | VPgreen | DGgreen | |
| Vlime ライム |
Blime | DPlime | Llime | DLlime | BPlime | DGlime |
基本的なカラーの変更方法
最初からセットされている「角丸レッドラベル」を例に、色を変更していきたいと思います。「角丸レッドラベル」の設置方法は、投稿エディタ内の スタイル ＞ ラベル ＞ 角丸レッドラベル です。
角丸レッドラベル
文字の色を変更する
STEP１：文字列の色を変更したい部分を選択する
STEP２：セットされている文字色を解除する
「角丸レッドラベル」の場合、文字の色がホワイトでセットされています。まずは、それを解除します。
スタイル ＞ カラーセット ＞ 文字色 ＞ モノトーン にカーソルを合わせます。すると「ホワイト」の背景に色がついています。これは「今、この色を選択していますよ」という印です。「ホワイト」をクリックします。
（もう一度、スタイルから順番にモノトーンまで展開していくと、先ほどまで付いていた背景の色が消えているはずです。）
STEP３：変更する色を選ぶ
変更したい文字列が選択されたままになっていることを確認し、スタイル ＞ カラーセット ＞ 文字色 から好きな色を選びましょう。
角丸レッドラベル（ダークグレイッシュのネイビー）
背景の色を変更する
STEP１：一文字だけ選択する
文字を選択していない状態だと、背景の色を変更できないので一文字だけ選択しておきます。
STEP２：セットされている背景色を解除する
文字の色を変更するときと同様に、「角丸レッドラベル」の場合、背景色にディープトーンのレッドが設定されています。まずはこれを解除します。スタイル ＞ カラーセット ＞ 背景色 ＞ ディープトーン ＞ レッドをクリックすると、下のようなラベルになります。
角丸レッドラベル
STEP３：変更する色を選ぶ
一文字選択している状態で、好きな色を選びます。スタイル ＞ カラーセット ＞ 背景色 ＞ 好きな色 を選んで終了です。
角丸レッドラベル（ライトトーンのオレンジ）
ボーダーの色を変更する
STEP１：一文字だけ選択する
文字を選択していない状態だと、背景の色を変更できないので一文字だけ選択しておきます。
STEP２：セットされているボーダー色を解除する
「角丸レッドラベル」には、ボーダー色としてホワイトがセットされています。しかし、ボーダーのスタイル（実線、破線、点線）を選択していないので表示がされていないのです。
たとえば、ボーダーのスタイルを スタイル ＞ スタイルセット ＞ ボーダー系 ＞ オール点線（中）にしてみると 角丸レッドラベル
このように表示されます。
いったん、ホワイトを解除しておきましょう。スタイル ＞ カラーセット ＞ ボーダー色 ＞ モノトーン ＞ ホワイト をクリック。
STEP３：ボーダーの種類を選択する
一文字選択している状態で、スタイル ＞ スタイルセット ＞ ボーダー系 ＞好きなボーダーを選択しましょう。
角丸レッドラベル（オール破線(中)）
STEP４：ボーダーの色を選択する
一文字選択している状態で、スタイル ＞ カラーセット ＞ ボーダー色 ＞ 好きな色を選びましょう。
角丸レッドラベル（ブライトトーンのオレンジ）
少し高度なカラーを変更方法
基本的なカラーの変更では、エディタのスタイルから選択して完成させるという方法でした。次は、少しだけ高度なカラー変更の方法をご紹介したいと思います。
基本的な方法で変更した「角丸レッドラベル」ですが、デフォルトはこちらのラベル。
角丸レッドラベル
スタイルカラーを変更することで、下のようなラベルになりました。
角丸レッドラベル（ブライトトーンのオレンジ）
このラベルをテキストエディタに切り替えて見てみると、以下のように表示されています。
この中で色に関係があるところは、
「bgc-Lorange」「brc-Borange」「ftc-DGnavy」の3か所です。
これが何を表しているのかというと、
「bgc-Lorange」の「bgc-」は背景色を指定しています。
「brc-Borange」の「brc-」はボーダー色を指定しています。
「ftc-DGnavy」の「ftc-」は文字色を指定しています。
ハイフンから後ろの文字列は、色を表しています。このコードは、この記事のはじめに紹介した色見本に表記されているものです。色見本を見ながら、ハイフン以降を好きなカラーのコードに置き換えれば、簡単に色を変更することが可能です。
スタイル ＞ デフォルトパーツで、ラベルだけを追加した場合は以下のとおり。
デフォルトのラベル
テキストエディタは、<span class=”ep-label”>デフォルトのラベル</span>このようになっています。ここには、bgc-やftc-などが全く入っていませんが、“ep-label”の「”」と「”」のあいだに「bgc-好きなカラー」を追加するだけで変更することができます。
背景をライトトーンのピンク色にする場合、
<span class=”ep-label bgc-Lpink“>ラベルだけ</span>
赤文字部分をテキストエディタで追加すれば、下のようなラベルにすることができます。
デフォルトのラベルがピンクのラベルに
あとがき
基本的な方法と少しだけ高度な方法をご紹介しました。
私自身は、何度もスタイルから選び直すのが面倒くさいので、少し高度な方法を使うことが多いです。高度な方法はちょっとまだ怖いなぁって感じられる方は、基本のやり方を使ってみてくださいね。