キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

カラー・サイズ追加・変更

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

追加

カラー・サイズ名

カラー・サイズの名称を設定できます。

プリセットカラー

システムに予め用意されたカラー・サイズ設定です。プリセットカラーを選択すると、あらかじめセットされた色・サイズの組み合わせが初期値として指定されます。

いずれかのプリセットカラーを選択した後、店舗のイメージにあわせて、任意の項目を変更してください。

カラー・サイズ項目

カラー・サイズでは、以下の各項目の色やサイズを変更できます。

  • 全体配色。メインカラー・サブカラーを変更できます。
  • 文字色。文字色やリンク文字色を変更できます。
  • ページ背景。ページ背景色を変更できます。
  • ボタン。ECサイト各画面のボタンを主要・副次的・特殊・普通・テキスト風の5つに分類し、それぞれの色や角の丸さ(サイズ)を変更できます。

色入力欄について

カラーピッカー(windows)

色の入力欄に、「#」から始まる16進数表記のカラーコード(#RRGGBB形式)を入力するか、カラー表示部分を選択して、表示されたカラーピッカー(色の設定)から任意の色を選択してください。

色入力欄の値は直接入力できます。入力できるのは「半角英数字と記号(#(),.)」です。%は使用できません。
rgb(R,G,B)形式やrgba(R,G,B,A)形式、「white」「black」「fuchsia」などのカラーコードをご利用の場合は、色指定部分に直接入力してください。また「transparent」と記載すると「透明色」となります。
※「transparent」やrgb(N,N,N)形式・rgb(N,N,N,N)形式などの場合は、右側のカラーピッカー部分と連動しません。色入力欄の値に入力チェックはありませんのでご注意ください。

全体配色

主な色の設定です。

メインカラー
色設定の主となる色です。
メインカラーを背景色に使った場合の文字色
サブカラー1が背景色になる場合の文字色です。
サブカラー1
色設定の副次的な色です。
サブカラー1を背景色に使った場合の文字色
サブカラー2が背景色になる場合の文字色です。
サブカラー2
色設定の副次的な色です。
サブカラー2を背景色に使った場合の文字色
カラーが背景色になる場合の文字色です。

文字色

基本的な文字色を変更できます。
メインカラー・サブカラー1/2が背景でない場合の文字色です。

基本文字色
標準の文字の色です。
リンク:link
未閲覧のページへのリンクを表す色です。
リンク:visited
閲覧済みのページへのリンクを表す色です。
リンク:hover
マウスカーソルがリンクの上にあるときのリンクの色です。
リンク:active
クリック・タップ中のリンクの色です。
ページの見出し
ページ見出しの文字色です。
商品名
商品名の文字色です。
商品価格
商品販売価格の文字色です。

ページ背景

背景色
ページの背景色です。

ボタン

ボタンの設定です。ボタンには以下の種類があります。

主要なボタン
画面の主要な目的を表すボタンです。
副次的なボタン
主要なボタンの次に重要なボタンです。
特殊なボタン
主要なボタンの次に重要なボタンです。
普通のボタン
主要、副次的のどれにも該当しない普通のボタンです。
テキスト風のボタン
テキスト風のボタンです。

各ボタンに関する設定項目です。背景色と文字色、ボタンの角の丸さを設定できます。

ボタン色
ボタンの背景色です。
ボーダー色
ボタンの罫線色です。
文字色
ボタンの文字色です。
角丸
ボタンの角の丸さです。0~99まで指定できます。数字が大きいほど丸くなります。

ボタンの種類と色についてはボタンの種類と一覧をご覧ください。

保存する

カラー・サイズを保存します。

キャンセルする

未保存の作業内容を破棄します。

変更

カラー・サイズを削除する

カラーサイズ変更時のみ、削除するボタンを押下すると、カラー・サイズを削除できます。使用中のカラー・サイズは削除できません。

カラー・サイズのCSS出力形式について

カラー・サイズの設定内容は、テーマごとのCSSに出力されます。
記述内容は以下のようなCSS変数形式となります。

:root {
  --fs-color-maincolor: 全体配色-メインカラー;
  --fs-color-maincolor__font: 全体配色-メインカラーを背景色に使った場合の文字色;
  --fs-color-subcolor1: 全体配色-サブカラー1;
  --fs-color-subcolor1__font: 全体配色-サブカラー1を背景色に使った場合の文字色;
  --fs-color-subcolor2: 全体配色-サブカラー2;
  --fs-color-subcolor2__font: 全体配色-サブカラー2を背景色に使った場合の文字色;
  --fs-color-font--main: 文字色-基本文字色;
  --fs-color-font--link: 文字色-リンク:link;
  --fs-color-font--link--visited: 文字色-リンク:visited;
  --fs-color-font--link--hover: 文字色-リンク:hover;
  --fs-color-font--link--active:  文字色-リンク:active;
  --fs-color-font--pageHeading:  文字色-ページ見出し;
  --fs-color-font--productName:  文字色-商品名;
  --fs-color-font--productPrice:  文字色-商品価格;
  --fs-color-page__background:  ページ背景-ページ背景色;
  --fs-color-button--primary: ボタン-主要なボタン-ボタン色;
  --fs-color-button--primary__border: ボタン-主要なボタン-ボーダー色;
  --fs-color-button--primary__font: ボタン-主要なボタン-文字色;
  --fs-size-button--primary__radius: ボタン-主要なボタン-角丸(px);
  --fs-color-button--secondary: ボタン-副次的なボタン-ボタン色;
  --fs-color-button--secondary__border: ボタン-副次的なボタン-ボーダー色;
  --fs-color-button--secondary__font: ボタン-副次的なボタン-文字色;
  --fs-size-button--secondary__radius: ボタン-副次的なボタン-角丸(px);
  --fs-color-button--particular: ボタン-特殊なボタン-ボタン色;
  --fs-color-button--particular__border: ボタン-特殊なボタン-ボーダー色;
  --fs-color-button--particular__font: ボタン-特殊なボタン-文字色;
  --fs-size-button--particular__radius: ボタン-特殊なボタン-角丸(px);
  --fs-color-button--standard: ボタン-普通のボタン-ボタン色;
  --fs-color-button--standard__border: ボタン-普通のボタン-ボーダー色;
  --fs-color-button--standard__font: ボタン-普通のボタン-文字色;
  --fs-size-button--standard__radius: ボタン-普通のボタン-角丸(px);
  --fs-color-button--plain: ボタン-テキスト風のボタン-ボタン色;
  --fs-color-button--plain__border: ボタン-テキスト風のボタン-ボーダー色;
  --fs-color-button--plain__font: ボタン-テキスト風のボタン-文字色;
  --fs-size-button--plain__radius: ボタン-テキスト風のボタン-角丸(px);
}

上記で「--」から始まっているのが「CSS変数」となります。
例えば、カラー・サイズ設定でメインカラーが「#646464」に設定されていれば、CSSには「--fs-color-maincolor: #646464;」と出力されます。
出力された値は、「background-color:var(--fs-color-maincolor);」のように「var()」の中にCSS変数名を記載すれば、色を指定できます。

※Internet Explorerなど古いブラウザには実装されていないため、使用できませんのでご注意ください。

スケルトンテーマで、テーマ設定-カラー・サイズを使用しないにチェックがある場合は、出力されません。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。