THE THOR(ザ・トール)カラーセットの使い方 – テーマカラー一覧

WordPressテーマ「THE THOR」には8トーンのカラーセットが用意されており、そのうち7トーンにそれぞれ12色、モノトーンに7色で計91色のカラーを使うことができます。ただ慣れるまではトーン名称とカラー名称だけでは実際にどんな色なのか使ってみないとわかりません。何度も試して色探しをするのはとても時間がかかります。

きのたけ
トーン名とカラー名だけじゃわからん!

そこで今回は今後の作業効率UPのために「THE THOR」に用意されているカラーを系統別に一覧にすることにしました。

カラーセットのトーンとカラーの名称

THE THORでは全91色のカラーが8つのトーンに分類されており、カーラーネームの先頭にアルファベット大文字1文字もしくは2文字で付けられています。

THE THORのトーン名称 コード
ヴィヴィッド V
ブライト B
ディープ DP
ライト L
ダル DL
ベリーペール VP
ダークグレイッシュ DG
モノトーン
THE THORのカラー名称 コード
イエロー yellow
オレンジ orange
レッド red
マゼンタ magenta
ピンク pink
パープル purple
ネイビー navy
ブルー blue
スカイ sky
ターコイズ turquoise
グリーン green
ライム lime

例えばレッドの場合は、

Eg1.ヴィヴィッドレッド:V+red→Vred
Eg2.ダークグレイッシュレッド:DG+red→DGred

となります。

モノトーンだけは他のトーンと異なります。

Eg1.ベリーライトグレー:VL+gray→VLgray
Eg2.グレー:gray
Eg3.ダークグレー:D+gray→Dgray
Eg4.ブラック:black

カラーセット内のカラー一覧(カラー系統別)

イエロー

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

オレンジ

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

レッド

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

マゼンタ

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

ピンク

THE THORカラーコード トーン名称 16進数
Vpink
ヴィヴィッド #e4017f
Bpink
ブライト #e9536b
Dpink
ディープ #b50165
Lpink
ライト #f29fc3
DLpink
ダル #ba5584
VPpink
ベリーペール #fdeff5
DGpink
ダークグレイッシュ #600033

パープル

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

ネイビー

THE THORカラーコード トーン名称 16進数
Vnavy
ヴィヴィッド #1c1e84
Bnavy
ブライト #4c4398
Dnavy
ディープ #14116e
Lnavy
ライト #8f82bc
DLnavy
ダル #4e4282
VPnavy
ベリーペール #e8e6f3
DGnavy
ダークグレイッシュ #08003a

ブルー

THE THORカラーコード トーン名称 16進数
Vblue
ヴィヴィッド #0068b7
Bblue
ブライト #2b71b8
Dblue
ディープ #005293
Lblue
ライト #87abda
DLblue
ダル #3970a2
VPblue
ベリーペール #fe9eef9
DGblue
ダークグレイッシュ #00274f

スカイ

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

ターコイズ

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

グリーン

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

ライム

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

モノトーン

THE THORカラーコード カラー名称 16進数
white
ホワイト #8ec31f
VLgray
ベリーライトグレイ #a9cf52
Lgray
ライトグレイ #6f9b12
gray
グレー #cce199
Dgray
ダークグレー #8ea953
VDgray
ベリーダークグレー #ebf5eb
black
ブラック #395104

カラーセットの使い方

カラーセットは文字色・背景色・ボーダ色のコードと組み合わせて使用します。

行で使用 – <p></p>内

文字色をVred、背景色をLskyに指定しています。

<p class="ftc-Vred bgc-Lsky">文字色をVred、背景色をLskyに指定しています。</p>

文字列で使用 – <span></span>内

文字色をVpink、背景色をblackに指定しています。

<span class="bgc-black ftc-Vpink es-borderSolidM brc-Vpink">文字色をVpink、背景色をblack、ボーダー色をVpinkに指定しています。</span>

リストで使用 – <li></li>内

  • 文字色をVred、背景色をLskyに指定しています。
  • 文字色をDblue、背景色をVyellowに指定しています。
<ul>
 	<li class="ftc-Vred bgc-Lsky">文字色をVred、背景色をLskyに指定しています。</li>
 	<li class="bgc-Vyellow ftc-DPblue">文字色をDblue、背景色をVyellowに指定しています。</li>
