全体・ヘッダー・フッター

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

広告:ページ内にてアフィリエイト広告を利用しています。

ヘッダーメニューのセンタリング

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

ポイント

本記事では、

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

かっこいいサイトデザインの第一歩ですね!

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

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

メニューのセンタリング

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

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

ポイント

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

両方、試してみてください。

AFFINGER の設定でセンタリングする方法

メニューをセンター寄せにする設定

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

完了です。

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 を記載する方法

CSSの設定画面

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

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

完成です。

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

PR

まとめ

AFFINGER でヘッダーメニューをセンタリングする場合は、管理画面でチェックする方法と、CSS で定義する方法があります。

(どちらで設定しても問題ありません)

ポイント

  • WordPress の管理画面でチェックをすることでセンタリングできます
  • CSS で行う場合は 960px 以上の表示でセンタリングするように設定します
  • CSS で行う場合は 「display:flex;」 で要素をまとめて横並びにしてセンタリングします

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

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

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

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記