エディタからデフォルトで選べるボックス内ボックスのデザインを変更する方法と、デザインサンプルを50個まとめてみました。
THE THOR のパーツデザインの仕組みについてはこちらの記事にまとめてありますので、自分で各パーツをカスタマイズしてみたい方は参考にしてください。
THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがな[…]
ボックス内ボックスとは
「ボックス内ボックス」というのは、文字通り、ボックスの中に入れ子にして使うボックスのことです。私は主にタイトル付きのボックスを作るのに使用していますが、ボックス内部で強調したい部分を更にボックスに入れたりなどの使い方もできます。
使用例はこんな感じ。
ボックスサンプル07
ボックスサンプル06
※この記事では上記の使用例のように「ボックスのデザインサンプル60」で紹介しているデザインサンプルと組み合わせて表示していますので、全く同じデザインを再現したい場合はそちらと併せてご利用ください。
エディタに表示される基本デザインの変更方法
カスタマイザーから基本スタイルを設定する
カスタマイザーの「パーツスタイル設定」から「ボックス内ボックス設定」へ進むと、10種類のスタイルを設定できるようになっています。この10個のスタイルが、各エディタから選ぶことのできる基本スタイルです。
デフォルトで設定されている10種類のボックス内ボックスを好みのものに変更するには、「ボックス設定」の「スタイル」の部分を編集します。（画像はボタン設定のものです）
お好きなボックスサンプルのコードを「スタイル」部分にコピペして、「タイトル」を任意のものに変更してください。作成したスタイルをエディタから選べるようになります。
ボックス内ボックスの配色を変更する方法
下のサンプルコードのうち、「bgc-」で始まるものがボックスの背景色、「ftc-」で始まるものが文字色、「brc-」で始まるものが枠線色を指定している部分です。こちらの記事に色設定用のコードを一覧にしてありますので、好みの色に差し替えてご利用ください。
カスタマイザーのパーツ設定やテキストエディタからの投稿時用に、各パーツに設定できる色を一覧にしてみました。12色×7トーン＋モノトーン7色の計91色を、文字色・背景色・ボーダーの色、それぞれ別に指定できます。ボタンのサンプル[…]
ビジュアルエディタ利用の場合は、サンプルをそのままコピペして登録し、記事作成時にエディタから各部分の色を変更することもできます。
アイコンを変更する方法
アイコン付きのボックスの場合、「icon-」で始まるコードで表示するアイコンを指定しています。エディタの「アイコンオプション」というボタンから全アイコンのコードをコピーすることができますので、アイコンを変更したい場合は好みのものに差し替えてください。
アイコン・マーク・サブタイトルボックスの配色を変更する方法
カスタマイザーの「パーツスタイル設定」から「その他エディタ用パーツ設定」へ進むと、アイコンの背景色・各特殊ボックスのマークの色・サブタイトルボックスの配色を変更できます。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボックスの場合、アイコンの背景色部分がここで指定した色になります。（アイコンは白色で表示されます）
余白なし全幅タイトル
文字のみ
ボックスサンプル01
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル03
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-shadow es-center es-boldボックスサンプル05
style
ep-inbox es-Bwhole bgc-Bsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-grada1 es-center es-boldボックスサンプル07
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-grada2 es-center es-boldボックスサンプル05
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル07
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderSolidM es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル05
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderDashedS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル07
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderDashedM es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル6
style
es-Bwhole ftc-Lsky brc-Lsky es-BborderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル8
style
es-Bwhole ftc-Lsky brc-Lsky es-BborderDashedS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldアイコン付き
ボックスサンプル01
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル03
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-shadow es-center es-bold es-BTicon icon-checkmarkボックスサンプル05
style
ep-inbox es-Bwhole bgc-Bsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-grada1 es-center es-bold es-BTicon icon-checkmarkボックスサンプル07
style
ep-inbox es-Bwhole bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-grada2 es-center es-bold es-BTicon icon-checkmarkボックスサンプル05
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル07
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderSolidM es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル05
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderDashedS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル07
style
ep-inbox es-Bwhole bgc-VPsky ftc-Lsky brc-Lsky es-BborderDashedM es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル6
style
es-Bwhole ftc-Lsky brc-Lsky es-BborderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル8
style
es-Bwhole ftc-Lsky brc-Lsky es-BborderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmark余白ありタイトル
白抜き
ボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-boldボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-boldカラー
ボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-boldボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-bold枠線付き
ボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-boldボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-boldボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-boldアイコン付き
ボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmark2ボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-bold es-BTicon icon-checkmark2ボックスサンプル01
style
ep-inbox bgc-white ftc-Lsky es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-bold es-BTicon icon-checkmark2ボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmarkボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-bold es-BTicon icon-checkmarkボックスサンプル01
style
ep-inbox bgc-Lsky ftc-white es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-bold es-BTicon icon-checkmarkボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-center es-bold es-BTicon icon-checkmark2ボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-radius es-center es-bold es-BTicon icon-checkmark2ボックスサンプル07
style
ep-inbox bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-TpaddingSS es-BpaddingSS es-LpaddingS es-RpaddingS es-round es-center es-bold es-BTicon icon-checkmark2強調用ボックス内ボックス
※親テーマのCSSによりボックス内の一番最初の要素の上側余白が0に設定されているため、ボックス内の文章下にボックス内ボックスを配置した時、テキスト部分とボックス内ボックスの間の余白がなくなってしまうことがあります。
こういった場合はテキスト部分を<p></p>などで囲えば余白ができます。
付箋風
ボックスサンプル01
style
ep-inbox bgc-white brc-Bblue es-LborderSolidM es-shadowボックスサンプル01
style
ep-inbox bgc-white brc-Bsky es-LborderSolidM es-shadow es-BiconCircle icon-checkmarkボックスサンプル01
style
ep-inbox bgc-white ftc-Bmagenta brc-Bmagenta es-LborderSolidM es-shadow es-Bicon icon-warningボックスサンプル01
style
ep-inbox es-BmarkHatena bgc-white brc-Lblue es-LborderSolidM es-shadowボックスサンプル01
style
ep-inbox es-BmarkExcl bgc-white brc-Lmagenta es-LborderSolidM es-shadowボックスサンプル01
style
ep-inbox bgc-white es-BiconObi es-shadow icon-pencilメモ書き風
※紙がめくれている部分の背景色がデフォルトで白に設定されているので、親ボックスの背景色も白推奨です。
ボックスサンプル06
style
ep-inbox bgc-VPsky es-BpaperRightボックスサンプル06
style
ep-inbox bgc-VPsky es-BpaperLeftボックスサンプル06
style
ep-inbox es-BpaperRight es-grid bgc-VPskyボックスサンプル06
style
ep-inbox es-BpaperLeft es-grid bgc-VPskyボックスサンプル06
中身が1行だとアイコンがはみ出すので注意
style
ep-inbox bgc-VPsky es-BpaperRight es-BiconBg icon-pencilボックスサンプル06
中身が1行だとアイコンがはみ出すので注意
style
ep-inbox bgc-VPsky es-BpaperLeft es-BiconBg icon-pencil備考
一見面倒くさそうな感じがしますが、ボックスのデザインサンプルをそのまま「ボックス内ボックス」のスタイルに登録して使うこともできますし、記事を作成する際に「ボックス内ボックス」を使用せず、ボックスを入れ子にして使うこともできます。色々試して好みのデザインを探してみてください。
