【AFFINGER5(WING)】PC用ヘッダーメニューを中央寄せにするカスタマイズ

 2018-09-04   

  • アフィンガー5でグローバルメニュー(ヘッダーメニュー)を作ったけど右の隙間が気になる
  • メニューのサイズとか気にせずにお手軽に中央寄せしたい
いちあき
そんなブロガーの方向けの記事です!

 

アフィンガー5(WING)でPC用グローバルメニュー(ヘッダーメニュー)を作ると、メニュー数によっては右に隙間ができますよね。

今回はこれを、

こんな感じにヘッダーメニューを中央寄せ(センター)する方法をお伝えします。

 

作業の際は必ずバックアップを実施のうえ、自己責任でお願いします

 

カスタマイズ関連記事はこちら

カスタマイズ

2018/9/5

AFFINGER5購入後に見るべきカスタマイズ参考サイトまとめ

アフィンガー5を購入したけど、使い方が全くわからない! アフィンガーの扱いは慣れてきたけど、まだまだ活用できてない機能がある気がする アフィンガーのカスタマイズに手を出したいけど、参考になりそうなサイトは無いかな いちあきそんな方向けの記事です   あなたはアフィンガーを活用できていますか?   そう聞かれて100%の気持ちで「はい!できています!」なんて答えられる人は恐らくこの記事を見ていないと思います笑 扱いに慣れてきても「まだこの機能使ったことがないんだよな」とか「もうちょっとこ ...

ReadMore

カスタマイズ

2018/9/4

【AFFINGER5(WING)】PC用ヘッダーメニューを中央寄せにするカスタマイズ

アフィンガー5でグローバルメニュー(ヘッダーメニュー)を作ったけど右の隙間が気になる メニューのサイズとか気にせずにお手軽に中央寄せしたい いちあきそんなブロガーの方向けの記事です!   アフィンガー5(WING)でPC用グローバルメニュー(ヘッダーメニュー)を作ると、メニュー数によっては右に隙間ができますよね。 今回はこれを、 こんな感じにヘッダーメニューを中央寄せ(センター)する方法をお伝えします。   作業の際は必ずバックアップを実施のうえ、自己責任でお願いします   ...

ReadMore

 

スポンサーリンク

アフィンガー5でPC閲覧時のグローバルメニュー(ヘッダーメニュー)を中央寄せする方法

めっちゃ簡単です。CSSの追記だけで完結します。

 

step
1
CSSエディタ(追加CSS)を開く

ワードプレスのダッシュボードから外観→カスタマイズ→追加CSS

この画面にたどり着けばOK!

ただ、今後のカスタマイズとか更新を考えるとプラグイン「Simple Custom CSS」とか入れておくとなおよし。別の話なので今度紹介します。

 

step
2
以下のCSSをコピーする

ヘッダーメニュー中央寄せCSSコード

@media print, screen and (min-width: 960px) {
header .smanone ul.menu {
display:flex; /*フレシキブルボックス化*/
justify-content:center; /*中央寄せ*/
}
}

貼り付けるとこんな感じ。

このとき、全面が茶色になっていたらコメント化されていて動きませんので、もう一度ちゃんとコピーしてみてください。

 

step
3
「公開」を押せば完了!

最後に「公開」を押すと、コピペしたCSSが反映されて完了です。

お疲れさまです。

 

スポンサーリンク

今回のコードの仕様

仕様ってほどでもないですけど、動きはこんな感じ。

  • メニューの幅が全体の幅を超える(6個か7個くらい)と2段目となる ※公式の仕様と同じ
  • サブメニューや孫メニューも動作します

つまりは公式の動きと特段変わらないよって感じ。

中央寄せになることで、右側のスペースが狭くなって違和感が無くなります。

 

とはいえ、センター寄せができてなんだという話ですね。

ブログを本気でやっている人は、僕みたいにあまりデザインに凝りすぎないよう注意しましょう笑

 

非公式のCSSなので想定外のレイアウト崩れ等が発生する可能性はあります。ご了承ください。

 

スポンサーリンク

参考とさせていただいたサイト・記事など

センター寄せがしたいと思って最初にたどり着いたのが公式サイトでした。

こちらの方法でも可能だったのですが、メニュー数×161pxの計算が面倒だなと思ったのでFlexboxを使うやり方にしました。

あとアフィンガー4用ってなってたので5用が欲しいなと思って。

 

右側スキマ問題を解決するもうひとつの手法を紹介しています。めっちゃわかりやすいです。

ただ、このやり方だと気になった点があったので今回は中央寄せにしました。

 

両サイトともシンプルで非常に勉強になりました。ありがとうございます。

-カスタマイズ

Copyright© いちメモ! , 2018 All Rights Reserved.