Amazon Music Unlimitedが最初の4か月無料【10月15日まで】

『THE THOR』で使えるカラーコード一覧のすべて【全91色】

本記事のリンクには広告が含まれています。

こんにちは! また一つ変更ができるようになったネイネイ(@NEYNEYx2)です。

この記事では、WordPressテーマ『THE THOR(ザ・トール)』の文字色、背景色、ボーダー色で使用できるカラーの設定する方法をご紹介していきます。

ボタン・ボックス・ラベルなどのカラーを変更する時の参考にしてください。

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

 

目次(タップできます)

THE THOR(ザ・トール)で使えるカラーとは?

THE THOR(ザ・トール)では、カラーセットが用意されており、CSSがわからなくても簡単に文字色・背景色・ボーダー色を変更することができます。

カラーの種類は、7系統 x 12色 + モノトーン7色の全91色を使うことができます。

MEMO

文字色、背景色、ボーダー色のそれぞれの部位は、下記の画像を参照ください。

カラーの使える部位

 

THE THOR(ザ・トール)で使えるカラーの変更方法

ここでは、下記のボックスを例にTHE THOR(ザ・トール)で、文字色、背景色、ボーダー色を変更する方法を説明していきます。

ボックスの例

上記のボックスのHTMLコードは、下記のようになっています。

HTML
<div class="ep-box ftc-white bgc-Lsky brc-Vnavy es-Fbig es-bold es-borderSolidM es-radius">
ボックスデザイン
</div>

 

上記を見ておわかりのように、次のような書き方になっています。【カラー名】の部分には、THE THOR(ザ・トール)のカラーコードを入力します。

カラーの使える部位

  • 文字色・・・ftc-【カラー名】
  • 背景色・・・bgc-【カラー名】
  • ボーダー色・・・brc-【カラー名】

 

THE THOR(ザ・トール)のカラーコード一覧

ここでは、THE THOR(ザ・トール)のカラーコードを一覧にしています。

ヴィヴィッドトーン

カラーコード

#fff100

#f49801

#e60112

#e5004f

#e4017f

#920883

#1c1e84

#0068b7

#00a0e9

#009e96

#009944

#8ec31f

THE THORコード

Vyellow

Vorange

Vred

Vmagenta

Vpink

Vpurple

Vnavy

Vblue

Vsky

Vturquoise

Vgreen

Vlime

ブライトトーン

カラーコード

#fff338

#f6ad3a

#ea5532

#e9536b

#e95098

#a54a98

#4c4398

#2b71b8

#00b0ec

#00ada9

#0ba95f

#a9cf52

THE THORコード

Byellow

Borange

Bred

Bmagenta

Bpink

Bpurple

Bnavy

Bblue

Bsky

Bturquoise

Bgreen

Blime

ディープトーン

カラーコード

#cbbd00

#bf7601

#b60105

#b5003c

#b50165

#740169

#14116e

#005293

#0081ba

#007f78

#007c36

#6f9b12

THE THORコード

DPyellow

DPorange

DPred

DPmagenta

DPpink

DPpurple

DPnavy

DPblue

DPsky

DPturquoise

DPgreen

DPlime

ライトトーン

カラーコード

#fff89a

#fbce8a

#f39c76

#f29c9f

#f29fc3

#c490bf

#8f82bc

#87abda

#7ecff5

#83ccc9

#88c997

#cce199

THE THORコード

Lyellow

Lorange

Lred

Lmagenta

Lpink

Lpurple

Lnavy

Lblue

Lsky

Lturquoise

Lgreen

Llime

ダルトーン

カラーコード

#cac04e

#c39043

#ba5536

#ba5460

#ba5584

#8c4b82

#4e4282

#3970a2

#1894be

#1d928f

#218f59

#8ea953

THE THORコード

DLyellow

DLorange

DLred

DLmagenta

DLpink

DLpurple

DLnavy

DLblue

DLsky

DLturquoise

DLgreen

DLlime

ベリーペールトーン

カラーコード

#fffded

#fef5e8

#feede3

#fdedec

#fdeff5

#f3eaf4

#e8e6f3

#e9eef9

#eaf6fe

#eaf5f4

#ebf5eb

#f2f7e5

THE THORコード

VPyellow

VPorange

VPred

VPmagenta

VPpink

VPpurple

VPnavy

VPblue

VPsky

VPturquoise

VPgreen

VPlime

ダークグレイッシュトーン

カラーコード

#675f00

#633c00

#5f0100

#5f0017

#600033

#3e0036

#08003a

#00274f

#004462

#004340

#004215

#395104

THE THORコード

DGyellow

DGorange

DGred

DGmagenta

DGpink

DGpurple

DGnavy

DGblue

DGsky

DGturquoise

DGgreen

DGlime

モノトーン

カラーコード

#ffffff

#d8d8d8

#b2b2b2

#8c8c8c

#656565

#3f3f3f

#191919

THE THORコード

white

VLgray

Lgray

gray

Dgray

VDgray

black

 

THE THOR(ザ・トール)のカスタマイザー設定のカラーを変更する方法

THE THOR(ザ・トール)では、カスタマイザーのパーツスタイル設定で、「共通ボタン」「アイコン系パーツ」「テーブル」などのカラーをお手軽に変更することができます。

