Cocoon｜ヘッダー（グローバル）メニューの色・幅の設定方法

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

『グローバルナビのタブが二段に表示されてて見にくくなっている・・長さは調整可能？』

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

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

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

それではさっそく、ヘッダーメニューの色・幅の設定をしていきましょう！

Cocoon｜ヘッダー（グローバル）メニューの色の設定方法

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

Cocoon設定　→　ヘッダーをクリックします。

上画像の①グローバルナビメニュー色▼

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

上画像②のグローバルナビメニュー幅でタブの幅を設定できます。

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

トップメニュー幅とは、上図の赤色で囲った幅のことを指します。

サブメニュー幅とは、上図の赤枠内（カテゴリを押した先に表示される副項目）の幅のことを指します。

グローバルナビメニュー幅設定内の『□メニュー幅をテキストに合わせる』とは？

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

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

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

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

（グローバルナビメニュー幅）トップメニュー幅の数値は実際はどのくらい？

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

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

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

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

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

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

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

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

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

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