【THE THOR】ボタンサンプルのカラーバリエーション

2019.01.20
パーツサンプル

パーツサンプル

カラーコードが必要なサンプルデザインのカラーバリエーションをまとめておきます。（背景・文字・枠線の色はエディタから簡単に変更できるので割愛）

カスタマイザー＞「パーツスタイル設定」の、「ボタン設定」でデザインを、「その他エディタ用パーツ設定」でアイコンの背景色を、それぞれ設定できます。

1 サンプルデザインを設定する方法
- - 1.0.1 アイコンの背景部分の色を設定する
  - 1.0.2 ボタンのスタイルを編集する
2 ボックスアイコン付きのボタン
- 2.1 カラーバリエーション
3 枠線付きボックスアイコンボタン
- 3.1 カラーバリエーション（ビビット）
- 3.2 カラーバリエーション（パステル）
4 3Dサークルアイコンボタン
- 4.1 カラーバリエーション
5 枠線付きサークルアイコンボタン
- 5.1 カラーバリエーション（ビビット）
- 5.2 カラーバリエーション（パステル）
6 CSSでアイコン背景を変更する方法
- 6.1 HTML
- 6.2 CSS

サンプルデザインを設定する方法

アイコンの背景部分の色を設定する

カスタマイザー＞パーツスタイル設定＞その他エディタ用パーツ設定
「アイコン系パーツのアイコンカラー」という項目の「アイコンの色を指定」という部分にカラーコードをコピペしてください。

※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボタンの場合、アイコンの背景色部分がここで指定した色になります。（アイコン本体は文字色と同じ色で表示されます）

ここで指定した色が、ボタン・ボックス・ラベル全てのアイコン系デザイン（背景なしのものを除く）共通の背景色になります。
個別に背景色を変更したい場合はCSSで別途指定する必要がありますのでご注意ください。
※この記事の最下部にCSSでの変更方法をまとめてあります。

ボタンのスタイルを編集する

カスタマイザー＞パーツスタイル設定＞ボタン設定
「ボタン〇の設定」という項目（〇には数字が入る）の「スタイル」という部分に、サンプルのコードをコピペしてください。
ここで設定したデザインをエディタから選べるようになります。

ボックスアイコン付きのボタン

基本デザイン
ボタンサンプル39

style

ep-btn bgc-white ftc-gray es-shadow es-bold es-BTiconBox icon-pencil

角丸
ボタンサンプル39
スタイルに「es-radius」を追加する

長丸
ボタンサンプル39
スタイルに「es-round」を追加する

カラーバリエーション

ボタンサンプル39
#fff338

style

ep-btn bgc-VPyellow ftc-Vyellow es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#f6ad3a

style

ep-btn bgc-VPorange ftc-Borange es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#e60112

style

ep-btn bgc-VPred ftc-Bred es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#e9536b

style

ep-btn bgc-VPmagenta ftc-Bmagenta es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#e95098

style

ep-btn bgc-VPpink ftc-Bpink es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#a54a98

style

ep-btn bgc-VPpurple ftc-Bpurple es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#4c4398

style

ep-btn bgc-VPnavy ftc-Bnavy es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#2b71b8

style

ep-btn bgc-VPblue ftc-Bblue es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#00b0ec

style

ep-btn bgc-VPsky ftc-Bsky es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#00ada9

style

ep-btn bgc-VPturquoise ftc-Bturquoise es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#0ba95f

style

ep-btn bgc-VPgreen ftc-Bgreen es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#a9cf52

style

ep-btn bgc-VPlime ftc-Blime es-shadow es-bold es-BTiconBox icon-pencil

ボタンサンプル39
#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

角丸
ボタンサンプル42
スタイルに「es-radius」を追加する

長丸
ボタンサンプル42
スタイルに「es-round」を追加する

カラーバリエーション（ビビット）

ボタンサンプル42
#fff338

style

ep-btn bgc-VPyellow ftc-Vyellow brc-Byellow es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#f6ad3a

style

ep-btn bgc-VPorange ftc-Borange brc-Borange es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#e60112

style

ep-btn bgc-VPred ftc-Bred brc-Bred es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#e9536b

style

ep-btn bgc-VPmagenta ftc-Bmagenta brc-Bmagenta es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#e95098

style

ep-btn bgc-VPpink ftc-Bpink brc-Bpink es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#a54a98

style

ep-btn bgc-VPpurple ftc-Bpurple brc-Bpurple es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#4c4398

style

ep-btn bgc-VPnavy ftc-Bnavy brc-Bnavy es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#2b71b8

style

ep-btn bgc-VPblue ftc-Bblue brc-Bblue es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#00b0ec

style

ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#00ada9

style

ep-btn bgc-VPturquoise ftc-Bturquoise brc-Bturquoise es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#0ba95f

style

ep-btn bgc-VPgreen ftc-Bgreen brc-Bgreen es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#a9cf52

style

ep-btn bgc-VPlime ftc-Blime brc-Blime es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#191919

style

ep-btn bgc-black ftc-black brc-black es-borderSolidM es-bold es-BTiconBox icon-pencil

カラーバリエーション（パステル）

ボタンサンプル42
#fff89a

style

ep-btn bgc-VPyellow ftc-Vyellow brc-Lyellow es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#fbce8a

style

ep-btn bgc-VPorange ftc-Lorange brc-Lorange es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#f39c76

style

ep-btn bgc-VPred ftc-Lred brc-Lred es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#f29c9f

style

ep-btn bgc-VPmagenta ftc-Lmagenta brc-Lmagenta es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#f29fc3