ただ、カスタマイザーで変更したカラーは、そのままではTHE THOR(ザ・トール)のカラーコードで色を変更できなくなってしまいます。せっかく91色もあるカラーが使用できないなんてもったいないですよね。

ここでは、カスタマイザー設定のカラーを変更する方法を説明していきます。

 

事前確認

ご紹介する内容は、カスタマイズ内容をCSSファイルにコピペしますので、 CSSファイルへのコピペは下記のお好みな方で編集ください。

  1. 子テーマの「style-user.css」を編集する。(外観/テーマの編集から変更できます)
  2. 追加CSSを編集する。(外観/カスタマイズ/追加CSSから変更できます)

それでは、準備が整いましたら下記の変更内容をご確認ください。

共通ボタン・アイコン(帯)・テーブルのカラーを変更する方法

カスタマイザーで設定した、共通ボタン・アイコン(帯)・テーブルのカラーを変更する方法をご紹介ます。

うまく変更ができれば、下記のようにカスタマイズすることができます。

共通ボタン&アイコン(帯)の変更前後

共通ボタン&アイコン(帯)のカスタマイズ前後

 

01

 

共通ボタン・アイコン(帯)・テーブルのカラーを変更する手順

  1. WordPressのダッシュボードから外観テーマの編集とクリックします。
  2. 編集するテーマを選択」の部分を「THE THOR」に変更して、「選択」ボタンをクリックします。
  3. テーマファイル」の部分が「スタイルシート(style.css)」になっているのを確認します。
  4. 「文字色」で検索して、表示された行から、「/*文字色*/」「/*背景色*/」「/*ボーダー色*/」が記述された行をコピーします。
    (THE THORバージョン1.5.0の場合、「5811行から6111行」になります。バージョンによって行は、前後すると思われます。)
  5. コピーした内容を、子テーマの「style-user.css」 or 追加CSSに追加します。

共通ボタン・アイコン(帯)・テーブルのカラーを変更する手順

設定はこれで完了なので、実際に反映されているか確認していきます。

HTML
/* --------- 共通ボタン --------- */
<div class="btn btn-center"><a class="btn__link btn__link-primary bgc-Vsky" href="/">共通ボタン カスタム後</a></div>


/* --------- アイコン(帯) --------- */
<div class="ep-box icon-heart es-BiconObi es-borderSolidS brc-Vsky bgc-Lsky ftc-VDgray">アイコン(帯) カスタム後</div>

 

上記のHTMLコードを投稿画面のテキストエディタに貼り付けて確認してみてください。

設定が正しくできていれば、下記のようになるはずです。

共通ボタン&アイコン(帯)の完成図

共通ボタン&アイコン(帯)のカスタマイズ後

以上で、共通ボタン・アイコン(帯)・テーブルのカラーを変更する方法は終了です。

 

その他エディタ用パーツ設定のカラーを変更する方法

カスタマイザーの「その他エディタ用パーツ設定」で設定した、アイコン系パーツ・はてなボックス・サブタイトルボックスのカラーを変更する方法をご紹介ます。

うまく変更ができれば、下記のようにカスタマイズすることができます。

アイコン系パーツ&サブタイトルボックスの変更前後

アイコン系パーツ&サブタイトルボックスのカスタマイズ前後

 

01

 

共通ボタン・アイコン(帯)・テーブルのカラーを変更する手順

下記のCSSコードを、子テーマの「style-user.css」 or 追加CSSに追加します。

CSS
/* --------- 追加 文字色 --------- */
.content .ftcB-white::before {color:#ffffff}

/* --------- 追加 背景色 --------- */
.content .bgcB-DPblue::before {background-color:#005293}

/* --------- 追加 ボーダー色 --------- */
.content .brcB-Vmagenta::before {border-color:#e5004f}

 

MEMO

青枠内の「ftcB-〇〇〇」などはclass名なので、わかりやすい名前に変更してもらって問題ありません。

また、オレンジ枠内の「#005293」などはカラーコードなので、好きな色に変更してください。

設定はこれで完了なので、実際に反映されているか確認していきます。

HTML
/* --------- サブタイトルボックス --------- */
<div class="ep-box es-BsubTradi ftcB-white bgcB-DPblue brcB-Vmagenta es-borderSolidM es-radius bgc-white brc-Lsky" title="サブタイトル カスタム後"></div>

/* --------- アイコン(サークル) --------- */
<div class="ep-box es-BiconCircle bgcB-DPblue es-borderSolidS es-radius icon-pencil2 bgc-VPsky brc-DPblue">アイコン(サークル) カスタム後</div>

 

上記のHTMLコードを投稿画面のテキストエディタに貼り付けて確認してみてください。

設定が正しくできていれば、下記のようになるはずです。

アイコン系パーツ&サブタイトルボックスの完成図

アイコン系パーツ&サブタイトルボックスのカスタマイズ後

以上で、その他エディタ用パーツ設定のカラーを変更する方法は終了です。

 

まとめ

どうですか? 思い通りにTHE THOR(ザ・トール)のカラーを設定することができましたか。

この記事があなたのサイト作成の参考になれば幸いです。

それでは、まったです。 (‘◇’)ゞ

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

Amazonギフト券 チャージタイプ

 

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次(タップできます)