ヘッダーのメニュー設定

ヘッダーのナビ部分のメニューの設定の仕方

ヘッダーの設定の仕方について困ったことはありませんか。

ナビ部分のメニューの移置や幅などの設定の仕方が分からないということはありませんか。

ヘッターのナビ部分のメニューを上に表示する方法

テーマは「Cocoon」を使っています。（以下はCocoonの場合です）

①管理メニューからCocoon設定をクリック

②「ヘッダー」タブをクリック

③「ヘッダー」設定で、「ヘッダーレイアウト」のところを「センターロゴ（トップメニュー）を選択して青色背景の白文字の「変更をまとめて保存」をクリック

すると次のようになります

ナビ部分をやや細くしてヘッダーの下部に表示する方法

①管理メニューからCocoon設定をクリック

②ヘッダータブをクリック

③ヘッダー設定で、「ヘッダーレイアウト」のところを「センターロゴ（スリム）」を選択して青色背景の白文字の「変更をまとめて保存」をクリック

すると次のようになります

ヘッダーレイアウトの高さを変更したい場合

ヘッダーレイアウトの下の「高さ」を「５００」と入力すると、

上のように、ヘッダーの高さが５００ｐｘとなりました。高さを１５０とすると、以下のようになります。

ヘッダーロゴとヘッダーロゴサイズの設定

画像を選んで、幅７５０、高さを３００で設定すると

キャッチフレーズの配置の設定

「キャッチフレーズ」って、どこのことかと思いますが、私のサイトであれば、「すーさんのブログ」の上か下にやや小さめに書かれている「日々精進」の言葉です。この言葉を「表示しない」「ヘッダートップ（デフォルト）」「ヘッダーボトム」のどれかを選択して表示できます。ヘッダートップなら、「すーさんのブログ」の上に表示され、「ヘッダーボトム」なら下に表示されます。

ヘッダー背景画像の設定

ヘッダーに表示したい画像を選択します。「選択」ボタンをクリックすると、メディアライブラリにある画像を選んでから、「画像の選択」をクリックすれば好きな画像を背景に設置できます。なければ、ファイルを自分のローカルパソコンからアップロードします。

ヘッダー全体色の設定

ヘッダー背景画像が設定されていると、背景画像が反映するので、背景画像をまず、クリアします。次にヘッダー全体背景色の色を選択し、ヘッダー全体文字色を選択します。例えば、色を水色に選択し、文字色を黒色で選択します。すると、以下のようになります。

ヘッダー色（ロゴ部）の設定

ヘッダー色（ロゴ部）のロゴエリア背景色を黄色、ロボ文字色を黒色で設定します。

グローバルナビメニュー色の設定

メニューの背景を黄色で、文字を黒色にしたい場合は、

グローバルナビメニュー色を黄色、グローバルナビ文字色を黒で選択します。すると、以下のような画像になります。

グローバルナビメニュー幅の設定

トップメニュー幅をたとえば、１５０します。すると、「ホーム」「ブログ」と書かれている文字の幅が１５０に設定されます。このメニュー幅をテキスト文字の長さに合わせて調整すると、文字数に合わせて各メニューの幅に調整されます。