style

ep-btn bgc-VPpink ftc-Lpink brc-Lpink es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#c490bf

style

ep-btn bgc-VPpurple ftc-Lpurple brc-Lpurple es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#8f82bc

style

ep-btn bgc-VPnavy ftc-Lnavy brc-Lnavy es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#87abda

style

ep-btn bgc-VPblue ftc-Lblue brc-Lblue es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#7ecff5

style

ep-btn bgc-VPsky ftc-Lsky brc-Lsky es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#83ccc9

style

ep-btn bgc-VPturquoise ftc-Lturquoise brc-Lturquoise es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#88c997

style

ep-btn bgc-VPgreen ftc-Lgreen brc-Lgreen es-borderSolidM es-bold es-BTiconBox icon-pencil

ボタンサンプル42
#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

角丸
ボタンサンプル39
スタイルに「es-radius」を追加する

長丸
ボタンサンプル39
スタイルに「es-round」を追加する

カラーバリエーション

ボタンサンプル39
#fff338

style

ep-btn bgc-VPyellow ftc-Vyellow es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#f6ad3a

style

ep-btn bgc-VPorange ftc-Borange es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e60112

style

ep-btn bgc-VPred ftc-Bred es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e9536b

style

ep-btn bgc-VPmagenta ftc-Bmagenta es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e95098

style

ep-btn bgc-VPpink ftc-Bpink es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#a54a98

style

ep-btn bgc-VPpurple ftc-Bpurple es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#4c4398

style

ep-btn bgc-VPnavy ftc-Bnavy es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#2b71b8

style

ep-btn bgc-VPblue ftc-Bblue es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#00b0ec

style

ep-btn bgc-VPsky ftc-Bsky es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#00ada9

style

ep-btn bgc-VPturquoise ftc-Bturquoise es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#0ba95f

style

ep-btn bgc-VPgreen ftc-Bgreen es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#a9cf52

style

ep-btn bgc-VPlime ftc-Blime es-BT3d es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#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

角丸
ボタンサンプル39
スタイルに「es-radius」を追加する

長丸
ボタンサンプル39
スタイルに「es-round」を追加する

カラーバリエーション（ビビット）

ボタンサンプル39
#fff338

style

ep-btn bgc-VPyellow ftc-Vyellow brc-Byellow es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#f6ad3a

style

ep-btn bgc-VPorange ftc-Borange brc-Borange es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e60112

style

ep-btn bgc-VPred ftc-Bred brc-Bred es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e9536b

style

ep-btn bgc-VPmagenta ftc-Bmagenta brc-Bmagenta es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#e95098

style

ep-btn bgc-VPpink ftc-Bpink brc-Bpink es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#a54a98

style

ep-btn bgc-VPpurple ftc-Bpurple brc-Bpurple es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#4c4398

style

ep-btn bgc-VPnavy ftc-Bnavy brc-Bnavy es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#2b71b8

style

ep-btn bgc-VPblue ftc-Bblue brc-Bblue es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#00b0ec

style

ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#00ada9

style

ep-btn bgc-VPturquoise ftc-Bturquoise brc-Bturquoise es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#0ba95f

style

ep-btn bgc-VPgreen ftc-Bgreen brc-Bgreen es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#a9cf52

style

ep-btn bgc-VPlime ftc-Blime brc-Blime es-borderSolidS es-bold es-BTiconCircle icon-rocket

ボタンサンプル39
#191919

style

ep-btn bgc-black ftc-black brc-black es-borderSolidS es-bold es-BTiconCircle icon-rocket

カラーバリエーション（パステル）

ボタンサンプル42
#fff89a

style

ep-btn bgc-VPyellow ftc-Vyellow brc-Lyellow es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#fbce8a

style

ep-btn bgc-VPorange ftc-Lorange brc-Lorange es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#f39c76

style

ep-btn bgc-VPred ftc-Lred brc-Lred es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#f29c9f

style

ep-btn bgc-VPmagenta ftc-Lmagenta brc-Lmagenta es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#f29fc3

style

ep-btn bgc-VPpink ftc-Lpink brc-Lpink es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#c490bf

style

ep-btn bgc-VPpurple ftc-Lpurple brc-Lpurple es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#8f82bc

style

ep-btn bgc-VPnavy ftc-Lnavy brc-Lnavy es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#87abda

style

ep-btn bgc-VPblue ftc-Lblue brc-Lblue es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#7ecff5

style

ep-btn bgc-VPsky ftc-Lsky brc-Lsky es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#83ccc9

style

ep-btn bgc-VPturquoise ftc-Lturquoise brc-Lturquoise es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#88c997

style

ep-btn bgc-VPgreen ftc-Lgreen brc-Lgreen es-borderSolidS es-bold es-BTiconCircle icon-pencil

ボタンサンプル42
#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;/*中央寄せ*/
}

Follow me ?

フォローする

【THE THOR】ボタンサンプルのカラーバリエーション

サンプルデザインを設定する方法

アイコンの背景部分の色を設定する

ボタンのスタイルを編集する

ボックスアイコン付きのボタン

カラーバリエーション

枠線付きボックスアイコンボタン

カラーバリエーション（ビビット）

カラーバリエーション（パステル）

3Dサークルアイコンボタン

カラーバリエーション

枠線付きサークルアイコンボタン

カラーバリエーション（ビビット）

カラーバリエーション（パステル）

CSSでアイコン背景を変更する方法

HTML

CSS

【THE THOR】ラベルのデザインサンプル60

【THE THOR】AMPの設定方法