基本カラー

はじめに

図1に「基本カラー」を示します。

基本カラー

サイトカラー

表1に示す部分に設定します。
見出しデザインの背景色などにも反映されます。

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

図2に示すように、アイキャッチやサムネイルの背景色にサイトカラーの15%が反映されます。
画像の背景を透過にすると、サイトカラーとの統一感が出ます。

背景カラー

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

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

テキストカラー

表3に示す部分に設定します。
見出しデザインの文字色にも反映されます。

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

個別カラー

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

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

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

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

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

フッター背景カラー

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

グローバルナビメニューデザイン

メニューにカーソルを合わせたときデザインを設定します。

見出しデザイン

H2～H4、ウィジェット

H2～H4などの見出しデザインを設定します。

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

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

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

さいごに

本スキンのカスタマイズにより、基本カラーの設定を通じて、サイト全体の統一感を高めることができます。
また、SWELLと同様に、メニューから見出し（H2～H4）のデザインを選択するだけで、簡単にサイトを構築できます。