THE THORには文字列をクリック操作だけで簡単に装飾できる機能が備わっています。今回はその中から ボックス について紹介したいと思います。
ボックス一覧
ボックス
ボックスのバリエーションはデフォルトパーツも合わせて11種類用意されています。
デフォルトパーツのボックス
<div class="ep-box">デフォルトパーツのボックス</div>
サブタイトルボーダーボックス
<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred" title="サブタイトル">サブタイトルボーダーボックス</div>
BIG括弧ボックス
<div class="ep-box es-Bbrackets bgc-white es-center es-bold es-FbigL">BIG括弧ボックス</div>
方眼ペーパーボックス
<div class="ep-box es-BpaperRight es-grid bgc-VPsky">方眼ペーパーボックス</div>
はてなボックス
<div class="ep-box es-BmarkHatena es-borderSolidS bgc-white brc-DPblue es-radius">はてなボックス</div>
ビックリボックス
<div class="ep-box es-BmarkExcl es-borderSolidS brc-DPred bgc-white es-radius">ビックリボックス</div>
Qボックス
<div class="ep-box es-BmarkQ bgc-white">Qボックス</div>
Aボックス
<div class="ep-box es-BmarkA bgc-white">Aボックス</div>
シンプルアイコンボックス
<div class="ep-box es-Bicon icon-tag bgc-VPorange">シンプルアイコンボックス</div>
背景アイコンボックス
<div class="ep-box es-BiconBg icon-pushpin bgc-VPlime">背景アイコンボックス</div>
帯アイコンボックス
<div class="ep-box icon-heart es-BiconObi es-borderSolidS">帯アイコンボックス</div>
ボックス内ボックス
デフォルトパーツのボックス内に配置した例です。
<div class="ep-inbox">デフォルトパーツのボックス内ボックス</div>
デフォルトパーツのボックス
<div class="ep-inbox es-Bwhole es-grada1 es-bold bgc-DLturquoise ftc-white es-center es-FbigL">ターコイズグラデタイトル</div>
デフォルトパーツのボックス
<div class="ep-inbox es-Bwhole bgc-white es-borderSolidS brc-VLgray es-bold es-Bicon icon-pencil2 es-FbigL">アイコンボーダータイトル</div>
デフォルトパーツのボックス
<div class="ep-inbox es-Bwhole bgc-DPsky ftc-white es-FbigL es-center es-bold es-TshadowD es-shadow es-BborderSolidM brc-white">ブルーシャドウタイトル</div>
<div class="ep-inbox es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred" title="サブタイトル">サブタイトルボーダーボックス</div>
<div class="ep-inbox es-Bbrackets bgc-white es-center es-bold es-FbigL">BIG括弧ボックス</div>
<div class="ep-inbox es-BpaperRight es-grid bgc-VPsky">方眼ペーパーボックス</div>
<div class="ep-inbox es-BmarkHatena es-borderSolidS bgc-white brc-DPblue es-radius">はてなボックス</div>
<div class="ep-inbox es-BmarkExcl es-borderSolidS brc-DPred bgc-white es-radius">ビックリボックス</div>
<div class="ep-inbox es-BmarkQ bgc-white">Qボックス</div>
<div class="ep-inbox es-BmarkA bgc-white">Aボックス</div>