カラーコードが必要なサンプルデザインのカラーバリエーションをまとめておきます。(背景・文字・枠線の色はエディタから簡単に変更できるので割愛)
カスタマイザー >「パーツスタイル設定」の、「ボタン設定」でデザインを、「その他エディタ用パーツ設定」でアイコンの背景色を、それぞれ設定できます。
サンプルデザインを設定する方法
アイコンの背景部分の色を設定する
カスタマイザー > パーツスタイル設定 > その他エディタ用パーツ設定
「アイコン系パーツのアイコンカラー」という項目の「アイコンの色を指定」という部分にカラーコードをコピペしてください。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボタンの場合、アイコンの背景色部分がここで指定した色になります。(アイコン本体は文字色と同じ色で表示されます)
個別に背景色を変更したい場合はCSSで別途指定する必要がありますのでご注意ください。
※この記事の最下部にCSSでの変更方法をまとめてあります。
ボタンのスタイルを編集する
カスタマイザー > パーツスタイル設定 > ボタン設定
「ボタン〇の設定」という項目(〇には数字が入る)の「スタイル」という部分に、サンプルのコードをコピペしてください。
ここで設定したデザインをエディタから選べるようになります。
ボックスアイコン付きのボタン
ボタンサンプル39
style
ep-btn bgc-white ftc-gray es-shadow es-bold es-BTiconBox icon-pencil
カラーバリエーション
#fff338
style
ep-btn bgc-VPyellow ftc-Vyellow es-shadow es-bold es-BTiconBox icon-pencil
#f6ad3a
style
ep-btn bgc-VPorange ftc-Borange es-shadow es-bold es-BTiconBox icon-pencil
#e60112
style
ep-btn bgc-VPred ftc-Bred es-shadow es-bold es-BTiconBox icon-pencil
#e9536b
style
ep-btn bgc-VPmagenta ftc-Bmagenta es-shadow es-bold es-BTiconBox icon-pencil
#e95098
style
ep-btn bgc-VPpink ftc-Bpink es-shadow es-bold es-BTiconBox icon-pencil
#a54a98
style
ep-btn bgc-VPpurple ftc-Bpurple es-shadow es-bold es-BTiconBox icon-pencil
#4c4398
style
ep-btn bgc-VPnavy ftc-Bnavy es-shadow es-bold es-BTiconBox icon-pencil
#2b71b8
style
ep-btn bgc-VPblue ftc-Bblue es-shadow es-bold es-BTiconBox icon-pencil
#00b0ec
style
ep-btn bgc-VPsky ftc-Bsky es-shadow es-bold es-BTiconBox icon-pencil
#00ada9
style
ep-btn bgc-VPturquoise ftc-Bturquoise es-shadow es-bold es-BTiconBox icon-pencil
#0ba95f
style
ep-btn bgc-VPgreen ftc-Bgreen es-shadow es-bold es-BTiconBox icon-pencil
#a9cf52
style
ep-btn bgc-VPlime ftc-Blime es-shadow es-bold es-BTiconBox icon-pencil
#191919
style
ep-btn bgc-black ftc-black es-shadow es-bold es-BTiconBox icon-pencil
枠線付きボックスアイコンボタン
ボタンサンプル42
style
ep-btn bgc-white ftc-gray brc-gray es-borderSolidM es-bold es-BTiconBox icon-pencil
カラーバリエーション(ビビット)
#fff338
style
ep-btn bgc-VPyellow ftc-Vyellow brc-Byellow es-borderSolidM es-bold es-BTiconBox icon-pencil
#f6ad3a
style
ep-btn bgc-VPorange ftc-Borange brc-Borange es-borderSolidM es-bold es-BTiconBox icon-pencil
#e60112
style
ep-btn bgc-VPred ftc-Bred brc-Bred es-borderSolidM es-bold es-BTiconBox icon-pencil
#e9536b
style
ep-btn bgc-VPmagenta ftc-Bmagenta brc-Bmagenta es-borderSolidM es-bold es-BTiconBox icon-pencil
#e95098
style
ep-btn bgc-VPpink ftc-Bpink brc-Bpink es-borderSolidM es-bold es-BTiconBox icon-pencil
#a54a98
style
ep-btn bgc-VPpurple ftc-Bpurple brc-Bpurple es-borderSolidM es-bold es-BTiconBox icon-pencil
#4c4398
style
ep-btn bgc-VPnavy ftc-Bnavy brc-Bnavy es-borderSolidM es-bold es-BTiconBox icon-pencil
#2b71b8
style
ep-btn bgc-VPblue ftc-Bblue brc-Bblue es-borderSolidM es-bold es-BTiconBox icon-pencil
#00b0ec
style
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidM es-bold es-BTiconBox icon-pencil
#00ada9
style
ep-btn bgc-VPturquoise ftc-Bturquoise brc-Bturquoise es-borderSolidM es-bold es-BTiconBox icon-pencil
#0ba95f
style
ep-btn bgc-VPgreen ftc-Bgreen brc-Bgreen es-borderSolidM es-bold es-BTiconBox icon-pencil
#a9cf52
style
ep-btn bgc-VPlime ftc-Blime brc-Blime es-borderSolidM es-bold es-BTiconBox icon-pencil
#191919
style
ep-btn bgc-black ftc-black brc-black es-borderSolidM es-bold es-BTiconBox icon-pencil
カラーバリエーション(パステル)
#fff89a
style
ep-btn bgc-VPyellow ftc-Vyellow brc-Lyellow es-borderSolidM es-bold es-BTiconBox icon-pencil
#fbce8a
style
ep-btn bgc-VPorange ftc-Lorange brc-Lorange es-borderSolidM es-bold es-BTiconBox icon-pencil
#f39c76
style
ep-btn bgc-VPred ftc-Lred brc-Lred es-borderSolidM es-bold es-BTiconBox icon-pencil
#f29c9f
style
ep-btn bgc-VPmagenta ftc-Lmagenta brc-Lmagenta es-borderSolidM es-bold es-BTiconBox icon-pencil
#f29fc3
style
ep-btn bgc-VPpink ftc-Lpink brc-Lpink es-borderSolidM es-bold es-BTiconBox icon-pencil
#c490bf
style
ep-btn bgc-VPpurple ftc-Lpurple brc-Lpurple es-borderSolidM es-bold es-BTiconBox icon-pencil
#8f82bc
style
ep-btn bgc-VPnavy ftc-Lnavy brc-Lnavy es-borderSolidM es-bold es-BTiconBox icon-pencil
#87abda
style
ep-btn bgc-VPblue ftc-Lblue brc-Lblue es-borderSolidM es-bold es-BTiconBox icon-pencil
#7ecff5
style
ep-btn bgc-VPsky ftc-Lsky brc-Lsky es-borderSolidM es-bold es-BTiconBox icon-pencil
#83ccc9
style
ep-btn bgc-VPturquoise ftc-Lturquoise brc-Lturquoise es-borderSolidM es-bold es-BTiconBox icon-pencil
#88c997
style
ep-btn bgc-VPgreen ftc-Lgreen brc-Lgreen es-borderSolidM es-bold es-BTiconBox icon-pencil
#cce199
style
ep-btn bgc-VPlime ftc-Llime brc-Llime es-borderSolidM es-bold es-BTiconBox icon-pencil
3Dサークルアイコンボタン
ボタンサンプル39
style
ep-btn bgc-VPgray ftc-gray es-BT3d es-bold es-BTiconCircle icon-rocket
カラーバリエーション
#fff338
style
ep-btn bgc-VPyellow ftc-Vyellow es-BT3d es-bold es-BTiconCircle icon-rocket
#f6ad3a
style
ep-btn bgc-VPorange ftc-Borange es-BT3d es-bold es-BTiconCircle icon-rocket
#e60112
style
ep-btn bgc-VPred ftc-Bred es-BT3d es-bold es-BTiconCircle icon-rocket
#e9536b
style
ep-btn bgc-VPmagenta ftc-Bmagenta es-BT3d es-bold es-BTiconCircle icon-rocket
#e95098
style
ep-btn bgc-VPpink ftc-Bpink es-BT3d es-bold es-BTiconCircle icon-rocket
#a54a98
style
ep-btn bgc-VPpurple ftc-Bpurple es-BT3d es-bold es-BTiconCircle icon-rocket
#4c4398
style
ep-btn bgc-VPnavy ftc-Bnavy es-BT3d es-bold es-BTiconCircle icon-rocket
#2b71b8
style
ep-btn bgc-VPblue ftc-Bblue es-BT3d es-bold es-BTiconCircle icon-rocket
#00b0ec
style
ep-btn bgc-VPsky ftc-Bsky es-BT3d es-bold es-BTiconCircle icon-rocket
#00ada9
style
ep-btn bgc-VPturquoise ftc-Bturquoise es-BT3d es-bold es-BTiconCircle icon-rocket
#0ba95f
style
ep-btn bgc-VPgreen ftc-Bgreen es-BT3d es-bold es-BTiconCircle icon-rocket
#a9cf52
style
ep-btn bgc-VPlime ftc-Blime es-BT3d es-bold es-BTiconCircle icon-rocket
#191919
style
ep-btn bgc-black ftc-black es-BT3d es-bold es-BTiconCircle icon-rocket
枠線付きサークルアイコンボタン
ボタンサンプル39
style
ep-btn bgc-VPgray ftc-gray brc-gray es-borderSolidS es-bold es-BTiconCircle icon-rocket
カラーバリエーション(ビビット)
#fff338
style
ep-btn bgc-VPyellow ftc-Vyellow brc-Byellow es-borderSolidS es-bold es-BTiconCircle icon-rocket
#f6ad3a
style
ep-btn bgc-VPorange ftc-Borange brc-Borange es-borderSolidS es-bold es-BTiconCircle icon-rocket
#e60112
style
ep-btn bgc-VPred ftc-Bred brc-Bred es-borderSolidS es-bold es-BTiconCircle icon-rocket
#e9536b
style
ep-btn bgc-VPmagenta ftc-Bmagenta brc-Bmagenta es-borderSolidS es-bold es-BTiconCircle icon-rocket
#e95098
style
ep-btn bgc-VPpink ftc-Bpink brc-Bpink es-borderSolidS es-bold es-BTiconCircle icon-rocket
#a54a98
style
ep-btn bgc-VPpurple ftc-Bpurple brc-Bpurple es-borderSolidS es-bold es-BTiconCircle icon-rocket
#4c4398
style
ep-btn bgc-VPnavy ftc-Bnavy brc-Bnavy es-borderSolidS es-bold es-BTiconCircle icon-rocket
#2b71b8
style
ep-btn bgc-VPblue ftc-Bblue brc-Bblue es-borderSolidS es-bold es-BTiconCircle icon-rocket
#00b0ec
style
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidS es-bold es-BTiconCircle icon-rocket
#00ada9
style
ep-btn bgc-VPturquoise ftc-Bturquoise brc-Bturquoise es-borderSolidS es-bold es-BTiconCircle icon-rocket
#0ba95f
style
ep-btn bgc-VPgreen ftc-Bgreen brc-Bgreen es-borderSolidS es-bold es-BTiconCircle icon-rocket
#a9cf52
style
ep-btn bgc-VPlime ftc-Blime brc-Blime es-borderSolidS es-bold es-BTiconCircle icon-rocket
#191919
style
ep-btn bgc-black ftc-black brc-black es-borderSolidS es-bold es-BTiconCircle icon-rocket
カラーバリエーション(パステル)
#fff89a
style
ep-btn bgc-VPyellow ftc-Vyellow brc-Lyellow es-borderSolidS es-bold es-BTiconCircle icon-pencil
#fbce8a
style
ep-btn bgc-VPorange ftc-Lorange brc-Lorange es-borderSolidS es-bold es-BTiconCircle icon-pencil
#f39c76
style
ep-btn bgc-VPred ftc-Lred brc-Lred es-borderSolidS es-bold es-BTiconCircle icon-pencil
#f29c9f
style
ep-btn bgc-VPmagenta ftc-Lmagenta brc-Lmagenta es-borderSolidS es-bold es-BTiconCircle icon-pencil
#f29fc3
style
ep-btn bgc-VPpink ftc-Lpink brc-Lpink es-borderSolidS es-bold es-BTiconCircle icon-pencil
#c490bf
style
ep-btn bgc-VPpurple ftc-Lpurple brc-Lpurple es-borderSolidS es-bold es-BTiconCircle icon-pencil
#8f82bc
style
ep-btn bgc-VPnavy ftc-Lnavy brc-Lnavy es-borderSolidS es-bold es-BTiconCircle icon-pencil
#87abda
style
ep-btn bgc-VPblue ftc-Lblue brc-Lblue es-borderSolidS es-bold es-BTiconCircle icon-pencil
#7ecff5
style
ep-btn bgc-VPsky ftc-Lsky brc-Lsky es-borderSolidS es-bold es-BTiconCircle icon-pencil
#83ccc9
style
ep-btn bgc-VPturquoise ftc-Lturquoise brc-Lturquoise es-borderSolidS es-bold es-BTiconCircle icon-pencil
#88c997
style
ep-btn bgc-VPgreen ftc-Lgreen brc-Lgreen es-borderSolidS es-bold es-BTiconCircle icon-pencil
#cce199
style
ep-btn bgc-VPlime ftc-Llime brc-Llime es-borderSolidS es-bold es-BTiconCircle icon-pencil
CSSでアイコン背景を変更する方法
アイコンの背景色はカスタマイザーから変更できますが、この設定はボタン・ボックス・ラベルのアイコン系パーツ全て共通となっていて、個別に背景色を指定することはできません。この部分を変更したい場面もあると思いますので、この記事でボタンごとに背景色を変更している方法を紹介します。
HTML
ボタンを <div> で囲い、その中に含まれるアイコン背景色を変更します。
親要素となるdivに「bg_gray」というクラス名を与え、その子要素のスタイルをCSSで指定するという仕組みです。
html
<div class="bg_gray center">
<a class="ボタンのスタイル">ボタンテキスト</a>
</div>
CSS
背景色の部分には、上のボタンサンプルと一緒に書いてあるカラーコードを入れてください。(クラス名「bg_gray」の部分も併せて変更)
css
.content .bg_gray .es-BTiconBox:before{
background-color: #8c8c8c;/*ボックスアイコンの背景色*/
}
.content .bg_gray .es-BTiconCircle:before{
background-color: #8c8c8c;/*サークルアイコンの背景色*/
}
.center{
text-align:center;/*中央寄せ*/
}