最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

グローバルナビのメニュー項目をサイトの幅いっぱいに等間隔に並べる方法

本記事ではMax Mega Menuで作成したグローバルナビのメニュー項目をサイトの幅いっぱいに等間隔に並べる方法について説明します.具体的にはMega Menuの設定画面からCSSを追記することで実現します.

Max Mega Menuでサイト幅いっぱいに等間隔に並べる設定方法

①WordPressの管理画面から「Mega Menu→Menu Themes」を選択します.

161107_3


②一番下のCustom Stylingの部分でCSS Editorに以下のコードを貼り付けます.

161107_4

“同じ幅にするなら以下” からが追記部分ですが,
まず最初の
#{$wrap} #{$menu} > li.mega-menu-item {
で「各メニュー項目」を選択しています.
次にwidthで幅を設定しています.

Simplicity2のメインの横幅は1070pxなので,それをメニュー項目数(今回は6)で割って大きさを求めています.

そのままではマージン分などで少し幅が大きいので,それをよりも少し小さな値を幅に設定します.


③同様にCustom Stylingの部分でTop Level Menu itemsでFontをCenterにします.

161107_1

④最後に画面一番下の「変更を保存」を押せば完了です.

もし,クリックしたあと正常に変更されず変なページにとんだ場合の対処法は以前の記事に書いたので参考にしてください.

2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法
本記事では,グローバルナビのデザインを変更する方法を説明します.上記のアイキャッチ画像の上の状態から下の状態へ変更します.今回グロー...

これで各メニュー項目が等幅になり以下の図のように変更することができます.

161107_2

あまりデザイン的に今回はフィットしなかった気がしたので,元の状態に戻しましたが,もし同じようにグローバルナビの項目を幅いっぱいに等幅で並べたいときは本記事を参考にしてみてください.

ご一読いただき,ありがとうございました.