THE THOR スタイルで使用するカラーコード一覧表 【 ザ・トール 】

THE THOR には様々なラベルやボタン等が用意されていて便利です。

 

 

THE THOR とは? 『ザ・トール レビュー』

 

 

色を変更したい。そんなとき「スタイル」から設定するのも良いですがテキストエディタでコードを変更するのも便利です。

 

 




 

THE THOR のカラーの種類とコード

THE THOR カラーサンプル

 

それぞれの色味については下にある「THE THOR ショートコードで使うカラーコード一覧表」を確認してください。

 

 


基本色は12色

イエロー / オレンジ / レッド / マゼンタ / ピンク / パープル / ネイビー / ブルー / スカイ / ターコイズ / グリーン / ライム

 

 

コードは以下の通り

 

yellow / orange / red / magenta / pink / purple / navy / blue / sky / turquoise / green / lime

 

※上記コードはバリエーションのコードと併せて使用します。
※大小文字に注意

 

 


トーンのバリエーションが7種類

ヴィヴィッドトーン / ブライトトーン / ディープトーン / ライトトーン / ダルトーン / ベリーペールトーン / ダークグレイッシュトーン

 

 

コードは以下の通り

 

V / B / DP / L / DL / VP / DG

 

※上記コードは基本色のコードと併せて使用します。
※大小文字に注意

 

 

例えば、ヴィヴィッドトーンのレッドのコードは Vred となります。

 

 


白黒モノトーンの種類

 

モノトーンは7種類

 

コードは薄い順に以下の通り

 

white / VLgray / Lgray / gray / Dgray / VDgray / black

 

※こちらは組み合わせずに使います。
※大小文字に注意

 

 

カラーコードをスタイルで使う実例

 

実例を紹介します。

 

テキストにボタンを適用します。

操作手順
スタイル → スタイル → ボタン → ブルーボーダーボタン

これはサンプルテキストです。

 

↑ブルーボーダーボタンの色を変更。テキストエディタを見るとコードは以下のようになっています。

 

<a class=”ep-btn es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-Fbig es-bold es-borderSolidS bgc-white brc-DLblue ftc-DLblue es-BTarrow”>これはサンプルテキストです。</a>

 

 

bgc-white brc-DLblue ftc-DLblueの部分が色を指定しています。ここをテキストエディタで書き換えれば色を変更することができます。

※ビジュアルエディタでの変更ももちろん可能です。

 

 

コードの説明

 

 

試しに青系のボタンを赤系に変更します。

 

これはサンプルテキストです。

 

↑上記のようになりました。コードは以下の通り。今回はblueとなっていた箇所をredに変更しただけです。

 

 <a class=”ep-btn es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-Fbig es-bold es-borderSolidS bgc-white brc-DLred ftc-DLred es-BTarrow”>これはサンプルテキストです。</a>

 

 

THE THOR の特性上、色などを変更する場合に前に指定した設定を解除しなければなりません。テキストエディタで直接変更するとその手間が省けます。

ビジュアルエディタとテキストエディタは状況に応じて使い分けましょう。

 

 

 

あとがき

 

カラーコードの一覧表を作ったので何かの役に立てば嬉しいです。

 

スタイルのボタン等はこれで簡単に色を変更ができます。プリセットパーツはコードを追加して上手くいくものもあれば、反映されないものもあります。

 

 

THE THOR 固有の機能をワードプレスの標準機能と混ぜ合わせると、設定が反映されません。順番としては、THE THOR の固有機能を設定し終わって最後にワードプレス標準の機能を使う。もしくは出来れば使わない、という手順が必要です。

 

 

THE THOR スタイルで使う
 カラーコード一覧表 

ヴィヴィッドトーン
Vyellow
Vorange
Vred
Vmagenta
Vpink
Vpurple
Vnavy
Vblue
Vsky
Vturquoise
Vgreen
Vlime
ブライトトーン
Byellow
Borange
Bred
Bmagenta
Bpink
Bpurple
Bnavy
Bblue
Bsky
Bturquoise
Bgreen
Blime
ディープトーン
DPyellow
DPorange
DPred
DPmagenta
DPpink
DPpurple
DPnavy
DPblue
DPsky
DPturquoise
DPgreen
DPlime
ライトトーン
Lyellow
Lorange
Lred
Lmagenta
Lpink
Lpurple
Lnavy
Lblue
Lsky
Lturquoise
Lgreen
Llime
ダルトーン
DLyellow
DLorange
DLred
DLmagenta
DLpink
DLpurple
DLnavy
DLblue
DLsky
DLturquoise
DLgreen
DLlime
ベリーペールトーン
VPyellow
VPorange
VPred
VPmagenta
VPpink
VPpurple
VPnavy
VPblue
VPsky
VPturquoise
VPgreen
VPlime
ダークグレイッシュトーン
DGyellow
DGorange
DGred
DGmagenta
DGpink
DGpurple
DGnavy
DGblue
DGsky
DGturquoise
DGgreen
DGlime
モノトーン
white
VLgray
Lgray
gray
Dgray
VDgray
black

 

THE THOR 記事一覧

THOR 使う カラー 一覧
呟くのよ・・・私の棒ストが