基本カラー

はじめに

図1に、「基本カラー」を示します。
以下の、CSSプロパティ変数に定義されます。

:root {
  /* サイトカラー */
  --main-color: #f5f4f1;

  /* 背景カラー */
  --body-color: #40210f;

  /* テキストカラー */
  --text-color: #ffffff;
}

基本カラー

サイトカラー

表1に示す部分に、設定します。

Cocoon設定	項目	詳細	備考
ヘッダー	ヘッダー色(ロゴ)	ロゴ文字色
	グローバルメニュー色	グローバルナビ背景色
通知	色	通知エリア背景色
		通知エリア文字色
ボタン	ボタン色	文字色

図2に示すように、アイキャッチ、サムネイルの背景色に、サイトカラー15%が、反映されます。

背景カラー

表2に示す部分に、設定します。

Cocoon設定	項目	詳細	備考
全体	サイト背景色	背景色

テキストカラー

表3に示す部分に、設定します。

Cocoon設定	項目	詳細	備考
ヘッダー	グローバルメニュー色	グローバルナビ文字色

個別カラー

基本カラーで設定された色を、変更する場合、設定します。

ヘッダー背景・テキストカラー

Cocoon設定→ヘッダー→ヘッダー色(ロゴ部)を、設定をします。
Cocoon設定→ヘッダー→ヘッダー色(ロゴ部)を設定した場合、モバイルフッターボタンの背景カラー、テキストカラーにも反映されます。

グローバルナビ背景・テキストカラー

Cocoon設定→ヘッダー→グローバルナビメニュー色を、設定します。

フッター背景カラー

Cocoon設定→フッター→フッター背景色カラーを、設定します。

見出しデザイン

H2～H4、ウィジェット

H2～H4などの見出しデザインを、設定します。
詳細は、コチラを参照下さい。

設定で「装飾なし」とすると、各項目の親テーマCSSが持つ値がリセットされます。
この為、各自が追加したCSSを、反映することができます。

スライドインメニュータイトル

図3に示すように、スライドインメニューに、タイトルを追加します。
HTMLを入力可能で、タイトル前に、アイコンや画像を追加できます。
「ウィジェット」で選択したデザインが、反映されます。