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

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

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

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

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

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

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

ぽてん
ぽてん

前置きとして、当サイトは
無料テーマCocoonを使用しております☆

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

幅が200より少し大きくなりましたね!

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

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

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

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

ぽてん
ぽてん

設定お疲れ様でした☆

コメント

タイトルとURLをコピーしました