THE THORの背景色やボーダー色を#のCSSカラーコードで変更

僕が使っているWordPressのテーマは「THE THOR（ザ トール）」です。

「THE THOR」はブログのデザインが簡単にできるスタイルやSEO対策機能などがデフォルトで入っている超優秀なテーマで多くのブロガー、アフィリエイターに愛用されています。

というように、デザインの色変更で苦労されているのではないでしょうか。

THE THORには「カラーコード一覧【全91色】」があり、確かに決められたコードで簡単に色を変更できるのは便利です。

しかし、逆に言うと「91色からしか選べないというのは自由度が低いのではないか」というのが僕の感想です。

今まさにブログを書いていて

をCSSのカラーコード「#00a0e9」に変更したくなったのですが、ネットで検索してもやり方が出てこず困ってしまいました。

なんとか「追加CSS」に記述することで色を変更する方法を自力で見つけたので、その備忘録を記事として残します。

それでは早速解説していきます。

THE THORの「サブタイトルボーダーボックス」の背景色とボーダー色を好きな色に変更する方法

サブタイトルボーダーボックスとは下記のスタイルですね。

上記の「サブタイトルボーダーボックスはこれです」の部分がサブタイトルなので、ここの背景色とそれを囲う青いボーダー色を変更したいと思います。

STEP1.テキストモードでHTMLを確認

まずは変更したい部分のHTMLを確認するため、ワードプレスの記事を書くエディターの「テキストモード」で該当部分を確認します。

「サブタイトルボーダーボックス」のHTMLは下記のように記述されていました。

HTML

<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-Vblue" title="サブタイトルボーダーボックスはこれです">
ボックス内のテキストはここに表示されます。
</div>

上記のHTMLで色にあたる部分は2ヵ所です。

これは、THE THORの仕様なのですが、

という組み合わせで色が指定されています。

なので、上記の「white」と「Vblue」を他のカラーコードに変更すれば色が変わるわけですが、それでは今回の目的を達成できません。

STEP2.追加CSSでボーダー色を好きな色に変更する

さて、本題です。

STEP1を見てもらえば分かる通り、ボーダー色は「bgc-【THE THORのカラーコード】」で指定されています。

ということは「【THE THORのカラーコード】の部分を好きなカラーコードにすれば色が変わるのでは？」と思い、

「HTML」の「brc-Vblue」を「brc-#00a0e9」に書き換えてみました。

HTML

<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-#00a0e9" title="サブタイトルボーダーボックスはこれです">
ボックス内のテキストはここに表示されます。
</div>

結果が↓です。

はい、ダメでした。

というわけで次は「【THE THORのカラーコード】も実際の色はCSSで内部的に「#xxxxxx」のカラーコードで指定されているはず」と思い、

下記のように試してみました。

ということでまずは「HTML」を下記のように記述。

HTML

<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-test" title="サブタイトルボーダーボックスはこれです">
ボックス内のテキストはここに表示されます。
</div>

続いて「追加CSS」に下記のように記述。

調べたら「サブタイトルボーダーボックス」のボーダー色は「.content .brc-自分で付けた名前」で指定できるようです。

ちなみにボーダー色を指定するCSSは「border-color」です。

.content .brc-test {
    border-color: #00a0e9;
}

その結果がこれ↓

はい、見事にボーダー色が「#00a0e9」に変更できました。

STEP3.追加CSSでサブタイトルの背景色を好きな色に変更する

STEP2と同じ要領で、背景色を指定している「bgc-white」を「bgc-test（好きな名前）」に変更し試してみました。

HTML

<div class="ep-box es-BsubTradi bgc-test es-borderSolidM es-radius brc-test" title="サブタイトルボーダーボックスはこれです">
ボックス内のテキストはここに表示されます。
</div>

追加CSS

※背景色を指定するCSSは「background-color」です。

.content .bgc-test {
    background-color: #00a0e9;
}

結果がこちら↓

ダメでした…。

どうやら「bgc」はサブタイトルボックスの本文の背景色を指定しているようです。

それで色々調べてみた結果、「.content .brc-test（自分で付けた名前）::before」で指定するとサブタイトルの背景色とボーダー色を変更できることが分かりました。

そこで、改めてHTMLと追加CSSを下記のように書き換えました。

HTML

※「bgc-test(好きな名前)」は「bgc-white」に戻してください。

