サブタイトルボーダーボックスのサブタイトル部の色を変更する

【THE THOR】サブタイトルボーダーボックスの色を変更する【CSS不要】

サブタイトルボーダーボックスの色を変更しているのに何故か反映されない。

「THE THOR」使用者用の会員フォーラムに書いて通りにしているのにそれでも変えられない…。

デフォルトの赤いコイツが憎く見えてきた…。

THE THORのサブタイトルボーダーボックスの色をデフォルト色から変更する方法

 

そんなお悩みをお持ちの方。お待たせいたしました。

会員フォーラムに書いてあることは本当なのです。
ですが十分に理解するには情報が不足しているかなと感じたので、今回はそこを補う記事を書きました。

THE THORではサブタイトル部とボーダー部を分けて設定する

どーーーーーーん!!!!!!

 

WordPress テーマTHE THORのサブタイトルボーダーボックスを色を変えるには、2ヶ所の設定を使わなければいけない

 

衝撃の事実。サブタイトルボーダーボックスとは…

 

実は サブタイトル + ボーダーボックス = サブタイトルボーダーボックス だった!!!

 

一見すると一つのボックスなんですが、まさか設定箇所が分かれているとは盲点でした。

THE THORのサブタイトルボーダーボックスの色を変更するポイントは以下の3つです。

 

  1. サブタイトル部は、カスタマイズ>パーツスタイル設定[THE]>その他エディタ用パーツ設定>サブタイトルボックスのカラーで変更
  2. ボーダーボックス部は、テキストエディタにのスタイル>カラーセット>ボーダー色で変更する
  3. ボーダー部は文字を2文字以上入力しないと反映されない

 

では、各部分の実際の変更方法をみていきましょう。

ボーダーボックス部分の色を変更する

サブタイトルボーダーボックスを作ったら、まずはボックス部分に2文字以上の文字を入力します。

文字を入力したら、現在の設定のディープレッドを解除します。

サブタイトルボーダーボックスのボーダーを色を解除する

 

するとボーダー部分が黒くなるかと思います。

サブタイトルボーダーボックスの初期色を解除した状態

ボーダー部分の色が黒くなったら、変更したいボーダー色を解除したときと同じように、テキストエディタのスタイルから設定していきます。

サブタイトルボーダーボックスのボーダー色を希望の色に設定する

 

この手順で、ボーダー部分の色を変更する事ができます。

サブタイトルボーダーボックスのボーダー色を変更できました

 

サブタイトル部とボーダー部の色を統一したい場合の注意点

現段階では、ボーダー色に指定できる色は、スタイルのカラーセットに設定されている91色のみのようです。

そしてこのカラーコードが「THE THOR」独自のものとなっていることにも注意が必要です。

 

なぜなら、ボーダー色の変更には独自のカラーコードを使用するけど、サブタイトル色の変更にはこのコードを使うことができないからです。

サブタイトル部の色を変更する際には、一般的なカラーコード(#rrggbb的な奴)を使用します。
サブタイトル部とボーダー部の色を別々の色で設定したい場合には問題ないのですが、これらの色を統一したい場合には独自カラーコードに相応する一般カラーコードが必要になってきます。

 

「THE THOR」で使用している独自のカラーコードとWEB上で一般的に使われているカラーコードの対応表が、ネイネイさんのブログに記載されていますので、こちらを参考にしてサブタイトル入力欄の色を設定していきましょう。

ネイネイの喜怒哀楽

こんにちは! また一つ変更ができるようになったネイネイ(@NEYNEYx2)です。 この記事では、WordPressテー…

 

 

サブタイトル部の色を変更する

サブタイトル部分はテキストエディタでは設定変更できません。

先述の通り、外観>カスタマイズ>パーツスタイル設定[THE]>その他エディタ用パーツ設定>サブタイトルボックスのカラーで変更します。

 

サブタイトルボーダーボックスのサブタイトル部の色を変更する
サブタイトルボーダーボックスのサブタイトル部の色を変更する

カスタマイズで設定変更するため、ここでの設定はサイト全体に反映されることとなります。
ボーダー部は記事ごとに変更することが可能ですが、サブタイトル部は固定されるので注意が必要です。

 

具体的なやり方はボーダー部と同様、文字色・背景色・線(ボーダー)色をそれぞれ指定します。
たとえば↓の感じで色を指定します。

 

サブタイトルボーダーボックスのサブタイトル部の色を変更する

 

そうすると指定した各色が、サブタイトル部のそれぞれに反映されます。
枠線の色が不要であれば、背景色と同じ色を指定すればOKです。

 

 

サブタイトルボーダーボックスのサブタイトル部の色を変更する

 

サブタイトルボーダーボックスの色変更まとめ

改めてまとめです。

  1. サブタイトルボーダーボックスはサブタイトル部とボーダーボックス部に分かれている
  2. それぞれ異なる箇所で設定する
  3. サブタイトル部とボーダー部の色を合わせたい場合、THOR独自のカラーコードと、通常のカラーコードの2つが必要になる

使い始めはとまどいもありますが、使い慣れればその機能性の高さに驚く、というテーマがこの「THE THOR」だと思います。
ぜひご自身でも色々試してみて、サイトのカスタマイズを楽しんでください。

【PR】相性が悪い占い師にあたる前に…無料でお試し電話占い

サービス名 特徴 無料お試し内容
電話占い
【ヴェルニ】
・auPayなど、多彩な支払方法
・キャッシュレス還元!
プライバシーマーク取得
・メッセージでやり取りできるアプリあり

最大2,500円分無料

無料登録

電話占い
【デスティニー】
・電話鑑定/1分185円~
・チャット鑑定/1分155円~
・メール鑑定/2,000円~
・入会金・月会費無料
前払いでボーナスポイント付与

毎月1回・10分無料

無料登録

【LINE】
トーク占い

・1分120円~(チャット1分100円~)
・在籍占い師1000名以上
・時間・場所を問わずに誰にも知られず相談できる
・LINE通知で鑑定可能時間がわかる

初回3,000円分無料

無料登録

電話占い
【リエル】

・通話料無料
・レビュー投稿で1,000ポイント
コンシェルジュがあなたの悩みに合った占い師を紹介

初回3,000円分無料

無料登録

電話占い
【ココナラ】

・ココナラコインも使用可能
1分100円からのお値打ち価格
・レビューが豊富でしっかり選べる
・占い以外のサービスも充実

初回最大30分無料

無料登録

 

サブタイトルボーダーボックスのサブタイトル部の色を変更する
有益でないTwitterはコチラから