AFFINGER6

AFFINGER6 ヘッダーメニューを中央ぞろえ(センタリング)する方法







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

AFFINGER6 でヘッダーメニューをセンタリングする場合は、CSS で定義します。



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





ヘッダメニューを中央ぞろえにします。

(ディフォルトは左寄せです)



センタリングする方法



■ センタリングする CSS



ヘッダメニューの中央ぞろえ(センタリング)は 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;
要素(アイテム)をまとめて中央ぞろえにします。

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



■ CSS を記載する方法





WordPress の管理画面から [外観] → [カスタマイズ] → [追加CSS] をクリックします。


センタリング用の CSS を記載して保存します。



完成です。



まとめ



AFFINGER6 でヘッダーメニューをセンタリングする場合は、CSS で定義します。




  • CSS で 960px 以上の表示でセンタリングします
  • [display:flex;] で要素をまとめて横並びにしてセンタリングします



かっこいいヘッダメニューを作ってくださいね。




WordPress のテーマ「AFFINGER6」の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