THE THOR ザ・トール シンプルなボックスを作る

THE THOR では様々なボックスを自分で作り出すことができます。

 

ここでは比較的簡単に作れるボックスを紹介します。

基本的には THE THOR のスタイル機能のみで作っています。なのでコードはテキストエディタに貼り付けます。

 

シンプル ボックス 帯タイトル

 

帯タイトルのボックスは色々な作り方がありますが、ここではデフォルトの「全域タイトル」の機能を使っています。

 

枠無しなのでなじみやすいボックスです。

コードを表示

<div class="ep-box bgc-VPmagenta ftc-DLmagenta">
<div class="ep-inbox es-Bwhole bgc-Lmagenta ftc-white es-bold es-TpaddingSS es-BpaddingSS">帯タイトルのボックス：ピンク</div>
とてもシンプル
とてもピンク</div>

 

---

 

コードを表示

<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>

 

---

 

コードを表示

<div class="ep-box bgc-VPlime ftc-DLlime">
<div class="ep-inbox es-Bwhole ftc-white es-bold es-TpaddingSS es-BpaddingSS bgc-Llime">帯タイトルのボックス：ライム</div>
とてもシンプル
とてもライム</div>

 

シンプル ボックス 角丸枠付き

 

枠の付いたパターン。帯タイトルより独立した雰囲気で目立ちます。

影を付ける場合は最初のボックスのコードにes-shadowを追加してください。

 

 

コードを表示

<div class="ep-box es-radiusL bgc-VPyellow es-borderSolidM brc-DPyellow ftc-DGyellow">
<div class="ep-inbox es-Bwhole es-TpaddingSS es-BpaddingSS bgc-DPyellow ftc-white es-bold">囲いのついた角丸 シンプルなボックス</div>
角が丸い
囲いがつくかっこいー</div>

 

---

 

コードを表示

<div class="ep-box es-radiusL es-borderSolidM brc-DPnavy ftc-DGnavy bgc-VPnavy">
<div class="ep-inbox es-Bwhole es-TpaddingSS es-BpaddingSS ftc-white es-bold bgc-DPnavy">囲いのついた角丸 シンプルなボックス</div>
角が丸い
囲いがつくかっこいー</div>

 

---

 

コードを表示

<div class="ep-box es-radiusL es-borderSolidM brc-DPgreen bgc-VPgreen ftc-DGgreen">
<div class="ep-inbox es-Bwhole es-TpaddingSS es-BpaddingSS ftc-white es-bold bgc-DPgreen">囲いのついた角丸 シンプルなボックス</div>
角が丸い
囲いがつくかっこいー</div>

 

シンプル ボックス 切り抜き

 

タイトルで切り抜いたようなボックス。枠が付いたほうがそれっぽい。

 

コードを表示

<div class="ep-box bgc-Borange es-shadow">
<div class="ep-inbox es-round es-TpaddingSS es-BpaddingSS bgc-white ftc-Borange es-bold es-center es-shadowInL">抜きのある シンプルなボックス</div>
<div class="ftc-white es-center es-bold">だんだんシンプルでなくなる
文字をセンター揃え</div>
</div>

 

---

 

コードを表示

<div class="ep-box bgc-Bpurple es-shadow">
<div class="ep-inbox es-round es-TpaddingSS es-BpaddingSS bgc-white ftc-Bpurple es-bold es-center es-shadowInL">抜きのある シンプルなボックス</div>
<div class="ftc-white es-center es-bold">PC横いっぱいはつらい
タイトル文字を大きくしても良いかも</div>
</div>

 

---

 

コードを表示

<div class="ep-box bgc-Bturquoise es-shadow es-borderSolidM">
<div class="ep-inbox es-round es-TpaddingSS es-BpaddingSS bgc-white ftc-Bturquoise es-bold es-center es-shadowInL es-borderSolidM ftc-black">抜きのある シンプルなボックス</div>
<div class="ftc-white es-center es-bold ftc-black">だんだんシンプルでなくなる
ボタン要素で作ると小さくしてセンター寄せなどができる</div>
</div>

 

・スタイルの基本的な操作方法はこちら

 

シンプルボックス 角タイトル

 

ラベルを使ったシンプルボックス。パターンを作ると際限なく出来てしまう。

使い勝手の良いボックス。

 

コードを表示

<div class="ep-box es-borderSolidM bgc-white"><span class="ep-label es-Lcorner bgc-black ftc-white es-shadowD">角にタイトルつき</span>
これは意外と使えそう！
タイトルに影つき</div>

 

---

 

コードを表示

<div class="ep-box es-borderSolidM bgc-white brc-DPred"><span class="ep-label es-Lcorner bgc-DPred ftc-white">角にタイトルつき</span>
これは意外と使えそう！
影は黒じゃないとつけられない</div>

 

---

 

コードを表示

<div class="ep-box es-TpaddingSS es-borderSolidM bgc-white es-LpaddingM es-RpaddingM"><span class="ep-label es-Lcorner bgc-white es-bold">タイトル飛び出し</span>
少しとびだしてみた。メインの背景が白じゃないとツライ。</div>

 

---

 

コードを表示

<div class="ep-box es-TpaddingSS es-borderSolidM bgc-white es-LpaddingM es-RpaddingM es-center"><span class="ep-label es-LmarginL es-Lcorner bgc-white"><b>センターにタイトル飛び出し</b></span>
少しとびだしてみた。もちろん色を付けることも出来る。</div>

 

---

 

コードを表示

<div class="ep-box es-TpaddingSS es-borderSolidM bgc-white es-LpaddingM es-RpaddingM es-center"><span class="ep-label es-LmarginL es-Lcorner es-borderSolidM brc-black bgc-Lyellow"><b>センターにタイトル飛び出し</b></span>
少しとびだしてみた。枠も付く</div>

 

---

 

コードを表示

<div class="ep-box es-TpaddingSS es-borderSolidM bgc-white es-LpaddingM es-RpaddingM brc-Lnavy ftc-VDgray"><span class="ep-label es-Lcorner es-bold bgc-Lnavy es-RpaddingSS es-LpaddingSS es-radius ftc-white">タイトル飛び出し</span>
これが出来るとデフォルトのサブタイトルボーダーボックスはいらないような気がする。</div>

 

---

 

コードを表示

<div class="ep-box es-TpaddingSS es-borderSolidM bgc-white es-LpaddingM es-RpaddingM ftc-VDgray brc-Lpink"><span class="ep-label es-Lcorner es-bold es-RpaddingSS es-LpaddingSS es-radius ftc-white bgc-Lpink">タイトル飛び出し</span>
タイトルの縦センターはとれてないけどこの方がバランスが良い気がする。</div>

 

あとがき

 

コードはテキストエディタに貼り付けて簡単に使用ができます。使用は自己責任のもとお願いします。

色の変更などもスタイルから可能ですが、一部の設定はテキストエディタで直接入力しないと反映されないものがあります。

THE THOR のカラーコード一覧はこちら