The・THOR

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

更新日:

 

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

The・THORのボックスやボタンやラベルの作り方!

WordPressのテーマ「The・THOR」には、オリジナルのボックスやボタンやラベルを作る機能が装備されています。   最初は難しいかも知れませんが、2、3個作ってみると簡単だと思うよう ...

続きを見る

 

この機能では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では、色のコードを変えるだけで簡単にオリジナルアイテムを作ることが出来るのです。

 




 

サンプル集
コピペで作れるボックスのサンプル!

これまで、WordPressの有料テーマ「The・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

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.