THE THOR ボックス使い方&一覧

WordPressのテーマでも有名な「THE THOR」で使えるボックス一覧です。コピーして使ってみてください。99%くらいは自分用です。(笑)

WordPressのテーマ関連の記事はコチラ

ボックスの使い方

ボックスはdivタグにclass属性に特定の属性値を指定して使います。例えば以下のように書きます。

THE TROHでは最初からボックスのcssスタイルを設定してくれているので、それを上の「class=” “」のところにコピペすれば完了です。

ただ、ボックスのビジュアルも気になると思いますので、以下を参考にしてください。

また、上記の「タグ」や「属性」「属性値」が分からない場合はコチラの記事でご確認ください。

ボックス一覧

THE THORで初期設定されているボックスの一覧です。divタグの開始タグにコピペして追加してください。

以下では、各ボックスのソースコードとそのコードの実行結果を書いています。

サブタイトルボーダーボックス

タイトルをつけることができるボックスです。

titleの属性値を変更すれば好きなタイトルに変えられます。

BIG括弧ボックス

大きいカッコですね。

方眼紙ペーパーボックス

方眼紙のデザインです。きれいですね♪

はてなボックス

はてなマーク付きのボックスです。

ビックリボックス

ビックリマーク付きのボックスです。

Qボックス

クエスチョンに使えるボックスです。

これは囲が無いタイプのボックスですね。

Aボックス

アンサーに使えるボックスです。

これも囲はありません。ちょっと「A」の文字が寂しい気がします。(笑)

シンプルアイコンボックス

タグっぽいデザインのボックスですね。

背景アイコンボックス

押しピンのデザインです。

帯アイコンボックス

ハートマークです。

まとめ

class属性の設定次第ではいろいろなボックスを作れそうですが、すでにラインナップは充実していますね。

他にもボックスinボックスなんかもあるみたいなので、追加していきます。

WordPress関連の記事はコチラ

THE TROHのボックスの使い方&一覧
最新情報をチェックしよう!

テーマの最新記事8件