THE THOR ザ・トール サブタイトルボーダーボックスの色 を個別に変える方法

THE THORの サブタイトルボーダーボックスの色 を個別に変えるカスタマイズを行いました。

テーマについてTHE THOR

ボーダーの色やボックスの背景色は自由に変更が可能です。

・THE THOR（ザ・トール）サブタイトルボーダーボックスの使い方
[sitecard subtitle=関連記事 url=https://karaagebow.com/archives/3283]

しかし、肝心なサブタイトルボックスのカラーが基本設定で1つしか選べません。

ボーダー色にあわせてサブタイトルボックスの色も変えたい！THE THOR使いなら一度はそう思ったことがあるはず。

その夢が実現しました（大袈裟）

THE THOR サブタイトルボーダーボックスの色 を個別に変える方法

まずは結果を見てください↓

↑出来上がりはこのようになります。

手順は以下の通り。

• テキストエディタでサブタイトルボーダーボックスのコードにclass名を追加
• 追加CSSに色を変更するコードを挿入

ちょっと長くなりますが順を追って説明していきます。

サブタイトルボーダーボックスのコードにclass名を追加

まず普通にサブタイトルボーダーボックスを作りテキストエディタでコードを見てみましょう。

コードを見ると以下のようになっています。

classの中に半角スペースを挟みつついくつか単語が並んでいますが、これひとつずつがclass名です。つまりたくさんのクラス名の組み合わせで（たくさんの装飾を使って）ボックスができています。この中に、任意のclass名を入れて装飾を追加します。

今回はsubcl01、subcl02、subcl03の3つを作り3種類のSTBBをつくりました。

半角スペースを入れてclass名を追加してください。

最初に示した出来上がりサンプルのコードはこんな感じ↓

ここまで出来たら後は簡単に自由自在です。

追加CSSでそれぞれのサブタイトルボーダーボックスに装飾を指定する

CSSを使用してボックスのカラーを変更します。

↓出来上がりサンプル（再掲）

出来上がりサンプルの上のボックスから順番に見ていきましょう。

一番上、標準のサブタイトルボーダーボックス

標準なので本来このコードは必要ありません。

一応これがベースになるCSSということで表記します。

ここにあるボーダーカラーはボックスのボーダーではなく、サブタイトルのボーダーカラーになります。3番目のサンプルを見るとわかりやすいかもしれません。

.content .subcl01::before {/* クラス名が入る*/
	color: #ffffff;/*文字色*/
	background-color: #b60105;/*背景色*/
	border-color: #b60105;/*サブタイトルのボーダー色*/
}

２番目、紺ボーダーのサブタイトルボーダーボックス

.content .subcl02::before {
	color: #14116e;
	background-color: #ffffff;
	border-color: #14116e;
}

3番目、水色ボーダーのサブタイトルボーダーボックス

サブタイトルの背景色は黄色になっています。

.content .subcl03::before {
	color: #7ecff5;
	background-color: #ffff99;
	border-color: #7ecff5;
}

以上です。

.content .クラス名::beforeを使って変更したいサブタイトルボーダーボックスを指定すれば自由に変更できます。

あとがき

クラス名を追加するという発想が出てくるまで時間がかかりました。

せっかく作った様々なサブタイトルボーダーボックスですが、基本的には多くの種類を使いわけるようなパーツではありません。それでも「ここだけは！」という場面があるのでは？そんな時にこの記事を思い出して貰えれば嬉しいです。