AFFINGER4 WordPress ブログ

【AFFINGER4】メニューバーを横幅いっぱいに表示させる方法

更新日:

ワードプレス講座で受講生さんと一緒にサイトを作成。

「シンプルに」というご要望でしたので、背景を白にヘッダーにも写真を使わず作成することになりました。

色や写真を使わずシンプルに

白背景で、ヘッダーは写真ではなく文字を配置。

メニューバーは文字と同じ色に設定・・・

AFFINGER4でメニューバーの横幅変更

ん?なんか変。

シンプルはシンプルだけど、あまりにも素っ気なさすぎる。

メニューバーが画面の途中から表示されて途中で切れているのがおかしいのか・・・

メニューバーを横幅いっぱいにする方法はないの?

と思い調べてみると・・・

簡単にできちゃいました!

メニューバーを横幅いっぱいに表示させる方法

メニューバーの変更は、「外観」→「カスタマイズ」から行います。

AFFINGER4でメニューバーの横幅変更

 

「メニューのカラー設定」という項目がありますので、そこをクリックします。

AFFINGER4でメニューバーの横幅変更

 

メニューバーの色を設定する項目が表示されます。

そのままスクロールしていくと「メニューの横幅を100%にする」という項目がありますので、チェックを入れるとOK!

AFFINGER4でメニューバーの横幅変更

 

ほら!メニューバーが画面の横幅いっぱいまで広がりました。

AFFINGER4でメニューバーの横幅変更

バランスもよくなりましたし、タイトルがより際立ちますね。

 

メニューバーが100%にならない!?

上記の方法で「メニューの横幅を100%にする」をチェックして更新してもメニューバーが横幅いっぱいにならない・・・!?

実は、ある部分に指定を入れているとメニューバーが100%にならないようなのです。

以下をチェックしてみてください。

サイト背景色の指定をはずす

まずは、「外観」→「カスタマイズ」から『基本エリア設定』を表示させます。

AFFINGER4でメニューバーの横幅変更

 

「サイト背景色」の指定していませんか?

ここを指定しているとメニューバーが100%表示されないようです。

AFFINGER4でメニューバーの横幅変更

 

実は最初わたしもこれで悩みました。

背景に白にたかったので「背景色」と「サイト背景色」の両方に白(#ffffff)を指定していたのです。

背景色の指定は、「背景色」の方でし、「サイト背景色」の指定を解除すると無事メニューバーが横幅100%で表示されました。

 

まとめ

メニューバーの表示を変えるだけでもサイトの印象は変わります。

簡単にできますので、ぜひやってみてくださいね。

 

投稿者プロフィール

七星 奈津子
七星 奈津子

ブログ集客プロデューサー/ライター/コラムニスト


読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。


講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。


▶︎詳しいプロフィールはこちらから

この記事が気に入ったら
いいね ! しよう

Twitter で

-AFFINGER4, WordPress, ブログ

Copyright© 7stars725.com , 2018 All Rights Reserved.