【THE THOR】ボックスのカスタマイズ方法とおすすめのデザイン

当ページのリンクには広告が含まれています。

「THE THOR(ザ・トール)」で最初から設定されているデフォルトの「ボックス」を当サイトのイメージに合うようカスタマイズしてみました!


ボックスのデザインを変更したり、色を変更したり、自由にカスタマイズ出来るのでオススメです。

◎ ボックスのカスタマイズ方法
◎ おすすめのデザイン

をご紹介します。

※ CSSを使わないので、誰でも簡単にアレンジ出来ちゃいます!


ボックスをカスタマイズするには

THE THORのボックスをカスタマイズするには2パターンあります。

1. カスタマイズ機能を利用する方法
2. CSSを指定する方法


【CSSとは?】
CSS(カスケーディングスタイルシート)は、Webサイトのスタイルを指定するための言語です。
(例:文字の色や大きさ、背景の色、要素を表示する位置などはCSSで指定します。)

誰でも簡単にカスタマイズ出来るようTHE THORのカスタマイズ機能を利用するので安心してくださいね!

 
ひまわり
色を変更するだけでも、サイトがいい感じになりますね!
目次

ボックスをカスタマイズする画面

■【ボックスをカスタマイズする画面】

WordPress管理画面のメニューから
外観 → カスタマイズ → パーツスタイル設定[THE] → ボックス設定

と進みます。


THE THOR「ボックス」サンプル

当サイト「ハピマ☆ベスト」で利用しているデザインと色をご紹介します。
マネしたい場合は、コピペだけで同じデザイン・色が使えます。

【カスタマイズする方法】

■ 気に入ったデザインがあれば、
 → スタイル「ep-boc……」の部分をボックス設定にコピー&ペースト

■ 色を変更したい場合は
 → 好みの色のカラーコードを確認して変更する

 ◎文字色: ftc-”カラーコード”
 ◎背景色:  bgc-”カラーコード”
 ◎ボーダー色: brc-”カラーコード”

 ※色を変更したい部分に”カラーコード”をコピペするだけ!

 カラーコードはこのページをチェック!! ↓↓↓

【関連記事】THE THORで使えるカラーコード色見本

 


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

■既存:「サブタイトルボックス」
 → 結構使えるデザインなので変更していません。

■スタイル: ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred
■カラーコード: DPred

2. シンプルボーダーボックス

■既存:「BIG括弧ボックス」
 → 色もデザインも全て変更しました。

■スタイル: ep-box bgc-white brc-Lpink es-borderSolidM es-radiusL
■カラーコード: Lpink
 

3. 方眼ペーパーボックス

■既存:「方眼ペーパーボックス」
 → 背景の色だけをピンクに変更しました。

■スタイル: ep-box es-BpaperRight es-grid bgc-VPpink
■カラーコード: VPpink


4. 付箋ペーパーボックス

■既存:「はてなボックス」
 → 色もデザインも全て変更しました。

■スタイル: ep-box bgc-white brc-Vpink es-LborderSolidM es-shadow
■カラーコード:
 

5. サークルアイコンチェックマーク

■既存:「ビックリボックス」
 → 色もデザインも全て変更しました。

■スタイル: ep-box bgc-white brc-DPred es-borderSolidS es-BiconCorner icon-checkmark
■カラーコード:DPred

6. Qボックス

■既存:「Qボックス」
 → 変更なし

■スタイル: ep-box es-BmarkQ bgc-white
■カラーコード: 設定なし

7. Aボックス

■既存:「Aボックス」
 → 変更なし

■スタイル: ep-box es-BmarkA bgc-white
■カラーコード:設定なし

8. シンプルシャドーボックス

■既存:「シンプルアイコンボックス」
 → 色もデザインも全て変更

■スタイル: ep-box bgc-VPpink es-shadow
■カラーコード:VPpink

9. シンプルシャドーボックス

■既存:「背景アイコンボックス」
 → シンプルアイコンボックス VPblue

■スタイル: ep-box bgc-VPblue es-shadow
■カラーコード:VPblue

10. 点線BOX LDpink

■既存:帯アイコンボックス
 → 色もデザインも全て変更

■スタイル: ep-box bgc-white brc-Lpink es-borderDashedM es-radiusL
■カラーコード: LDpink
目次