Cocoon設定→ヘッダーについて説明します。
目次
ヘッダー設定
ヘッダーレイアウト
- センターロゴ
メニューの高さは通常60px、スリムメニューの場合は40pxです。
- デフォルト
- トップメニュー
- スリムメニュー
- スリムトップメニュー
- トップメニュー
ヘッダー全体の高さは通常60px、小の場合は40pxです。
- デフォルト
- 右寄せ
- 小
- 小（右寄せ）
ヘッダーの固定
- ヘッダーを固定する
オンにすると、ページをスクロールしてもヘッダーが固定表示されます。
ヘッダー固定・モバイルロゴ
ヘッダーロゴを設定すると有効になります。
「ヘッダー固定」とした場合、スクロール時に表示されるロゴ画像を指定できます。
また、このロゴはモバイルボタンのサイトロゴにも反映されます。
高さ
画面幅が1024px以上で適用されるヘッダーの高さを設定します（図1参照）。
この設定は、ヘッダーレイアウトが「センターロゴ」の場合に適用されます。
高さ（モバイル）
画面幅が834px以下で適用されるヘッダーの高さを設定します（図2参照）。
ヘッダーロゴ
ヘッダーに表示する画像を設定します。
未入力の場合、外観 →カスタマイズ→サイト基本情報で設定した「サイトのタイトル」がヘッダーに表示されます（図3参照）。
| ヘッダーレイアウト | 画像表示 |
|---|---|
| センターロゴ | 画像の高さがヘッダーの高さを超える場合、ヘッダーの高さが自動的にロゴの高さに調整されます。 |
| トップメニュー | 画像の高さは通常60px、小の場合は40pxとなります。 |
ヘッダーロゴサイズ
| 幅 | 高さ | 表示 |
|---|---|---|
| – | – | 画像サイズのまま表示します。 |
| ● | – | 画像の比率を保持し、設定した幅で表示します。 |
| – | ● | 画像の比率を保持し、設定した高さで表示します。 |
| ● | ● | 画像の比率を保持し、設定した幅で表示します。 |
キャッチフレーズの配置
外観→カスタマイズ→サイト基本情報で設定した「キャッチフレーズ」がヘッダーに表示されます。
- 表示しない
- ヘッダートップ
- ヘッダーボトム
ヘッダー背景画像
設定した「高さ」や「高さ（モバイル）」に合わせて保持しつつ幅100%で表示されます（図1、図2参照）。
縦方向は上揃え、横方向は中央配置となります。
- ヘッダー背景画像の固定する
オンにすると、画面幅が1024px以上の場合、スクロールしても背景画像は固定表示されます。
- 背景画像を全てを表示する
オンにすると、設定した「高さ」は無効となり、画像全体が比率を保持して表示されます。
ヘッダー全体色
- ヘッダー全体背景色
ヘッダーの背景色を設定します（デフォルト：#ffffff）。
- ヘッダー全体文字色
ヘッダーの文字色を設定します（デフォルト：#333333）。
ヘッダー色（ロゴ部）
ヘッダー全体色よりも優先して設定されます。
- ロゴエリア背景色
図4①に示すロゴエリアの背景色を設定します。
- ロゴ文字色
図4①に示すロゴエリアの文字色を設定します。
グローバルナビメニュー色
ヘッダー全体色よりも優先して設定されます。
- グローバルナビ背景色
図4②に示すグローバルナビの背景色を設定します。
- グローバルナビ文字色
図4②に示すグローバルナビの文字色を設定します。
グローバルナビメニュー幅
- トップメニュー幅
トップメニューの幅を設定します（デフォルト：176px）。
- メニュー幅をテキストに合わせる
オンにすると、トップメニューの幅がテキスト幅に合わせて表示されます。
- サブメニュー幅
サブメニューの幅を設定します（デフォルト：240px）。