</ul>

リストで使用 – <ui></ul>内

  • 文字色をVred、背景色をLskyに指定しています。
  • これは2項目めの文章です。
<ul class="ftc-Vred bgc-Lsky">
 	<li>文字色をVred、背景色をLskyに指定しています。</li>
 	<li>これは2項目めの文章です。</li>
</ul>

ボックスで使用

文字色をwihte、背景色をVpurple、ボーダー色をDGpurpleに指定しています。
<div class="ep-box bgc-Vpurple brc-DGpurple es-borderSolidM ftc-white">文字色をwihte、背景色をVpurple、ボーダー色をDGpurpleに指定しています。</div>
文字色を指定するときは“ftc-“(font-colorの略)、背景色を指定するときは“bgc-“(background-colorの略)、ボーダー色を指定するときは“brc-“(border-colorの略)に続けて”Vred”などの指定色を記述したコードを、各要素のclassに含めることでCSSの”color”, “border-color”, “background-color”が指定されます。
このブログで使用しているWordPressテーマ:THE THOR

  • 圧倒的にSEOに強く抜群に上位表示されやすい圧倒的にSEOに強く上位表示されやすい「国内最高クラスのSEO最適化テーマ」
  • 息を呑むほどに美しく・プロ仕様のデザイナーズサイトが簡単に作れる。
  • サイトで集客し収益を上げるための「集客・収益化支援システム」を搭載。
  • 革新的な高速表示技術を多数装備した「国内屈指の高速テーマ」
  • 国内随一と言っても過言ではない機能数と簡単に使いこなせる操作性。
  • メールサポート・操作マニュアル/会員フォーラム・無料バージョンアップ有
  • 要望や最新技術を取り入れ、機能追加改善を繰り返す「進化し続けるテーマ」
利用者の声

M.Oさん:ブロガー
トールはとてもSEOに強いテーマ
FITの無料テーマ(ライオンブログ・ライオンメディア)も無料とは思えないほどに素晴らしいテーマですが、トールはその上を行く最高のテーマだと思います。私はこれまでたくさんの有料テーマを使ってきましたが、そのなかでも断トツ一番のテーマでした。テスト版を1ヶ月ほど使わせていただきましたが使い始めてから短期間でGoogleで1ページ目に表示され始めていて、とてもSEOに強いテーマだというデータが取れました。(SEOに強いことで有名なテーマ)○○○もこれまで随分と使いましたが、その○○○と比べてもトールのほうがSEOに強いテーマだと思います。正規版がリリースされたら手持ちのサイトは全てトールに乗り換えるつもりです。


Nさん:有名凄腕アフィリエイター
数十万円するような機能が付いてきて驚き
トールは、ブロガー・アフィリエイター向けテーマと銘打つだけあって、機能面もデザイン面もSEOに関してまでも良く作り込まれているという印象を受けました。本来プラグインを導入しなければ実現できないような機能であっても、トールには標準で備わっている。例えば簡易お問い合わせ機能なんて私みたいなアフィリエイターにはちょうどいい機能です。アフィリエイターの視点で言えば、標準でアフィリエイトタグ管理機能とランキング機能、それから絞り込み検索機能がついているのはうれしいですね。アフィリエイトタグを一元管理できれば、修正も1か所で済むし、それらのタグをボタン一つでランキングコンテンツとして作り上げることができるランキング機能もうれしいですね。私は以前、エンジニアの方に、これに似た機能を数十万円で作ってもらっているので、少し悔しいですよ。それから、テーマとして絞り込み検索が備わっているのは驚きました。私の知る限りそういった無料プラグインもなかったように思います。


R.Aさん:WEBデザイナー
他の有料テーマを使ってサイトを作っていた時の時間は何だったんだろう。
画像編集ソフトを使わなくてもテーマの機能として画像が簡単に加工できるのはいいですね。サイト制作作業の大幅な時短になりそうです。これまでは新しくサイトを作るときって、なんだかんだ丸1日から2日くらいサイトのレイアウトとかデザインとかをいじくり回してましたけど、ザ・トールでは数時間でいい感じのサイトが完成しましたよ。今まで(デザインが売りの有名テーマ)○○○のテーマを使ってサイトを作っていた時の時間は何だったんだろうって感じです。