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

当サイトではワードプレスのテーマ THE THOR を使用中です。

 

THE THOR が気になっている人はこちらをどうぞ↓

THE THOR とは? 『ザ・トール レビュー』

公式サイトTHE THOR の魅力

 

機能が豊富な THE THOR は使いこなせば素晴らしいテーマです。今回は THE THOR 導入当初に使い方のわかりにくかった サブタイトルボーダーボックス の使い方。

 

 




THE THOR
サブタイトルボーダーボックスとは

 

サブタイトルボーダーボックスとはこんな感じのボックスです↓

サブタイトルボーダーボックスです。よろしくお願いします!

 

 

初期設定では文字は入っていません↓こんな感じ

 

 

これのサブタイトル部分に文字を入れたいのですが皆さんどうします?

僕の直感では赤い部分にカーソルを持っていって文字打ちします。でもそれでは文字が打てませんでした。

 

サブタイトルボーダーボックス の使い方

 

  1. スタイル → サブタイトルボーダーボックスでボックスを表示
  2. ボックス内にカーソルを置いたままサブタイトル編集 → タイトルを入力
  3. ボックス内に本文打ち込む

 

 

THOR サブタイトル

 

画像の下にあるボックスは色々試して苦労している図です。でも試行錯誤の末、使う手順がわかりました。

 

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

 

慣れれば違和感なし

↑ここまで準備してください。この状態を基本にいじっていきます。

 

ボーダーの色を変更

  1. 文字を選択(文字がないと変更ができません)
  2. スタイル → カラーセット → ボーダー色 で変更したい色を選択
  3. もともと選ばれているカラー(この場合はディープレッド)を選択解除

 

同じような手順で背景色も変更が可能です。

 

背景色を変更

  1. 文字を選択(文字がないと変更ができません)
  2. スタイル → カラーセット → 背景色 で変更したい色を選択
  3. もともと選ばれているカラー(この場合はホワイト)を選択解除

 

サブタイトル部分のカラー変更のやり方

サブタイトル部分の変更は特殊です。

操作手順
外観 → カスタマイズ → パーツスタイル設定[THE] → その他エディタ用パーツ設定 → サブタイトルのボックスカラー

 

上記の設定場所でサブタイトル部分の 文字色 / 背景色 / 線色 の変更ができます。

設定を変更するとサイト内のサブタイトルボーダーボックス全てに適用されます。

 

サブタイトルのカラーを変更

 

CSSを使い個別にサブタイトルボーダーボックスの色を変更できるようにしました。

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

関連記事

THE THOR 記事一覧 THE THORのサブタイトルボーダーボックスは利用頻度の高いスタイルです。 ボーダーの色やボックスの背景色は自由に変更が可能です。 ・THE THOR(ザ・トール)サブタイトルボーダーボックスの使い方 [[…]

 

 

余談:THE THOR の設定選択の特徴

 

THE THOR の設定選択は操作が独特です。

設定選択をするたびに項目が追加されていきます。例えば、レッドのあとにブラックを選んだらレッドとブラックの両方が選択された状態になります。

実際に表示されるのは内部的に優先順位の高いほうです。優先順位は選択項目の後半になればなるほど優先となります。

上記の例でいうと、レッドのあとにブラックを選んだ場合はブラックが表示されます。逆にブラックのあとにレッドを選んでもブラックのほうが優先順位が高いためブラックのままとなります。レッドを表示するにはブラックの選択を解除しなければなりません。(もう一度選択すると解除される)

選択の優先順位

設定を変更するときは前の設定を解除するクセをつけましょう。慣れてしまえば特に苦労することなく操作ができます。

 

 

あとがき

 

サブタイトルボーダーボックスは頻繁に使うボックスです。

サイトに合わせた配色を決定して統一感のあるサイトデザインを目指しましょう。

 

THE THOR 記事一覧

>ダミーのタイトルをいれて高さを保つ

ダミーのタイトルをいれて高さを保つ