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

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

テーマについてTHE THOR

 

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

THE THOR(ザ・トール)サブタイトルボーダーボックスの使い方

関連記事

当サイトではワードプレスのテーマ THE THOR を使用中です。   THE THOR が気になっている人はこちらをどうぞ↓ THE THOR とは? 『ザ・トール レビュー』 公式サイトTHE THOR[…]

THE THOR ボックス 使い方 テーマ

 

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

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

 

その夢が実現しました(大袈裟)

 

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

サブタイトルボーダーボックスの色 THE THOR

 

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

そんなことができるの?
ホントにそんなことができるのか!
うそでしょ、そんなことが・・・

 

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

 

手順は以下の通り。

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

 

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

 

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

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

サンプル。標準的なSTBB(サブタイトルボーダーボックス)

 

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

<div class=”ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred” title=”サンプル”> サンプル。標準的なSTBB(サブタイトルボーダーボックス) </div>

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

 

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

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

 

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

<div class=”ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred subcl01” title=”サブタイトルにclass名01″> そんなことができるの? </div>
<div class=”ep-box es-BsubTradi bgc-white es-borderSolidM es-radius subcl02 brc-DPnavy” title=”サブタイトルにclass名02″> ホントにそんなことができるのか! </div>
<div class=”ep-box es-BsubTradi es-borderSolidM es-radius brc-DPred subcl03 bgc-VPsky brc-Lsky” title=”サブタイトルにクラス名03″> うそでしょ、そんなことが・・・ </div>

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

 

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

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

操作手順
外観 → カスタマイズ → 追加CSS

 

↓出来上がりサンプル(再掲)

そんなことができるの?
ホントにそんなことができるのか!
うそでしょ、そんなことが・・・

 

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

 

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

標準なので本来このコードは必要ありません。一応これがベースになるCSSということで表記します。

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

 

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

ボーダーの太さを変更することもできます。コードを追加(border: solid 2px;)

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

 

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

色を変更。

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

 

以上です。

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

 

あとがき

 

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

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

>