<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-test" title="サブタイトルボーダーボックスはこれです">
ボックス内のテキストはここに表示されます。
</div>

追加CSS

「.content .brc-test::before」では「background-color（背景色）」と「border-color（ボーダー色）」の両方を指定する必要があります。

分かりやすいように、「border-color（ボーダー色）」は「赤（#ff0000）」にしてみました↓

.content .brc-test::before {
	color: #ffffff;
	background-color: #00a0e9;
	border-color: #ff0000;
}

その結果がこちら↓

上手くいきました！

この方法を使えば、「サブタイトルの色」と「周りのボーダーの色」を変えることもできます。

ボーダー色は「外観」の「カスタマイズ」から変更できるが「背景色」は変更できない

ご存じの方も多いと思いますが、念のため。

「サブタイトルボーダーボックス」のボーダー色は「THE THORのカラーコード」の色であればカスタマイズから変更できます。

変更方法は以下の通りです。

下記の画像では「brc-DPred」になっていますが、「DPred」を好きなカラーコードに変更すればOKです。

ただし見てもらうと分かる通り、前述したサブタイトル部分を指定するCSSの「.brc-test（自分で付けた名前）::before」はここでは書き換えられません。

そのため、「サブタイトルボーダーボックス」全体の色を変更するには追加CSSに記述をするしかないと思っています。

他の方法をご存じの方はぜひコメントで教えてください！

リストの○や数字の背景色や文字色を好きな色に変更する方法

続いて、リストの色の変更方法について解説します。

リストとは、下記のように箇条書きなんかで使うやつですね。

1色だけを使うのであればカスタマイズから変更できる

リストの色は「外観＞カスタマイズ＞パーツスタイル設定[THE]＞リスト設定(個別ページ用)」で変更できます。

「番号無しリスト」も「番号付きリスト」もカラーAの色を変更すれば「○」も「①」も好きな色に変えられます。

しかし、このカスタマイズからの色変更だけでは困ることがあります。

例えば、「ポジティブなリスト」と「ネガティブなリスト」で色を変えるということができません。

そうです。つまり複数色の使い分けができないわけです。

そこで下記に複数色のリストの使い分け方法について解説します。

STEP1.テキストモードでHTMLに追記

まずはテキストモードでリストのHTMLを確認します。

例えば「番号付きリスト」は通常下記のようになっています。

元のHTML

<ol>
 	<li>あ</li>
</ol>

僕の場合、通常時はカスタマイズで指定した「ポジティブな色」の設定になっています。

ネガティブなリストにしたい時は、このHTMLの<ol>に「class」を追記します。

classを追記したHTML

<ol class="test">
 	<li>あ</li>
</ol>

STEP2.追加CSSでリストを好きな色に変更する

HTMLにclassを追記したら、「外観＞カスタマイズ＞追加CSS」から好きな色を指定する記述をしていきます。

追加CSS

番号付きリストの色を変更する場合は

「.content ol.test（←自分で付けたclass名） > li::before」と指定します。

今回は「color（数字の色）」と「border-color（○の色）」ともに「赤（#ff0000）」にしました。

.content ol.test > li::before {
    color: #ff0000;
    border-color: #ff0000;
}

結果はこちら↓

「color」と「border-color」を別の色にすることもできます。

「番号無しリスト」の場合も同様にHTMLにclassを追記します。

classを追記したHTML

<ul class="test">
 	<li>あ</li>
</ul>

そして追加CSSで好きな色を指定します。

追加CSS

.content ul.test > li::before {
    color: #ff0000;
    border-color: #ff0000;
}

結果はこちら↓

いかがでしょうか。

僕はこの方法で「ポジティブなリスト」と「ネガティブなリスト」で色を使い分けるということできました。

まとめ

「THE THOR」は専用のカラーコードでしか色を指定できないと思っていましたが、ちょっと手を加えるだけで一気に自由度が上がりました。

また、こんなことをしなくても元からあるスタイルを使うだけでも充分オシャレなブログを作れるのが「THE THOR」の特徴です。

さらにこの「THE THOR」というテーマは非常に人気で多くのブロガーやアフィリエイターが愛用しています。

そのため、THE THORの使い方を調べると参考になるサイトが大量に出てくるので、初心者の人でも安心して使える有料テーマとなっています。