【THE THOR】ラベル・ボックス・ボタンのパーツスタイルデザインの設定方法

全域タイトルボックスの利用について

全域タイトルボックスは、見出し部分をボックス幅いっぱいに表示したデザインのボックスです。
インボックスと組み合わせて使用します。

全域タイトルボックス表示サンプル

上の全域タイトルボックスのソースコードは下のようになります。

※上の図をクリックすると拡大表示されます。

1. 外側のボックス
   外側のボックスは、【ep-Box】を指定して記述して下さい。

2. 内側のボックス（見出し部分）
   内側のボックスが見出しになります。【ep-inbox】を指定して、このタグの中に【es-Bwhole】を記述して下さい。

カラー設定等を行った表示サンプル

見出し部分のパディング調整やカラー設定を行った場合のサンプルです。

ソースはコピー&ペーストで使用出来ます。

サンプルと同じ箇所に【タイトル】・【内容】の文字が入力してあります。

<div class="ep-box bgc-VPsky ftc-DLsky">
<div class="ep-inbox es-Bwhole ftc-white es-bold es-TpaddingSS es-BpaddingSS bgc-Lsky">タイトル
</div>内容</div>

サブタイトルボックスの利用について

サブタイトルボックスの書式サンプル

サブタイトルボックスの見出し部分に文字を入力するには、テーマ付属の属性コードとは別にタイトル表示用の属性を追加記述する必要があります。

※ 上図は、クリックすると拡大可能です。

1. サブタイトルボックス本体の設定
   カスタマイズに必要なスタイルの属性コードを記述してください。

    

2. テキストエディタで見出し部分のタイトルを設定する
   【title=””】をタグ内に追加し、””の中に見出し部分の文字を入力してください。

   ※ １の部分のコードの最後は””で閉じてから新しく２を追加してください。１に繋げて書いてしまうと正しく表示されません。

    

3. ビジュアルエディタで見出し部分のタイトルを設定する

   該当するボックスを選択している状態(見出しは選択出来ないのでボックスの文字を選択する)で、編集画面の【サブタイトル編集】から入力出来ます。

   【サブタイトル編集】に入力する度に内容が上書きされます。既に入っている文字に追加で記述することは出来ません。

   入力した内容をリセットしたい場合は、【サブタイトル編集】のダイアログボックスで空白のまま「OK」ボタンを押せば内容が消去されます。

    

見出し部分のカスタマイズ設定について

執筆時点(Ver.1.5.1)では、サブタイトルボックスの設定項目に不具合があります。

本来は全タイプのサブタイトルボックスの見出し部分の文字色・背景色・枠線色がカスタマイザーから設定可能である筈ですが、実際に設定出来るのは【es-BsubTradi】のみで、【es-BsubT】と【es-BsubTround】は、固定(下に値を記載)になっており、カスタマイザーから変更出来ない状況です。

デフォルトのスタイル(【es-BsubT】のみ変更しています)

カスタマイザーで設定可能な見出し部分の項目

(Ver.1.5.1の時点では【es-BsubT】のみ)

• 文字色
  見出し部分の文字色
  (ボックス内の文字には影響しません)

  ※【es-BsubT】と【es-BsubTround】は、白固定

   

• 背景色
  見出し部分の背景色

  ※【es-BsubT】と【es-BsubTround】は、#b60105で固定

   

• 線色
  見出し部分の枠線色

  ※【es-BsubT】と【es-BsubTround】は、透明な1px幅の線で固定

   

※カスタマイザーから設定可能なサブタイトルボックスの見出し部分の設定は共通になります。
ボックス１つずつに異なる設定をすることは出来ません。

Q&Aボックスの調整について

デフォルトのデザインは、「Q」と「A」の装飾が同一でなく、余白や文字サイズ等が異なっているので、デザインを統一した調整用のCSSを用意しました。
コピー&ペーストで利用可能です。

デフォルト表示サンプル

※ デフォルトでは、「A」の文字周りに装飾がなく、下線もありません。

CSS調整後の表示サンプル

※ 「A」の文字周りの装飾を「Q」と同じ形状の色違いにして下線を追加しました。

ボックスのカラー設定について

• Qボックスのアイコン周りの背景色
  【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【QボックスのQカラー】で変更してください。

   

• Aボックスのアイコン周りの背景色
  Aボックスのアイコン周りの背景色をCSSで【#dd9999】に設定しています。好きな色に変更して使用してください。

  【#dd9999】が記述されているところが2箇所ありますが、両方変更してください。

   

• Aボックスのアイコン文字色
  【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【AボックスのAカラー】で変更してください。

   

このスタイルを使用する場合は、【ダッシュボード】 → 【外観】 → 【テーマエディター】 → 【style-user.css】に下のソースコードをコピー&ペーストして下さい。

　CSSは右の「＋」をクリック

.content .es-BmarkQ {
	padding-top: 10px;
	padding-left: 50px;
}
.content .es-BmarkQ:before {
	top: 10px;
	left: 10px;
}
.content .es-BmarkQ:after {
	top: 40px;
	left: 20px;
}
.content .es-BmarkA {
	font-size:1.8rem;
	padding-top:10px;
	padding-left:50px;
	padding-bottom:10px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.content .es-BmarkA:before {
	top: 10px;
	left: 10px;
	background-color:#dd9999;
}
.content .es-BmarkA:after {
	content: "";
	position: absolute;
	top: 40px;
	left: 20px;
	border: 5px solid transparent;
	border-top: 5px solid #dd9999;
}