AFFINGER ヘッダーメニューを中央ぞろえ（センタリング）する方法

横幅が広い画面が増えてきました。ヘッダメニューが左に並ぶと右側にスペースがあいてしまうため、センタリングしたほうが見栄えが良い場合があります。

AFFINGER でヘッダーメニューをセンタリングする方法です。

ヘッダメニューの中央ぞろえ（センタリング）

ヘッダメニューを中央ぞろえにします。これだけでサイトの見た目（バランス）がまた一つ変わりますね。

（ディフォルトは左寄せです）

ポイント

サイトの作りによってメニューを左寄せ、中央ぞろえのどちらがバランスよいか決まりますので、両方、試してみてください。

WordPress の管理画面から、「外観」 → 「カスタマイズ」 → 「メニュー」 → 「各メニュー設定」 → 「PCヘッダーメニュー」を選択します。

「メニューをセンター寄席にする」をチェックします。

完了です。

ヘッダメニューの中央ぞろえ（センタリング）は CSS にて実施します。

CSS の原文です。

@media screen and (min-width: 960px) {
header .smanone ul.menu {
display:flex;
justify-content:center;
}
}

@media screen and (min-width: 960px)	メディアがスクリーンで横幅が 960px 以上の場合に採用します。（960px 以下の場合、スマホ用の表示になります）
display:flex;	要素（アイテム）を横並びにします。
justify-content:center;	要素（アイテム）をまとめて中央ぞろえにします。

※ 要素（アイテム）横幅の合計が外枠（親要素）も大きくなる場合は適宜縮小して表示します。