カラー設定について

カラー一覧

コンテンツで使いまわせるカラーの一覧です。

bg

SAMPLE

日本語名	背景色
CSS変数	`var(--color_bg)`
SWELL初期値	#fdfdfd
パレット選択	不可
変更方法	管理画面：【カスタマイズ】

main

SAMPLE

日本語名	メインカラー
CSS変数	`var(--color_main)`
SWELL初期値	#04384c
パレット選択	可
変更方法	管理画面：【カスタマイズ】

main-thin

SAMPLE

日本語名	メインカラー（薄）
CSS変数	`var(--color_main_thin)`
SWELL初期値	不透明度5%のメインカラー
パレット選択	可
変更方法	子テーマで上書きする

不透明度を変更しているだけなので、メインカラーに重ねると色が出ないし、背景色によって色が変わるので注意

border

SAMPLE

日本語名	なし
CSS変数	`var(--color_border)`
SWELL初期値	hsla(0, 0%, 78%, .5) 不透明度50%の#c7c7c7
パレット選択	不可
変更方法	子テーマで上書きする

gray

SAMPLE

日本語名	グレー
CSS変数	`var(--color_gray)`
SWELL初期値	hsla(0, 0%, 78%, .15) 不透明度15%の#c7c7c7
パレット選択	可
変更方法	子テーマで上書きする

SWELL設定のボーダーセット設定だと薄いグレーという名称になる

text

SAMPLE

日本語名	テキストカラー
CSS変数	`var(--color_text)`
SWELL初期値	#333333
パレット選択	不可
変更方法	管理画面：【カスタマイズ】

カラーパレットで選択できる黒色とは異なるので注意

deep01

SAMPLE

日本語名	濃い色1
CSS変数	`var(--color_deep01)`
SWELL初期値	#e44141
パレット選択	可
変更方法	管理画面：【SWELL設定】

deep02

SAMPLE

日本語名	濃い色2
CSS変数	`var(--color_deep02)`
SWELL初期値	#3d79d5
パレット選択	可
変更方法	管理画面：【SWELL設定】

deep03

SAMPLE

日本語名	濃い色3
CSS変数	`var(--color_deep03)`
SWELL初期値	#63a84d
パレット選択	可
変更方法	管理画面：【SWELL設定】

deep04

SAMPLE

日本語名	濃い色4
CSS変数	`var(--color_deep04)`
SWELL初期値	#f09f4d
パレット選択	可
変更方法	管理画面：【SWELL設定】

pale01

SAMPLE

日本語名	淡い色1
CSS変数	`var(--color_pale01)`
SWELL初期値	#fff2f0
パレット選択	可
変更方法	管理画面：【SWELL設定】

pale02

SAMPLE

日本語名	淡い色2
CSS変数	`var(--color_pale02)`
SWELL初期値	#f3f8fd
パレット選択	可
変更方法	管理画面：【SWELL設定】

pale03

SAMPLE

日本語名	淡い色3
CSS変数	`var(--color_pale03)`
SWELL初期値	#f1f9ee
パレット選択	可
変更方法	管理画面：【SWELL設定】

pale04

SAMPLE

日本語名	淡い色4
CSS変数	`var(--color_pale04)`
SWELL初期値	#fdf9ee
パレット選択	可
変更方法	管理画面：【SWELL設定】

white

SAMPLE

日本語名	白
CSS変数	–
SWELL初期値	#fff
パレット選択	可
変更方法	–

black

SAMPLE

日本語名	黒
CSS変数	–
SWELL初期値	#000
パレット選択	可
変更方法	–

red

SAMPLE

日本語名	なし
CSS変数	`var(--color_red)`
SWELL初期値	なし
パレット選択	不可
変更方法	子テーマで上書きする

カスタマイズ初期値：#f23030

link

SAMPLE

日本語名	リンクカラー
CSS変数	`var(--color_link)`
SWELL初期値	#1176d4
パレット選択	不可
変更方法	管理画面：【カスタマイズ】