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

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

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

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

THE THOR（ザ・トール）で使えるカラーとは？

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

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

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

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

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

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

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

カラーの使える部位

THE THOR（ザ・トール）のカラーコード一覧

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

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

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

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

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

事前確認

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

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

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

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

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

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

/* --------- 共通ボタン --------- */
<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コードを投稿画面のテキストエディタに貼り付けて確認してみてください。

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

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

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

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

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

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

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

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

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

/* --------- サブタイトルボックス --------- */
<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（ザ・トール）のカラーを設定することができましたか。

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

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