WordPressのテーマでも有名な「THE THOR」で使えるボックス一覧です。コピーして使ってみてください。99％くらいは自分用です。（笑）
目次
ボックスの使い方
ボックスはdivタグにclass属性に特定の属性値を指定して使います。例えば以下のように書きます。
|
1 |
<div class="ここでボックスの種類を指定">ボックス内の文章など</div> |
THE TROHでは最初からボックスのcssスタイルを設定してくれているので、それを上の「class=” “」のところにコピペすれば完了です。
ただ、ボックスのビジュアルも気になると思いますので、以下を参考にしてください。
また、上記の「タグ」や「属性」「属性値」が分からない場合はコチラの記事でご確認ください。
ボックス一覧
THE THORで初期設定されているボックスの一覧です。divタグの開始タグにコピペして追加してください。
以下では、各ボックスのソースコードとそのコードの実行結果を書いています。
サブタイトルボーダーボックス
|
1 2 3 4 5 |
<div class="ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred" title="タイトルを表示"> <p>タイトルをつけることができるボックスです。</p> </div> |
タイトルをつけることができるボックスです。
titleの属性値を変更すれば好きなタイトルに変えられます。
BIG括弧ボックス
|
1 2 3 4 5 |
<div class="ep-box es-Bbrackets bgc-white es-center es-bold es-FbigL" > <p>大きいカッコですね。</p> </div> |
大きいカッコですね。
方眼紙ペーパーボックス
|
1 2 3 4 5 |
<div class="ep-box es-BpaperRight es-grid bgc-VPsky" > <p>方眼紙のデザインです。きれいですね♪</p> </div> |
方眼紙のデザインです。きれいですね♪
はてなボックス
|
1 2 3 4 5 |
<div class="ep-box es-BmarkHatena es-borderSolidS bgc-white brc-DPblue es-radius" > <p>はてなマーク付きのボックスです。</p> </div> |
はてなマーク付きのボックスです。
ビックリボックス
|
1 2 3 4 5 |
<div class="ep-box es-BmarkExcl es-borderSolidS brc-DPred bgc-white es-radius" > <p>ビックリマーク付きのボックスです。</p> </div> |
ビックリマーク付きのボックスです。
Qボックス
|
1 2 3 4 5 |
<div class="ep-box es-BmarkQ bgc-white" > <p>クエスチョンに使えるボックスです。</p> </div> |
クエスチョンに使えるボックスです。
これは囲が無いタイプのボックスですね。
Aボックス
|
1 2 3 4 5 |
<div class="ep-box es-BmarkA bgc-white" > <p>アンサーに使えるボックスです。</p> </div> |
アンサーに使えるボックスです。
これも囲はありません。ちょっと「A」の文字が寂しい気がします。（笑）
シンプルアイコンボックス
|
1 2 3 4 5 |
<div class="ep-box es-Bicon icon-tag bgc-VPorange" > <p>タグっぽいデザインのボックスですね。</p> </div> |
タグっぽいデザインのボックスですね。
背景アイコンボックス
|
1 2 3 4 5 |
<div class="ep-box es-BiconBg icon-pushpin bgc-VPlime" > <p>押しピンのデザインです。</p> </div> |
押しピンのデザインです。
帯アイコンボックス
|
1 2 3 4 5 |
<div class="ep-box icon-heart es-BiconObi es-borderSolidS" > <p>ハートマークです。</p> </div> |
ハートマークです。
まとめ
class属性の設定次第ではいろいろなボックスを作れそうですが、すでにラインナップは充実していますね。
他にもボックスinボックスなんかもあるみたいなので、追加していきます。