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=”tswl-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=”tswl-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」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント