色
設定画面 | [ 外観 ] > [ カスタマイズ ] > [ 色 ] |
---|
サイト全体のカラーやテキスト、テキストリンク、ボタンなどの色を設定します。

- 背景画像から色を抽出
- 全てのページ
- ヘッダー
- トップページ1段目ウィジェット
- トップページ2段目ウィジェット
- サブページタイトルブロック
- サブページコンテンツブロック
- サブページサイドバー
- ヘッダーメニュー内
- フッターウィジェット
- コンタクトブロック
- フッター
- Welcart
背景画像から色を抽出
カスタマイザーで操作できるページ | 全ページ |
---|
外観 > カスタマイズ > 背景画像 で設定した画像から色の設定をします。
設定した画像から「明るい色」「暗い色」を選択し、設定します。
設定の項目が表示されない場合、背景画像が設定されていない可能性があります。
まずは 外観 > カスタマイズ > 背景画像 で画像を設定してください。
以下、反映される箇所です。
トップスライダー(ヘッダー)部 |
サイトタイトル ※テキストで表示されている場合のみ ![]() ![]() ![]() ![]() |
トップウィジェット部(1段目) |
タイトル色(テキスト及び背景色)![]() ![]() ![]() トップページウィジェット(2段目)を設定した場合も同じように反映されます。 |
下層ページコンテンツ部(定形部分のみ) |
タイトル背景色![]() ![]() ![]() |
下層ページサイドバー部 |
タイトル色![]() ![]() ![]() |
ハンバーガーメニュー内 |
背景色![]() |
フッターウィジェット |
メインタイトル![]() ![]() ![]() |
フッター部 |
背景色![]() |
全てのページ
カスタマイザーで操作できるページ | 全ページ |
---|
サイト全体の文字色・背景色の設定をします。

項目名 | 設定内容 |
---|---|
テキスト色 | サイト全体の文字色を設定します。 |
リンクテキスト | サイト内にあるリンクの文字色を設定します。 |
背景色 | サイト全体の背景色を設定します。 背景色不透明度コントローラーで色の調整ができます。 |
ヘッダー
カスタマイザーで操作できるページ | 全ページ |
---|
主にヘッダーの色を変更します。
テーマ専用ウィジェットの背景色の選択もトップページで行います。

項目名 | 設定内容 |
---|---|
ヘッダーテキストサイトタイトル | サイトタイトルの文字色を設定します。 サイトタイトルがテキストの場合、設定した色が反映されます。 |
ヘッダースクロールボタン | トップページのキービジュアル下に配置されているスクロールボタンの色を設定します。 |
ヘッダー説明文 | ヘッダー説明文の文字色を設定します。 |
ヘッダーメニュー | トグルナビゲーションのボタンの色を設定します。 |
ヘッダー背景 | ヘッダーの背景色を設定します。 トップページの場合はサイトタイトル下までの範囲がヘッダーです。 |
テーマ専用ウィジェットの背景色 | テーマ専用ウィジェットの背景色を決めます。 ホワイトとブラックの2つから選択します。 |
トップページ1段目ウィジェット
カスタマイザーで操作できるページ | トップページ |
---|
外観 > ウィジェット で設定した「トップページウィジェット1段目」の設定をします。
まだ「トップページウィジェット1段目」を登録していなければ、先に登録をしてください。
項目名 | 設定内容 |
---|---|
トップウィジェット1段目メインタイトル | トップページに表示されるウィジェットのメインタイトルの文字色を設定します。 |
トップウィジェット1段目サブタイトル | トップページに表示されるウィジェットのサブタイトルの文字色を設定します。 |
トップウィジェット1段目ボタン | トップページに表示されるウィジェットのボタンの背景色を設定します。 |
トップウィジェット1段目ボタンテキスト | トップページに表示されるウィジェットのボタンの文字色を設定します。 |
トップウィジェット1段目背景色 | トップページに表示されるウィジェットの背景色を設定します。 背景色不透明度コントローラーで文字や画像が見やすいよう調整してください。 テーマ専用ウィジェットの背景色が優先されます。 |
トップページ2段目ウィジェット
カスタマイザーで操作できるページ | トップページ |
---|
外観 > ウィジェット で設定した「トップページウィジェット2段目」の設定をします。
まだ「トップページウィジェット2段目」を登録していなければ、先に登録をしてください。
項目名 | トップページ |
---|---|
トップウィジェット2段目メインタイトル | トップページに表示されるウィジェットのメインタイトルの文字色を設定します。 |
トップウィジェット2段目サブタイトル | トップページに表示されるウィジェットのサブタイトルの文字色を設定します。 |
トップウィジェット2段目ボタン | トップページに表示されるウィジェットのボタンの背景色を設定します。 |
トップウィジェット2段目ボタンテキスト | トップページに表示されるウィジェットのボタンの文字色を設定します。 |
トップウィジェット2段目背景色 | トップページに表示されるウィジェットの背景色を設定します。 背景色不透明度コントローラーで文字や画像が見やすいよう調整してください。 テーマ専用ウィジェットの背景色が優先されます。 |
サブページタイトルブロック
カスタマイザーで操作できるページ | サブページ(下層ページ) |
---|
サブページ(下層ページ)タイトルブロックの色の設定をします。

サブページタイトル背景色 | 下層ページ(投稿・固定など)のページタイトルの背景色を設定します。 |
サブページタイトル&その他 | 下層ページ(投稿・固定など)のページタイトルの文字色を設定します。 |
サブページコンテンツブロック
カスタマイザーで操作できるページ | サブページ(下層ページ) |
---|
サブページ(下層ページ)コンテンツブロックの色の設定をします。

サブページコンテンツ内サブタイトル | 下層ページ(投稿・固定など)のコンテンツ内にあるサブタイトルの文字色を設定します。 |
サブページコンテンツ内ボタン | 下層ページ(投稿・固定など)にあるボタンの背景色を設定します。 |
サブページコンテンツ内ボタンテキスト | 下層ページ(投稿・固定など)にあるボタンの文字色を設定します。 |
サブページサイドバー
カスタマイザーで操作できるページ | サブページ(下層ページ) |
---|
サブページ(下層ページ)サイドバーの色の設定をします。

サブページサイドバーメインタイトル | 下層ページ(投稿・固定など)にあるサイドバーのメインタイトルの文字色を設定します。 |
サブページサイドバーサブタイトル | 下層ページ(投稿・固定など)にあるサイドバーのサブタイトルの文字色を設定します。 |
サブページサイドバーボタン | 下層ページ(投稿・固定など)にあるサイドバーのボタンの背景色を設定します。 |
サブページサイドバーボタンテキスト | 下層ページ(投稿・固定など)にあるサイドバーのボタンの文字色を設定します。 |
サブページサイドバー背景色 | 下層ページ(投稿・固定など)にあるサイドバーの背景色を設定します。 背景色不透明度コントローラーで文字や画像が見やすいよう調整してください。 |
ヘッダーメニュー内
カスタマイザーで操作できるページ | 全ページ |
---|
トグルナビゲーション内の色の設定をします。
まだ、メニューの設定をされていなければ、先にメニューの設定を行ってください。

項目名 | 設定内容 |
---|---|
ヘッダーメニュー内テキスト | メニュー内のテキスト色を設定します。 |
ヘッダーメニュー内ライン | メニューとメニューの間のラインの色を設定します。 |
ヘッダーメニュークローズボタン | メニューエリアの右側にあるクローズボタンの色を設定します。 |
ヘッダーメニュー背景色 | メニューエリアの背景色を設定します。 |
フッターウィジェット
カスタマイザーで操作できるページ | 全ページ |
---|
全ページ共通のフッターウィジェットエリアの色の設定をします。

項目名 | 設定内容 |
---|---|
フッターウィジェットメインタイトル | フッターウィジェットメインタイトルの文字色を設定します。 |
フッターウィジェットサブタイトル | フッターウィジェットサブタイトルの文字色を設定します。 |
フッターウィジェットボタン | フッターウィジェットボタンの背景色を設定します。 |
フッターウィジェットボタンテキスト | フッターウィジェットボタンテキストの文字色を設定します。 |
フッターウィジェット背景色 | フッターウィジェットの背景色を設定します。 背景色不透明度コントローラーで文字や画像が見やすいよう調整してください。 |
コンタクトブロック
カスタマイザーで操作できるページ | 全ページ |
---|
コンタクトブロックエリアの色の設定をします。

項目名 | 設定内容 |
---|---|
コンタクトブロックテキスト | コンタクトブロックのテキスト色を設定します。 ホワイト・ブラックの2つの選択肢から選んでください。 |
コンタクトブロック背景色 | コンタクトブロック背景色を設定します。 背景色不透明度コントローラーで文字や画像が見やすいよう調整してください。 |
フッター
カスタマイザーで操作できるページ | 全ページ |
---|
フッターエリアの色の設定をします。

項目名 | 設定内容 |
---|---|
フッター背景色 | フッターの背景色を設定します。 |
フッターテキスト&ライン | フッターテキスト&ラインの色を設定します。 |
フッターリンクテキスト | フッターリンクテキストの文字色を設定します。 |
Welcart
カスタマイザーで操作できるページ | 商品一覧・詳細ページ |
---|
項目名 | 設定内容 |
---|---|
価格 | 価格の背景色を設定します。 |
売り切れ | 売り切れの文字色を設定します。 |
カートボタンテキスト | カートボタンのテキスト色を設定します。 |
カートボタン背景色 | カートボタンの背景色を設定します。 |
新規タグ | 独自で設定したタグの背景色を設定します。 |
お勧めタグ | お勧めタグの背景色を設定します。 |
僅少タグ | 僅少タグの背景色を設定します。 |
セールタグ | セールタグの背景色を設定します。 |
休日の色 | カレンダーに登録した休日の色を設定します。 |