カラーコードが必要なサンプルデザインのカラーバリエーションをまとめておきます。（背景・文字・枠線の色はエディタから簡単に変更できるので割愛）
カスタマイザー ＞「パーツスタイル設定」の、「ボックス設定」でデザインを、「その他エディタ用パーツ設定」でアイコンの背景色を、それぞれ設定できます。
サンプルデザインを設定する方法
アイコンの背景部分の色を設定する
カスタマイザー ＞ パーツスタイル設定 ＞ その他エディタ用パーツ設定
「アイコン系パーツのアイコンカラー」という項目の「アイコンの色を指定」という部分にカラーコードをコピペしてください。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボックスの場合、アイコンの背景色部分がここで指定した色になります。（アイコン本体は白色で表示されます）
個別に背景色を変更したい場合はCSSで別途指定する必要がありますのでご注意ください。
※この記事の最下部にCSSでの変更方法をまとめてあります。
ボックスのスタイルを編集する
カスタマイザー ＞ パーツスタイル設定 ＞ ボックス設定
「ボックス〇の設定」という項目（〇には数字が入る）の「スタイル」という部分に、サンプルのコードをコピペしてください。
ここで設定したデザインをエディタから選べるようになります。
帯アイコン付きのボックス
基本デザイン
style
ep-box bgc-white es-BiconObi es-shadow icon-pencil角丸
スタイルに「es-radius」を追加する
長丸
スタイルに「es-round」を追加する
細枠
スタイルから「es-shadow」を消して「es-borderSolidS」を追加する
太枠
スタイルから「es-shadow」を消して「es-borderSolidM」を追加する
カラーバリエーション
style
ep-box bgc-VPyellow es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPorange es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPred es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPmagenta es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPpink es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPpurple es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPnavy es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPblue es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPsky es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPturquoise es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPgreen es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-VPlime es-BiconObi es-shadow icon-pencilstyle
ep-box bgc-white es-BiconObi es-shadow icon-pencilはてなボックス
基本デザイン
style
ep-box es-BmarkHatena bgc-white brc-Lgray es-borderSolidSこちらのスタイルの「es-BmarkHatena」を「es-BmarkExcl」に変更するとビックリボックスになります。
角丸
スタイルに「es-radius」を追加する
長丸
スタイルに「es-round」を追加する
太枠
スタイル「es-borderSolidS」を「es-borderSolidM」に変更する
影付
スタイル「es-borderSolidS」を「es-shadow」に変更する
カラーバリエーション（ビビット）
style
ep-box es-BmarkHatena bgc-VPyellow brc-Byellow es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPorange brc-Borange es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPred brc-Bred es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPmagenta brc-Bmagenta es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPpink brc-Bpink es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPpurple brc-Bpurple es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPnavy brc-Bnavy es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPblue brc-Bblue es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPsky brc-Bsky es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPturquoise brc-Bturquoise es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPgreen brc-Bgreen es-borderSolidSstyle
ep-box es-BmarkHatena bgc-VPlime brc-Blime es-borderSolidSstyle
ep-box es-BmarkHatena bgc-white brc-black es-borderSolidSカラーバリエーション（パステル）
style
ep-box es-BmarkHatena bgc-white brc-Lyellow es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lorange es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lred es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lmagenta es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lpink es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lpurple es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lnavy es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lblue es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lsky es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lturquoise es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Lgreen es-borderSolidMstyle
ep-box es-BmarkHatena bgc-white brc-Llime es-borderSolidMサブタイトルボックス
基本デザイン
style
ep-box es-BsubTradi bgc-white brc-Lgray es-borderSolidS角丸
スタイルに「es-radius」を追加する
長丸
スタイルに「es-round」を追加する
太枠
スタイル「es-borderSolidS」を「es-borderSolidM」に変更する
カラーバリエーション（ビビット）
style
ep-box es-BsubTradi bgc-white brc-Byellow es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Borange es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bred es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bmagenta es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bpink es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bpurple es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bnavy es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bblue es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bsky es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bturquoise es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bgreen es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Blime es-borderSolidSstyle
ep-box es-BsubTradi bgc-white brc-Bblack es-borderSolidSカラーバリエーション（パステル）
style
ep-box es-BsubTradi bgc-white brc-Lyellow es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lorange es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lred es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lmagenta es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-pink es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-purple es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lnavy es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lblue es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lsky es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lturquoise es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Lgreen es-borderSolidMstyle
ep-box es-BsubTradi bgc-white brc-Llime es-borderSolidMCSSでアイコン背景色を変更する方法
アイコンの背景色はカスタマイザーから変更できますが、この設定はボタン・ボックス・ラベルのアイコン系パーツ全て共通となっていて、個別に背景色を指定することはできません。
この部分を変更したい場面もあると思いますので、この記事でボックスごとに背景色を変更している方法を紹介します。
HTML
ボックスを <div> で囲い、その中に含まれるアイコン背景色を変更します。
親要素となるdivに「bg_gray」というクラス名を与え、その子要素のスタイルをCSSで指定するという仕組みです。
class名「bg_gray」の部分を任意のものに変更してお使いください。
html
<div class="bg_gray">
<div class="ボックスのスタイル">
ボックスの内容
</div>
</div>CSS
背景色の部分には、上のボックスサンプルと一緒に書いてあるカラーコードを入れてください。（クラス名「bg_gray」の部分も、HTMLに記述したのと同じものに変更します）
css
.content .bg_gray .es-BiconObi{
border-color: #8c8c8c;/*帯アイコンの背景色*/
}
.content .bg_gray .es-BmarkHatena::before{
background-color: #8c8c8c;/*はてなアイコンの背景色*/
}
.content .bg_gray .es-BmarkExcl::before{
background-color: #8c8c8c;/*ビックリアイコンの背景色*/
}
.content .bg_gray .es-BsubTradi::before{
background-color: #8c8c8c;/*サブタイトル部分の背景色*/
border-color: #8c8c8c;/*サブタイトル部分の枠線色*/
}