2020年1月30日より、サイトURLを「kohamama.com」から「mammaridea.net」へ変更しました。

THOR ビジュアルエディタのスタイルカラーを変更する方法(カラー一覧あり)

THORの投稿エディタには、マーカー、ラベル、ボタン、ボックスのスタイルが用意されています。CSSがわからない方でも、使用したいアイテムを順番に選んでいくだけで、投稿記事内に設置することができます。

今回は、スタイル使用時のカラーを変更する方法について解説していきたいと思います。

カラーセットで用意されている色見本(一覧)

まずは、カラーセットで用意されている色を一覧にしました。

スタイル(マーカー、ラベル、ボタン、ボックス)を利用しているときに使用でき、文字や背景、ボーダーなどの色を変更することができます。

色見本内の「Vyellow」などの文字は、記事後半の「少しだけ高度なカラーを変更する方法」で使用します。

ヴィヴィッド(V)ブライト(B)ディープ(DP)ライト(L)ダル(DL)ベリーペール(VP)ダークグレイッシュ(DG)モノ
Vyellow
イエロー
ByellowDPyellowLyellowDLyellowVPyellowDGyellowwhite
ホワイト
Vorange
オレンジ
BorangeDPorangeLorangeDLorangeVPorangeDGorangeVLgray
ベリーライトグレー
Vred
レッド
BredDPredLredDLredVPredDGredLgray
ライトグレー
Vmagenta
マゼンタ
BmagentaDPmagentaLmagentaDLmagentaVPmagentaDGmagentagray
グレー
Vpink
ピンク
BpinkDPpinkLpinkDLpinkVPpinkDGpinkDgray
ダークグレイ
Vpurple
パープル
BpurpleDPpurpleLpurpleDLpurpleVPpurpleDGpurpleVDgray
ベリーダークグレイ
Vnavy
ネイビー
BnavyDPnavyLnavyDLnavyVPnavyDGnavyblack
ブラック
Vblue
ブルー
BblueDPblueLblueDLblueVPblueDGblue
Vsky
スカイ
BskyDPskyLskyDLskyVPskyDGsky
Vturquoise
ターコイズ
BturquoiseDPturquoiseLturquoiseDLturquoiseVPturquoiseDGturquoise
Vgreen
グリーン
BgreenDPgreenLgreenDLgreenVPgreenDGgreen
Vlime
ライム
BlimeDPlimeLlimeDLlimeBPlimeDGlime

 

基本的なカラーの変更方法

最初からセットされている「角丸レッドラベル」を例に、色を変更していきたいと思います。「角丸レッドラベル」の設置方法は、投稿エディタ内の スタイル > ラベル > 角丸レッドラベル です。

 

角丸レッドラベル

 

文字の色を変更する

STEP1:文字列の色を変更したい部分を選択する

ラベルの文字を選択

 

STEP2:セットされている文字色を解除する

「角丸レッドラベル」の場合、文字の色がホワイトでセットされています。まずは、それを解除します。

スタイル > カラーセット > 文字色 > モノトーン にカーソルを合わせます。すると「ホワイト」の背景に色がついています。これは「今、この色を選択していますよ」という印です。「ホワイト」をクリックします。

文字の色を解除する

 

(もう一度、スタイルから順番にモノトーンまで展開していくと、先ほどまで付いていた背景の色が消えているはずです。)

 

STEP3:変更する色を選ぶ

変更したい文字列が選択されたままになっていることを確認し、スタイル > カラーセット > 文字色 から好きな色を選びましょう。

角丸レッドラベル(ダークグレイッシュのネイビー)

 

背景の色を変更する

STEP1:一文字だけ選択する

文字を選択していない状態だと、背景の色を変更できないので一文字だけ選択しておきます。

一文字だけ選択

 

STEP2:セットされている背景色を解除する

文字の色を変更するときと同様に、「角丸レッドラベル」の場合、背景色にディープトーンのレッドが設定されています。まずはこれを解除します。スタイル > カラーセット > 背景色 > ディープトーン > レッドをクリックすると、下のようなラベルになります。

角丸レッドラベル

 

STEP3:変更する色を選ぶ

一文字選択している状態で、好きな色を選びます。スタイル > カラーセット > 背景色 > 好きな色 を選んで終了です。

角丸レッドラベル(ライトトーンのオレンジ)

 

ボーダーの色を変更する

STEP1:一文字だけ選択する

文字を選択していない状態だと、背景の色を変更できないので一文字だけ選択しておきます。

一文字だけ選択

 

STEP2:セットされているボーダー色を解除する

「角丸レッドラベル」には、ボーダー色としてホワイトがセットされています。しかし、ボーダーのスタイル(実線、破線、点線)を選択していないので表示がされていないのです。

ボーダーホワイト

たとえば、ボーダーのスタイルを スタイル > スタイルセット > ボーダー系 > オール点線(中)にしてみると 角丸レッドラベル

このように表示されます。

 

いったん、ホワイトを解除しておきましょう。スタイル > カラーセット > ボーダー色 > モノトーン > ホワイト をクリック。

 

STEP3:ボーダーの種類を選択する

一文字選択している状態で、スタイル > スタイルセット > ボーダー系 >好きなボーダーを選択しましょう。

角丸レッドラベル(オール破線(中))

 

STEP4:ボーダーの色を選択する

一文字選択している状態で、スタイル > カラーセット > ボーダー色 > 好きな色を選びましょう。

角丸レッドラベル(ブライトトーンのオレンジ)

スポンサーリンク

少し高度なカラーを変更方法

基本的なカラーの変更では、エディタのスタイルから選択して完成させるという方法でした。次は、少しだけ高度なカラー変更の方法をご紹介したいと思います。

基本的な方法で変更した「角丸レッドラベル」ですが、デフォルトはこちらのラベル。

角丸レッドラベル

 

スタイルカラーを変更することで、下のようなラベルになりました。

角丸レッドラベル(ブライトトーンのオレンジ)

 

このラベルをテキストエディタに切り替えて見てみると、以下のように表示されています。

<span class=”ep-label es-radius es-RpaddingSS es-LpaddingSS bgc-Lorange es-borderDashedM brc-Borange ftc-DGnavy”>角丸レッドラベル(ブライトトーンのオレンジ)</span>

 

この中で色に関係があるところは、

「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>

赤文字部分をテキストエディタで追加すれば、下のようなラベルにすることができます。

デフォルトのラベルがピンクのラベルに

 

あとがき

基本的な方法と少しだけ高度な方法をご紹介しました。

私自身は、何度もスタイルから選び直すのが面倒くさいので、少し高度な方法を使うことが多いです。高度な方法はちょっとまだ怖いなぁって感じられる方は、基本のやり方を使ってみてくださいね。

スポンサーリンク