Cocoon｜ヘッダーメニューの色・幅の設定方法

『WordPressでヘッダーメニューを作成したけど、Cocoonのテーマでは色や幅はどこで設定できるの？』

『ヘッダーメニューのタブが二段に表示されてて見にくくなっている・・幅は調整可能？』

そんな方のために、WordPressのヘッダーメニュー（グローバルメニュー）の色や幅の設定方法を紹介いたします！

▼当サイトも一番最初にヘッダーメニューを作成してみると、

初期の設定だと、文字が白くてとても見えにくくなっていました。

それではさっそく、グローバルメニューの色・幅の設定をしていきましょう！

ヘッダーメニューの色・幅の設定方法

ヘッダーメニューの色の設定

ワードプレス管理画面より、Cocoon設定をクリックします。

Cocoon設定　＞　ヘッダーを開きます。

①のグローバルナビメニュー色で背景色・文字色の設定ができます。

・グローバルナビ色：
メニューの背景色を設定します。

・グローバルナビ文字色：
メニューに表示される文字の色をこちらで設定します。設定した背景色に合わせて文字色を設定しましょう！

ヘッダーメニューの幅の設定

続いて、②のグローバルナビメニュー幅でタブの幅を設定していきます。

ちなみに、トップメニュー幅とサブメニュー幅とありますが、

トップメニュー幅とは下図の幅のことを指します▼

サブメニュー幅とは下図の赤枠内（タブを押した先に表示される副項目）の幅のことを指します▼

『□メニュー幅をテキストに合わせる』とは？

通常だと、設定した幅が等間隔に表示されますが、表示するメニューの数が多い場合、一行に収まりきらず二段で表示されてしまう場合があります。

そこで、この□メニュー幅をテキストに合わせるにチェックを入れると、テキストの文字数に合わせて自動で幅を狭めてくれます。

『メニューの幅が等間隔だと一行に入らないから、文字の大きさごとに幅を節約して、一行に入れたい！』

そんな方は、この項目にチェックを入れると便利です！

メニュー幅の数値について

メニュー数は３つで、トップメニュー幅を１００にした場合・・▼

幅が狭すぎて、メニューの文字が切れてしまいました。

トップメニュー幅を２００にした場合・・▼

このような間隔で表示されます！

トップメニュー幅を３００にした場合・・▼

幅が２００より少し大きくなりましたね！

設置するメニュー数によって最適な間隔が変わってくるかと思いますので、お好みで幅を調節してみてください！

サブメニュー幅については、副項目メニューの文字数によって調節することをおすすめします。

ちなみにサブメニュー幅を１００にしたところ・・

【便利シリーズ】という８文字でぴったり表示されるサイズでした！