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

THE THOR 記事一覧

THE THORのサブタイトルボーダーボックスは利用頻度の高いスタイルです。

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

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

関連記事

THE THOR 記事一覧 ワードプレスのテーマ「THE THOR」を使用中です、からあげ棒です。 機能が豊富な THE THOR は使いこなせれば素晴らしいものだと思います。 しかしそれが難しい。僕の直感では操作ができず苦戦していま[…]

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

 

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

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

 

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

 



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

 

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

 

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

 

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

カーソルあててみてください。同時に存在してますよw

 

テキストエディタでサブタイトルボーダーボックスのコードに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です。

一番下のline-heightはなくてもOK。ボックスの中で文字の縦位置がずれてたので付け加えました。

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

 

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

標準のままではボーダーの太さがないので太さを追加しました(border: solid 2px;)

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

 

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

2番目と色が変わるだけですね。

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

 

以上です。

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



あとがき

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

せっかく作った様々なサブタイトルボーダーボックスですが、基本的には多くの種類を使いわけるようなパーツではありません。

それでも「ここだけは!」という場面があるのでは?そんな時にこの記事を思い出して貰えれば嬉しいです。

 

最近のTHE THORは良いペースでアップデートしているので、このカスタマイズも標準装備されそうですね。

(ないのがおかしい?w)

THE THOR 記事一覧