「THE THOR(ザ・トール)」で最初から設定されているデフォルトの「ボックス」を当サイトのイメージに合うようカスタマイズしてみました！
ボックスのデザインを変更したり、色を変更したり、自由にカスタマイズ出来るのでオススメです。
◎ ボックスのカスタマイズ方法
◎ おすすめのデザイン
をご紹介します。
※ CSSを使わないので、誰でも簡単にアレンジ出来ちゃいます！
ボックスをカスタマイズするには
THE THORのボックスをカスタマイズするには２パターンあります。
1. カスタマイズ機能を利用する方法
2. CSSを指定する方法
【CSSとは？】
CSS(カスケーディングスタイルシート)は、Webサイトのスタイルを指定するための言語です。
（例：文字の色や大きさ、背景の色、要素を表示する位置などはCSSで指定します。)
誰でも簡単にカスタマイズ出来るようTHE THORのカスタマイズ機能を利用するので安心してくださいね！
ボックスをカスタマイズする画面
WordPress管理画面のメニューから
外観 → カスタマイズ → パーツスタイル設定[THE] → ボックス設定
と進みます。
THE THOR「ボックス」サンプル
当サイト「ハピマ☆ベスト」で利用しているデザインと色をご紹介します。
マネしたい場合は、コピペだけで同じデザイン・色が使えます。
■ 気に入ったデザインがあれば、
→ スタイル「ep-boc……」の部分をボックス設定にコピー＆ペースト
■ 色を変更したい場合は
→ 好みの色のカラーコードを確認して変更する
◎文字色: ftc-”カラーコード”
◎背景色: bgc-”カラーコード”
◎ボーダー色: brc-”カラーコード”
※色を変更したい部分に”カラーコード”をコピペするだけ！
カラーコードはこのページをチェック!! ↓↓↓
【関連記事】THE THORで使えるカラーコード色見本
1. サブタイトルボーダーボックス
■既存：「サブタイトルボックス」
→ 結構使えるデザインなので変更していません。
■カラーコード: DPred
2. シンプルボーダーボックス
■既存：「BIG括弧ボックス」
→ 色もデザインも全て変更しました。
■カラーコード: Lpink
3. 方眼ペーパーボックス
■既存：「方眼ペーパーボックス」
→ 背景の色だけをピンクに変更しました。
■カラーコード: VPpink
4. 付箋ペーパーボックス
■既存：「はてなボックス」
→ 色もデザインも全て変更しました。
■カラーコード:
5. サークルアイコンチェックマーク
■既存：「ビックリボックス」
→ 色もデザインも全て変更しました。
■カラーコード:DPred
6. Qボックス
■既存：「Qボックス」
→ 変更なし
■カラーコード: 設定なし
7. Aボックス
■既存：「Aボックス」
→ 変更なし
■カラーコード:設定なし
8. シンプルシャドーボックス
■既存：「シンプルアイコンボックス」
→ 色もデザインも全て変更
■カラーコード:VPpink
9. シンプルシャドーボックス
■既存：「背景アイコンボックス」
→ シンプルアイコンボックス VPblue
■カラーコード:VPblue
10. 点線BOX LDpink
■既存：帯アイコンボックス
→ 色もデザインも全て変更
■カラーコード: LDpink
