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

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

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

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

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

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

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

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

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

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

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

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

style

ep-btn bgc-white ftc-gray es-shadow es-bold es-BTiconBox icon-pencil
角丸
ボタンサンプル39
スタイルに「es-radius」を追加する
長丸
ボタンサンプル39
スタイルに「es-round」を追加する

カラーバリエーション

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

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」を追加する

カラーバリエーション(ビビット)

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

カラーバリエーション(パステル)

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

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」を追加する

カラーバリエーション

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

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」を追加する

カラーバリエーション(ビビット)

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

カラーバリエーション(パステル)

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

style

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

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 ?