THE THOR には様々なラベルやボタン等が用意されていて便利です。
色を変更したい。そんなとき「スタイル」から設定するのも良いですがテキストエディタでコードを変更するのも便利です。
THE THOR のカラーの種類とコード
それぞれの色味については下にある「THE THOR ショートコードで使うカラーコード一覧表」を確認してください。
基本色は12色
イエロー / オレンジ / レッド / マゼンタ / ピンク / パープル / ネイビー / ブルー / スカイ / ターコイズ / グリーン / ライム
コードは以下の通り
※上記コードはバリエーションのコードと併せて使用します。
※大小文字に注意
トーンのバリエーションが7種類
ヴィヴィッドトーン / ブライトトーン / ディープトーン / ライトトーン / ダルトーン / ベリーペールトーン / ダークグレイッシュトーン
コードは以下の通り
※上記コードは基本色のコードと併せて使用します。
※大小文字に注意
白黒モノトーンの種類
モノトーンは7種類
コードは薄い順に以下の通り
※こちらは組み合わせずに使います。
※大小文字に注意
カラーコードをスタイルで使う実例
実例を紹介します。
テキストにボタンを適用します。
スタイル → スタイル → ボタン → ブルーボーダーボタン
↑ブルーボーダーボタンの色を変更。テキストエディタを見るとコードは以下のようになっています。
bgc-white brc-DLblue ftc-DLblueの部分が色を指定しています。ここをテキストエディタで書き換えれば色を変更することができます。
※ビジュアルエディタでの変更ももちろん可能です。
試しに青系のボタンを赤系に変更します。
↑上記のようになりました。コードは以下の通り。今回はblueとなっていた箇所をredに変更しただけです。
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
|
