The・THORのボックスに使える全91色のカラー一覧!【WordPress】

7月 26, 2019

WordPressの有料テーマ「The・THOR」にはオリジナルのボックス、ラベル、ボタンを作れる機能が装備されています。

この機能では13系統色×7トーンで91色を指定できるようになっています。ところがWordPress上では文字しか表記されていないので分かりにくくなっています。

そこで今回は、The・THORのスタイルに収録されている全91色を一覧にしてみました。

見る画面によって色が違うので注意してください
うさぎ
おじさん
わたしの画面はブルーライトカットしてるから、全体に黄色っぽいです

The・THORのカラー一覧の使い方

The・THORのカラーの変更方法を紹介します。

カラーの変更の仕方

例えば、上のボックスのコードは

<div class="ep-box bgc-VPpurple es-radius"><div class="ep-inbox es-borderDashedM es-radius ftc-Vpurple bgc-VPpurple brc-Lpurple“>

・ステッチボックス

</div>

</div>

このようになっています。

つまり、

文字色 ftc-Vpurple

背景色 bgc-VPpurple

ボーダー色 brc-Lpurple

この3つの色を変更できるということです。

VPpurpleが2箇所になっているのはボックス内ボックス(2重のボックス)になっているからです
うさぎ

ボックス内ボックスなど、ボックス・ラベル・ボタンのパーツ一覧はコチラの記事を参考にしてください。

では、下にある91色の一覧を見てライム系統色のボックスに変えてみましょう。

ライム系は色の名前に「lime」が付くので、上のpurpleをlimeに変えるだけでもOKです。

<div class="ep-box bgc-VPlime es-radius"><div class="ep-inbox es-borderDashedM es-radius ftc-Vlime  bgc-VPlime brc-Llime“>

・ステッチボックス

</div>

</div>

うーんカンタン!
うさぎ

このようにTHORでは、色のコードを変えるだけで簡単にオリジナルアイテムを作ることが出来るのです。

THORのコードとカラーコード

The・THORのコードは、ボタンなどにしか使えません。ですが、見出しやヘッダーなどもボックスと同じ色を使いたいときもあるでしょう。

そういうときは、下の一覧のカラーコード(#××××××)を使えば同じ色になります。

例えばヴィヴィッドイエローを見出しなどに使うときには#fff100と入力すれば、同じ色の見出しを作れます。

おじさん
ボックスや見出しのメインカラーを同じにすると、ブログ内の統一感が出ますね
このブログは?
うさぎ
おじさん
気づいたらいろんな色を使ってました

The・THORのボックス・ラベル・ボタンのパーツ一覧はコチラの記事で

The・THORのカラー一覧

この一覧はThe・THORのバージョン1.3.0のものです。

今後、バージョンアップなどで変更があるかも知れません。

イエロー系

カラーコード トーン THORのコード
#fff100 ヴィヴィッド Vyellow
#fff338 ブライト Byellow
#cbbd00 ディープ DPyellow
#fff89a ライト Lyellow
#cac04e ダル DLyellow
#fffded ベリーペール VPyellow
#675f00 ダークグレイッシュ DGyellow

オレンジ系

カラーコード トーン THORのコード
#f49801 ヴィヴィッド Vorange
#f6ad3a ブライト Borange
#bf7601 ディープ DPorange
#fbce8a ライト Lorange
#c39043 ダル DLorange
#fef5e8 ベリーペール VPorange
#633c00 ダークグレイッシュ DGorange

レッド系

カラーコード トーン THORのコード
#e60112 ヴィヴィッド Vred
#ea5532 ブライト Bred
#b60105 ディープ DPred
#f39c76 ライト Lred
#ba5536 ダル DLred
#feede3 ベリーペール VPred
#5f0100 ダークグレイッシュ DGred

マゼンタ系

カラーコード トーン THORのコード
#e5004f ヴィヴィッド Vmagenta
#e9536b ブライト Bmagenta
#b5003c ディープ DPmagenta
#f29c9f ライト Lmagenta
#ba5460 ダル DLmagenta
#fdedec ベリーペール VPmagenta
#5f0017 ダークグレイッシュ DGmagenta

ピンク系

カラーコード トーン THORのコード
#e4017f ヴィヴィッド Vpink
#e95098 ブライト Bpink
#b50165 ディープ DPpink
#f29fc3 ライト Lpink
#ba5584 ダル DLpink
#fdeff5 ベリーペール VPpink
#600033 ダークグレイッシュ DGpink

パープル系

カラーコード トーン THORのコード
#920883 ヴィヴィッド Vpurple
#a54a98 ブライト Bpurple
#740169 ディープ DPpurple
#c490bf ライト Lpurple
#8c4b82 ダル DLpurple
#f3eaf4 ベリーペール VPpurple
#3e0036 ダークグレイッシュ DGpurple

ネイビー系

カラーコード トーン THORのコード
#1c1e84 ヴィヴィッド Vnavy
#4c4398 ブライト Bnavy
#14116e ディープ DPnavy
#8f82bc ライト Lnavy
#4e4282 ダル DLnavy
#e8e6f3 ベリーペール VPyellow
#08003a ダークグレイッシュ DGnavy

ブルー系

カラーコード トーン THORのコード
#0068b7 ヴィヴィッド Vblue
#2b71b8 ブライト Bblue
#005293 ディープ DPblue
#87abda ライト Lblue
#3970a2 ダル DLblue
#e9eef9 ベリーペール VPblue
#00274f ダークグレイッシュ DGblue

スカイ系

カラーコード トーン THORのコード
#00a0e9 ヴィヴィッド Vsky
#00b0ec ブライト Bsky
#0081ba ディープ DPsky
#7ecff5 ライト Lsky
#1894be ダル DLsky
#eaf6fe ベリーペール VPsky
#004462 ダークグレイッシュ DGsky

ターコイズ系

カラーコード トーン THORのコード
#009e96 ヴィヴィッド Vturquoise
#00ada9 ブライト Bturquoise
#007f78 ディープ DPturquoise
#83ccc9 ライト Lturquoise
#1d928f ダル DLturquoise
#eaf5f4 ベリーペール VPturquoise
#004340 ダークグレイッシュ DGturquoise

グリーン系

カラーコード トーン THORのコード
#009944 ヴィヴィッド Vgreen
#0ba95f ブライト Bgreen
#007c36 ディープ DPgreen
#88c997 ライト Lgreen
#218f59 ダル DLgreen
#ebf5eb ベリーペール VPgreen
#004215 ダークグレイッシュ DGgreen

ライム系

カラーコード トーン THORのコード
#8ec31f ヴィヴィッド Vlime
#a9cf52 ブライト Blime
#6f9b12 ディープ Dlime
#cce199 ライト Llime
#8ea953 ダル DLlime
#ebf5eb ベリーペール VPlime
#395104 ダークグレイッシュ DGlime

モノトーン系

カラーコード トーン THORのコード
#ffffff ホワイト white
#d8d8d8 ベリーライトグレー VLgray
#b2b2b2 ライトグレー Lgray
#8c8c8c グレー gray
#656565 ダークグレー Dgray
#3f3f3f ベリーダークグレー VDgray
#191919 ブラック black

まとめ

今回は、The・THORのボタンやボックスやラベルに使えるカラーの一覧を紹介しました。

ブログで一番カスタマイズしやすいのはカラーだと思うので、とりあえず一度試してみてください。

記事で分からないことや質問がありましたら、お問い合わせから送ってください!

The・THORの関連記事一覧