エディタからデフォルトで選べるボックスデザインを変更する方法と、デザインサンプルを60個まとめてみました。
THE THOR のパーツデザインの仕組みについてはこちらの記事にまとめてありますので、自分で各パーツをカスタマイズしてみたい方は参考にしてください。
THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがな[…]
エディタに表示される基本デザインの変更方法
カスタマイザーから基本スタイルを設定する
カスタマイザーの「パーツスタイル設定」から「ボックス設定」へ進むと、10種類のスタイルを設定できるようになっています。この10個のスタイルが、各エディタから選ぶことのできる基本スタイルです。
デフォルトで設定されている10種類のボックスを好みのものに変更するには、「ボックス設定」の「スタイル」の部分を編集します。（画像はボタン設定のものです）
お好きなボックスサンプルのコードを「スタイル」部分にコピペして、「タイトル」を任意のものに変更してください。作成したスタイルをエディタから選べるようになります。
ボックスの配色を変更する方法
下のサンプルコードのうち、「bgc-」で始まるものがボックスの背景色、「ftc-」で始まるものが文字色、「brc-」で始まるものが枠線色を指定している部分です。こちらの記事に色設定用のコードを一覧にしてありますので、好みの色に差し替えてご利用ください。
カスタマイザーのパーツ設定やテキストエディタからの投稿時用に、各パーツに設定できる色を一覧にしてみました。12色×7トーン＋モノトーン7色の計91色を、文字色・背景色・ボーダーの色、それぞれ別に指定できます。ボタンのサンプル[…]
ビジュアルエディタ利用の場合は、サンプルをそのままコピペして登録し、記事作成時にエディタから各部分の色を変更することもできます。
アイコンを変更する方法
アイコン付きのボックスの場合、「icon-」で始まるコードで表示するアイコンを指定しています。エディタの「アイコンオプション」というボタンから全アイコンのコードをコピーすることができますので、アイコンを変更したい場合は好みのものに差し替えてください。
アイコン・マーク・サブタイトルボックスの配色を変更する方法
カスタマイザーの「パーツスタイル設定」から「その他エディタ用パーツ設定」へ進むと、アイコンの背景色・各特殊ボックスのマークの色・サブタイトルボックスの配色を変更できます。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボックスの場合、アイコンの背景色部分がここで指定した色になります。（アイコンは白色で表示されます）
シンプルなボックス
枠線なし
style
ep-box bgc-VPskystyle
ep-box bgc-VPsky es-radiusLstyle
ep-box bgc-VPsky es-shadowstyle
ep-box bgc-VPsky es-radiusL es-shadow枠線あり
style
ep-box bgc-white brc-Lsky es-borderSolidSstyle
ep-box bgc-white brc-Lsky es-borderSolidS es-radiusLstyle
ep-box bgc-white brc-Lsky es-borderSolidMstyle
ep-box bgc-white brc-Lsky es-borderSolidM es-radiusLstyle
ep-box bgc-white brc-Lsky es-borderDashedMstyle
ep-box bgc-white brc-Lsky es-borderDashedM es-radiusL付箋・ペーパー風
style
ep-box bgc-white brc-Lsky es-LborderSolidM es-shadowstyle
ep-box bgc-white brc-Lsky es-BborderSolidM es-shadowstyle
ep-box bgc-VPsky es-BpaperRightstyle
ep-box bgc-VPsky es-BpaperLeftアイコン付きボックス
シンプルなアイコン付きボックス
style
ep-box bgc-VPsky es-radius es-Bicon icon-checkmark2style
ep-box bgc-VPmagenta ftc-Bmagenta es-radius es-shadow es-Bicon icon-blockedstyle
ep-box bgc-white ftc-Lgray brc-Lgray es-radius es-borderSolidS es-Bicon icon-attachment背景にアイコン
中身が1行だとアイコンがはみ出すので注意
style
ep-box bgc-VPsky es-radius es-BiconBg icon-pacman中身が1行だとアイコンがはみ出すので注意
style
ep-box bgc-VPpink es-radius es-shadow es-BiconBg icon-heart中身が1行だとアイコンがはみ出すので注意
style
ep-box bgc-white brc-VLgray es-borderSolidM es-radius es-BiconBg icon-bullhorn帯にアイコン
style
ep-box bgc-VPsky es-BiconObi es-radius es-shadow icon-pencilstyle
ep-box bgc-VPsky es-BiconObi brc-Bsky es-borderSolidS icon-point-rightサークルアイコン
style
ep-box bgc-white brc-Bsky es-borderSolidS es-BiconCorner icon-checkmarkstyle
ep-box bgc-white brc-Bsky es-borderSolidS es-BiconCircle icon-checkmarkstyle
ep-box bgc-white brc-Bsky es-BborderSolidM es-shadow es-BiconCircle icon-checkmark用途別アイコン付きボックス
NEWボックス
style
ep-box bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-radius es-Bicon icon-newstyle
ep-box bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-radius es-Bicon icon-newstyle
ep-box bgc-VPsky es-BiconObi icon-newstyle
ep-box bgc-VPsky es-BiconCorner icon-newstyle
ep-box bgc-VPsky es-BiconCircle es-radius icon-new注意ボックス
style
ep-box bgc-white ftc-Lmagenta brc-Lmagenta es-borderSolidS es-radius es-Bicon icon-warningstyle
ep-box bgc-white ftc-Lmagenta brc-Lmagenta es-borderSolidM es-radius es-Bicon icon-warningstyle
ep-box bgc-VPmagenta ftc-Bmagenta es-radius es-Bicon icon-warningstyle
ep-box bgc-white ftc-Bmagenta brc-Bmagenta es-LborderSolidM es-shadow es-Bicon icon-warningデフォルトのボックスのアレンジ
ハテナボックス
style
ep-box es-BmarkHatena bgc-white brc-Lblue es-borderSolidM es-radiusstyle
ep-box es-BmarkHatena bgc-white brc-Lblue es-LborderSolidM es-shadowstyle
ep-box es-BmarkHatena bgc-VPblue brc-Lblue es-radiusstyle
ep-box es-BmarkHatena bgc-VPblue brc-Lblue es-shadowビックリボックス
style
ep-box es-BmarkExcl bgc-white brc-Lmagenta es-borderSolidM es-radiusstyle
ep-box es-BmarkExcl bgc-white brc-Lmagenta es-LborderSolidM es-shadowstyle
ep-box es-BmarkExcl bgc-VPmagenta brc-Lmagenta es-radiusstyle
ep-box es-BmarkExcl bgc-VPmagenta brc-Lmagenta es-shadow方眼ボックス
style
ep-box es-BpaperRight es-grid bgc-VPyellowstyle
ep-box es-BpaperRight es-grid bgc-VPredstyle
ep-box es-BpaperRight es-grid bgc-VPpinkstyle
ep-box es-BpaperRight es-grid bgc-VPbluestyle
ep-box es-BpaperRight es-grid bgc-VPgreenstyle
ep-box es-BpaperRight es-gridQ＆Aボックス
こちらはデフォルトのデザインだとアイコン左側に余白がなかったので、CSSで余白を調整しています。
こちらのスタイルを使用する場合は
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
に以下をコピペしてください。
style-user.css
.content .es-BmarkQ {padding:10px 10px 10px 50px;}
.content .es-BmarkQ::before{top:10px; left:10px;}
.content .es-BmarkQ::after{top:40px; left:20px;}
.content .es-BmarkA{padding:10px 0 10px 50px; margin-top:0; margin-bottom:2rem;}
.content .es-BmarkA::before {top:10px; left:10px; font-size:1.8rem;}Q＆Aボックス①
QとAを並べるとこんな感じになります
style
ep-box es-BmarkQ bgc-white brc-VPblue es-TpaddingS es-LpaddingSstyle
ep-box es-BmarkA bgc-white brc-VPmagenta es-BborderSolidSQ＆Aボックス②
QとAを並べるとこんな感じになります
style
ep-box es-BmarkQ bgc-VPblue brc-VPblue es-TpaddingS es-LpaddingSstyle
ep-box es-BmarkA bgc-whiteサブタイトルボックス
私の環境では、カスタマイザーからサブタイトルボックスの配色を設定しても、ボックスサンプル53～56のデザインにしか反映されませんでした。そのため、他2種類（ラウンドと角ありタイプ）のサブタイトル背景色はCSSで指定しています。
※このCSS で THE THOR の「Lsky」という色をサブタイトル背景色に指定し、下記サンプルのコード内で枠線色・背景色を指定しています。
style-user.css
.content .es-BsubT::before, .content .es-BsubTround::before{background:#7ecff5;}style
ep-box es-BsubTradi bgc-white brc-Bsky es-borderSolidS es-radiusstyle
ep-box es-BsubTradi bgc-white brc-Bsky es-borderSolidM es-radiusstyle
ep-box es-BsubTradi bgc-VPsky brc-Bsky es-borderSolidS es-radius es-shadowstyle
ep-box es-BsubTradi bgc-VPsky brc-Bsky es-borderSolidM es-radius es-shadowstyle
ep-box es-BsubT bgc-white brc-Lsky es-borderSolidS es-radiusstyle
ep-box es-BsubT bgc-white brc-Lsky es-borderSolidM es-radiusstyle
ep-box es-BsubTround bgc-white brc-Lsky es-borderSolidS es-radiusstyle
ep-box es-BsubTround bgc-white brc-Lsky es-borderSolidM es-radius全幅タイトル付きボックス
ボックスサンプル01
このようなタイプのタイトル付きボックスは、ボックスの中にタイトル部分のボックスを入れ子にして作成します。タイトル部分のデザインサンプルは「ボックス内ボックスのデザインサンプル50」の記事にまとめてありますので、ボックスのサンプルと組み合わせてお使いください。
エディタからデフォルトで選べるボックス内ボックスのデザインを変更する方法と、デザインサンプルを50個まとめてみました。THE THOR のパーツデザインの仕組みについてはこちらの記事にまとめてありますので、自分で各パーツをカスタマイズし[…]
