ワードプレスのテーマTHE THOR（ザ・トール）には、多くの機能が備わっています。
例えばビジュアルエディタを使用して記事を作成する場合、ワープロソフトのように直感的にパーツを挿入したり、スタイルを指定したりすることができますが、あまりにもサクサク編集していると、気付いた時にはテキストエディタの記述が「スゴいこと」になってしまっている場合があります。（ワードプレスのクラシックエディター全般に言えることかもしれませんが…）
書式の設定がうまくいかずに、あとからテキストエディタを確認しようとしても、「よく分からない」事態に陥ってしまっているのです。
もし、現状が「よく分からない」状態だとしても安心してください。大丈夫です。HTMLやCSSの記述のように、ザ・トールの記述ルールを把握できていれば、「訳が分からない」が「よく分かる」ようになります。
前置きが長くなってしまいました。この記事では、THE THORのクラス名のひとつ「bgc-」について説明しています。
bgc-とは？
「bgc-」は、THETHOR（ザ・トール）のクラス名の一部で、背景色を指定する”値“です。「bgc-」に続けて、「色の名前」を記述することで正式なクラス名になります。
語源（読み方）
公式に説明されているわけではありませんが、おそらく「Back Ground Color」の略だと思います。
読み方は、「ビー・ジー・シー」もしくは、「バックグラウンドカラー」でよいのではないでしょうか。
bgc-クラス名の解読と種類
bgc-から始まるクラス名は、全部で91種類ありますが仕組みは簡単です。bgc-に色の名前が続き、「bgc-」+「色の名前」合わせて1つのクラス名となっています。色の名前は、色の分類の特徴を理解すれば、すぐにクラス名の仕組みがわかると思います。具体的には、以下の通りです。
- ヴィヴィットトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「V」から始まる分類です。例えば「
bgc-Vyellow」なら、背景色はヴィヴィットの黄色という意味です。
（「bgc」は背景指定、「V」はヴィヴィットトーン、「yellow」は黄色）ザ・トールの色見本はこちら - ブライトトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「B」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-Borange」なら、背景色はブライトのオレンジ色という意味です。
（「bgc」は背景指定、「B」はブライトトーン、「orange」はオレンジ色）ザ・トールの色見本はこちら - ディープトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「DP」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-DPred」なら、背景色はディープの赤色という意味です。
（「bgc」は背景指定、「DP」はディープトーン、「red」は赤色）ザ・トールの色見本はこちら - ライトトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「L」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-Lmagenta」なら、背景色はライトのマゼンタ色という意味です。
（「bgc」は背景指定、「L」はライトトーン、「magenta」はマゼンタ色）ザ・トールの色見本はこちら
- ダルトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「DL」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-DLpink」なら、背景色はダルトーンのピンク色という意味です。
（「bgc」は背景指定、「DL」はダルトーン、「pink」はピンク色）ザ・トールの色見本はこちら - ベリーペールトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「VP」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-VPpurple」なら、背景色はベリーペールトーンの紫色という意味です。
（「bgc」は背景指定、「VP」はベリーペールトーン、「purple」は紫色）ザ・トールの色見本はこちら - ダークグレイトーン（12色）◆◆◆◆◆◆◆◆◆◆◆◆
- 半角大文字で「DG」から始まる分類です。カラーはすべて半角で記述されています。例えば「
bgc-DGnavyなら、背景色はダークグレイトーンの灰色という意味です。
（「bgc」は背景指定、「DG」はダークグレイトーン、「navy」は紺色）ザ・トールの色見本はこちら - モノトーン（7色）◆◆◆◆◆◆◆
- 白色からから黒色までそれぞれ名前が付けられています。カラーはすべて半角で記述されています。共通する分類名はありません。それぞれに名前が付けられています。
※分類名がモノトーンでも、大文字の「M」は付きません。ザ・トールの色見本はこちら
色の名前はTHE THOR（ザ・トール）オリジナル
ここで一つ注意しなければならないことがあります。色の名前はTHETHOR（ザ・トール）オリジナルの名称だということです。CSSにも色の定義色がありますが、CSSの色の名前とTHETHORの色の名前は同じ色を示しません。実際に比較させたものをご覧ください。
（CSS定義色）#000000
ちょっと分かりにくいですね。ブラウザの画面の設定によっては同じ色に見えるかもしれません。
それでは、枠を外してみますね。
（THETHOR）
#191919black
（CSS定義色）
#000000
いかがですか？比較してみると、左側のTHETHORの「black」は 少し白みがかっているような気がしませんか？右側の#000000ブラックに比べると、グレーにも見えてしまう、といっても過言ではないと思います。
【参考記事】THETHORの色見本
参考：実際のコード
実際に色の名前で指定したHTMLコードを掲載しておきます。RGB（#RRGGBB）で指定せずに、同じ色の名前「black」で指定していることがお分かりになると思います。
<span class="bgc-black">black（THETHOR）#191919</span>
上のコードでは、THETHORのクラス名「背景色-black」を指定し、下のコードでは、スタイルで「背景色を: black;」に指定しています。
<span style="background: black;">black（CSS）#000000black（CSS定義色）#000000</span>
実際のコードをコピー＆ペーストしても、黒くて細長いラインにしかなりませんが、色の比較は可能ですのでぜひ試してみてください。2つのHTML文（<span>要素）を並べて、間にスペース（空白）を1つ入れるとわかりやすいと思います。
91種類のクラス名は覚えなくてOK
91種類もクラス名があると、覚える必要があるの？と疑問に思うかもしれませんが、覚える必要はまったくありません。なぜなら、ビジュアルエディタで指定することが可能だからです。（ビジュアルエディタでの背景の指定方法はこちらの記事を参考にしてください）
また、91色の色の見本はこちらにありますので、色を参考にしたい場合はこのページでお調べいただくとよいと思います。使いやすい方法でご活用くださいませ。
といいつつ、テキストエディタで記述内容を把握したり、直接タグを書き込むことができるようになると作業がとても捗り、楽になりますので、このページではビジュアルエディタを使わない「bgc-クラス名」の指定の仕方をお伝えしますね。
bgc-○○の記述の仕方
まずはじめにHTMLとCSSの基本的なルールを確認します。クラス名はグローバル属性のひとつで、<div>要素や<span>要素など、ほとんどすべての要素に指定することができます。
ということは、HTMLとCSSの記述ルールに沿った方法で、このクラス名を使用することができるということですね。
「い・ろ・は」から始めるために こんにちは。はじめまして。。お疲れ様です。。。さとのかwebの「さとのか」でございます。 ホームページを作りたい！作ってみたい！作り始めたけどイマイチ分からない！という方に大変役立つ、ワードプレスとテ[…]
例：文字が書かれている行の背景色に指定する
ビジュアルエディタで入力した文字などに「背景」を指定したいと思っても、［スタイル］ボタンから直接指定することはできません。
＜要素名 空白 属性名＝”値”＞テキストなどのコンテンツ＜／要素名＞
上記のHTMLの記述ルールに当てはめると下のような構成になります。
＜span 空白 class＝”bgc-○○”＞テキストなどのコンテンツ＜／span＞
実際のHTML文は以下のような一文です。
<span class="bgc-Vyellow">背景がVyellow色になります</span>
テキストエディタに記述すると、ビジュアルエディタにも反映されます。
背景がVyellow色になります
このような感じでクラス名を指定すれば、ビジュアルエディタで背景色の指定の方法がわからないと思っていたパーツなども直接書き込むことでサイトに反映させることができるので、この方法を知っているととても便利です。
【参考記事】スタイルボタンから背景を指定する
bgc-クラス名が指定できる場所
class属性はグローバル属性でほとんどの要素に指定可能ですが、「bgc-クラス名」が反映されない場所もあります。
「bgc-クラス名」が反映される場所と反映されない場所を知ることは、思い通りのサイトを作るためには欠かせない情報です。そこで「bgc-クラス名」の指定の可否や反映の有無などをお伝えします。
調べ方
表にまとめた内容は、以下の3つです。
- ビジュアルエディタの［スタイル］ボタンで背景の設定ができるか否か
- テキストエディタで「bgc-クラス名」を指定することができるか否か
- （比較データとして）テキストエディタで「background」で背景の指定ができるか否か
上記の3つに対して、補足がある場合は備考欄に掲載しています。
- 補足的な内容
- パーツスタイル設定で、背景の指定ができるか否か
ビジュアルエディタのメニュー画像を添付し、各ボタンに数字を振りました。この数字は下の表の数字とリンクしていますので、表の数字から調べたり、ビジュアルエディタのボタンから調べたりすることが可能です。
また、表の右下をドラッグすることで、表の大きさを自由に変更できますので、お好みに応じた見やすい画面にしてご活用ください。
bgc-クラス名の設定可否と比較表
表の見方を参考に表をご覧ください。クロムやエッジでは、表の右下の角をドラッグすると表の大きさを自由に変更できますので、見やすい大きさにしてご覧ください。（スマートフォンでは対応していないようなのでスクロールしてご覧になってください）
表の見方
■縦軸［スタイルボタン］
ビジュアルエディタのスタイルボタンからクリックだけで指定できる？（〇or×）
■縦軸［bgc-○○］
テキストエディタでTHE THORのカラーコードを入力すると背景に反映する？（〇or×）
■縦軸［background］
テキストエディタでCSSでbackground（背景色）の指定はできる？（〇or×）
| ビジュアルエディタで 直感的な操作 |
テキストエディタで 直接記述 |
備考 | ||||
|---|---|---|---|---|---|---|
| パーツ・ 要素名など |
スタイル ボタン |
bgc- ○○ |
back ground |
説明 | パーツスタイル設定他 | |
| 見出し(5) h1～h5要素 |
× | 〇 | 〇 | パーツスタイル設定あり。タグに直接書き込んだ背景色がある場合、その上に反映 | ||
| 段落(5～) テキスト等 |
× | 〇 | 〇 | span要素やdiv要素などにも指定可能 | サイト全体の背景色はカスタマイザーで指定可能 | |
| 番号なしリスト(8) ul要素 |
× | 〇 （下） |
〇 （下） |
li要素の下に反映 |
パーツスタイル設定あり。背景色を含めたデザインを指定可能 | |
| リスト項目(8) li要素 |
〇 | 〇 （中） |
〇 （上） |
ul要素の上に反映（インライン） |
||
| 番号付きリスト(9) ol要素 |
× | 〇 （下） |
〇 （下） |
li要素の下に反映 |
||
| リスト項目(9) li要素 |
〇 | 〇 （中） |
〇 （下） |
ol要素の上に反映（インライン） |
||
| 引用(10) blockquote要素 |
〇 | 〇 | 〇 | パーツスタイル設定あり。bgc-を指定すると、パーツ設定の背景色が反映されなくなるので注意 | ||
| 打消し線(19) del要素 |
× | 〇 | 〇 | del要素に直接書き込むとアンダーライン風の背景になる（インライン） |
||
横ライン(20)hr要素 |
× | △ （※） |
△ （※） |
反映箇所が狭いので背景として見辛い。線種はプリセットパーツ「区切り線」で選択可能 | ||
| テーブル(30) th要素 |
〇 （※） |
〇 | 〇 | 奇数行でもbgc-が反映する | パーツスタイル設定あり。奇数行と偶数業の色の指定ができる | |
| 奇数行(30) td要素 |
× | × | 〇 | 奇数行はbgc-は反映しない | ||
| 偶数行(30) td要素 |
〇 | 〇 | 〇 | |||
| マーカー(33) span要素 |
× （※） |
× （※） |
× （※） |
マーカーの色を変えることはできないが、背景の指定は可能。２色のラインが重なるように見える | パーツスタイル設定はあるが、背景指定やラインの色の設定はできない | |
| ラベル(33) span要素 |
〇 | 〇 | × （※） |
(※)ラベルが消えるので注意（span要素が残る） | パーツスタイル設定はあるが、背景を指定する項目はない | |
| ボタン（33） a要素 |
〇 | 〇 | × (※) |
(※)ラベルが消えるので注意（span要素が残る） | 〃 | |
| ボックス（33） div要素 |
〇 | 〇 | 〇 要確認 （※） |
(※)成形済みのボックスの場合は挙動を確認しながら行う | 〃 | |
| 区切り線（34） hr要素 |
× | △ （※） |
〇 | (※)直接記述しても反映箇所が狭くて見辛い | （hr要素にクラス名がついたパーツ） | |
| 吹き出し (34) |
背景 | × | × | × (※) |
吹き出し部すべてに色を付けることはできない（コメント部の長方形だけなら可能） | パーツスタイル設定あり。おすすめはパーツスタイルでの背景設定（理由：競合して背景が反映されなくなるから） |
| ボーダー | × | × | × (※) |
|||
| スコア ボックス (34) |
奇数行 | × | × | 〇 | テーブルと同じく、奇数行は不可能 | 個別のパーツスタイル設定はなく、テーブルデザインと共通なので細かな設定はできない |
| 偶数行 | 〇 | 〇 | 〇 | テーブルと同じく、偶数行は可能 | ||
| 最終行 | × | × | 〇 | bgc-指定はできないが、背景色の変更は可能 | ||
| 口コミ ボックス （34） |
背景 | × (※) |
〇 （※） |
〇 （※） |
(※)指定されているコードを削除して指定しなおせば可能 | パーツスタイル設定なし |
| ボーダー | × (※) |
〇 （※） |
〇 （※） |
|||
| レビュー ボックス (34) |
背景 | 〇 （※） |
〇 | 〇 | 塗り残しが出るため、テキストエディタでタグ(要素)を確認しながら記述するとベスト | パーツスタイル設定なし |
| ボーダー | 〇 （※） |
〇 | 〇 | |||
| アコーディオン ボックス (34) |
背景 | 〇 | 〇 | 〇 | パーツスタイル設定なし | |
| ボーダー | △ （※） |
△ （※） |
〇 | ボーダースタイルなので一部の背景指定は効かない | ||
| 共通ボタン (35) |
プライマリ セカンダリ |
× | × | × | パーツスタイル設定で色を指定 | |
| ノーマル | 〇 （※） |
〇 | 〇 | ※ ボタンテキストを選択して設定すれば可能 | ||
| カラム(36) | 〇 （※） |
〇 | 〇 | パーツスタイル設定なし | ||
| アイコン(37) | × | 〇 取扱注意! （※） |
〇 取扱注意! （※） |
※ コンテンツを入力せずにタグをいじるとアイコンが消えることがあるので注意 | パーツスタイル設定なし (ボックスに使用されるアイコンの設定は有り) |
|
bgc-クラス名を指定できる要素
THETHORでは、ビジュアルエディタから挿入するパーツ以外にも、要素によって初期スタイルが指定されているものがあります。本記事に使用している以下3つの要素も、グレーの成型データとなってビジュアル画面に現れます。
- pre要素
- dt要素
- dd要素
これらの要素も、当ページでお伝えしたbgc-のクラス名が使用できますので、記事を作成する際はぜひ、プラスアルファのカスタマイズでアレンジしてくださいね。
そのほかにも、要素（タグ）を書き込んだ際に予想外の要素のビジュアルが現れたときには、ぜひ、プラスカスタマイズをして、見やすくアレンジしてみてくださいね。
pre・dt・dd要素には、スタイルボタンからカラー指定ができます。
background・background-colorまとめ
ワードプレスのテーマ「ザ・トール」を使って背景色を指定する場合は、bgc-○○というクラス名を使うことができます。
しかし、すべての背景指定にこのクラス名を使用できるわけではないので、スタイルを直接書き込んだり、CSSで指定したりして、使い分けていく必要があります。
背景がうまく反映されていないと感じたときは、テキストエディタでの記述を確認してみましょう。bgc-クラス名がたくさん記述されていないか、指定したはずのbgc-クラス名が消えてしまっていないか、確認してみましょう。
お疲れさまでした。
ワードプレスのテーマTHETHORには、たくさんの機能が備わつています。「色の指定」もそのうちのひとつです。 ザ・トールでは、色に名前を付けて様々なパーツに指定できるような工夫がされていて、名前の付けられている色は全部で91色[…]
