wordpress【賢威】でグローバルメニューを均等化する方法

ワードプレスのヘッダー下のタスキのようなメニューは
グローバルメニューと呼ばれる。

 

 

 

 

 

 

 

グローバルメニューの設定時、メニューの名前をグローバルメニュー
にしないといけないわけでなく、設定の名前を決めてるだけなので
サイト管理者さえ識別できればいいのです。

 

 

極端な話、『デフォルト』みたいな名前でも良い。

 

デフォルトではグローバルメニューは均等化されない

 

グローバルメニューがたくさんあるサイトあまりないサイトと
千差万別ですが自動で均等調整されないのでデコボコ感を感じる
ケースがあります。

 

グローバルメニューが少ないサイトの場合メニューが左に片寄って
しまい見栄えがよくありません。

 

 

design.cssに文字列を追記することにより均等化できる

 

design.cssの位置はワードプレス管理画面の
外観⇒テーマの編集にあります。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

design.cssの一番下に以下の文字列を追記します。

 

 

#global-nav ul{display: flex; /*フレキシブルボックス*/text-align: center; /*センタリングするかどうか*/}#global-nav ul li{width: 300px; /*幅の最大値*/}

 

 

追記して更新します。

 

 

 

 

 

 

 

文字列を追記するとグローバルメニューが均等化されます。

 

 

 

 

 

 

 

 

 

グローバルメニューの文字の大きさの変更

 

外観 ⇒テーマの編集 ⇒design.cssにいき
ｃｔｒｌ＋Fにてグローバルメニューをみつけます。

 

 

 

 

 

 

 

その下にemという文字の大きさを変更する部分が
ありますので目視で一番しっくりくる文字サイズを
みつけます。

 

 

あまりいじりすぎると悪手をうつ

 

グローバルメニューのカスタマイズとして
背景色の変更、文字色の変更、ドロップダウンメニューの追加
とまだまだ多彩なカスタマイズができますが

 

simple is bestではないですが極端にカスタマイズすると
かえって見栄えが悪くなるので注意が必要です。

 

 

又カスタマイズする文字列の記述がテンプレートによって
違ったりもするので情報量の多いテンプレートを使うことが
結局は時間の短縮になります。