【AFFINGER6】ヘッダーエリア・メニューバーを画面横幅いっぱいにする方法

困ってる人

●AFFINGERを使ってるけど、メニューバーを画面横幅いっぱいに表示したい。

●ヘッダーエリアや画面上部のエリアを横幅いっぱいに表示する方法がわからない・・。

今回はこんなお悩みを解決していきます。

本記事の信頼性

メニューバーやヘッダーエリアはサイトに訪れたユーザーが一番初めに目につく箇所です。

ユーザーから良く見られる部分だからこそ、こだわってサイトデザインしていきたいですよね。

AFFINGERヘッダーエリア（メニューバー）の参考例

上記のような感じで画面横幅いっぱいまでメニューバー、ヘッダーが広がっていると見栄えが良く見えると思います。

今回はAFFINGER6のメニューバーを画面横幅いっぱいに広げる方法をご紹介します。

本記事を読めば、AFFINGER6を簡単にサイトカスタマイズができると思うので、ぜひ参考にしてみて下さい。

それでは早速始めていきます。

【AFFINGER6】ヘッダーエリア、メニューバー、ヘッダー画像エリアの詳細について

【AFFINGER6】ヘッダーエリア、メニューバー、ヘッダー画像エリアの詳細について

まず始めにそれぞれのエリアについてご説明します。

ヘッダーエリア、ヘッダー画像エリア、メニューバー、ヘッダーカードエリアの場所について

上記のような感じ。上からヘッダーエリア、ヘッダー画像エリア上、メニューバー、ヘッダーカードエリアとなっています。

このheaderエリアの横幅が画面いっぱいになっていないとこんな感じ。

ヘッダーエリア横幅いっぱいじゃない場合

なんかちょっと微妙・・メニューバーやヘッダーエリアが画面の途中から切れて白色になっているので、見栄えがあまりよくありません。

スマホで見る分には気になりませんが、パソコンで見ると案外気になる部分なんですよね。

メニューバーを横幅いっぱいにすれば、解決可能ですよ。

【AFFINGER6】メニューバーを画面横幅いっぱいに広げる方法

【AFFINGER6】メニューバーを画面横幅いっぱいに広げる方法

それではAFFINGER5でメニューバーを画面横幅いっぱいに表示する方法についてご紹介します。

AFFINGER5メニューバーを画面横幅100％にする方法

上記画像の通りです。

これでメニューバーの横幅を画面いっぱいに表示できました。

【AFFINGER6】メニューバーを横幅いっぱいに表示できない場合

AFFINGER6でメニューバーを横幅いっぱいに表示できない場合

上記手順で画面横幅いっぱいにならない場合は、下記手順で確認してみて下さい。

手順①：カスタマイズ管理画面へ移動する

先ほどと同じようにAFFINGER管理画面から外観⇒カスタマイズをクリックします。

カスタマイズ管理画面

上記画面になります。

手順②：基本エリア設定から背景色を選択

上記の基本エリア設定をクリックします。

基本エリア設定⇒背景色を選択

すると上記画面になるので、『背景色』を選択します。

手順③：サイト背景色をクリアする

背景色を選択すれば、下記画面に移ります。

この画面でサイト背景色の指定をしていないでしょうか？

AFFINGER　サイト背景色をクリアする

サイト背景色を設定していると、メニューバーが100％表示されないので、注意が必要です。

サイト背景色の『クリア』をクリックして保存すれば、解決すると思うので、実施してみて下さい。

AFFINGER6でヘッダーカード周辺の設定をするなら

AFFINGER6でヘッダーカード周辺の設定をするなら

ここまでheaderエリアを画面いっぱいに表示する方法についてご紹介しました。

ヘッダーカードを設定すれば、ユーザ―を集客することも可能です。

ヘッダーエリアを横幅いっぱいに表示して、そのままヘッダーエリアも変更したい方は、下記記事を参考にしてみて下さい。

>>【AFFINGER6】ヘッダーカードにカード型リンクを設定する方法

まとめ：AFFINGER6でメニューバーを画面100％表示してサイトをキレイにしよう

まとめ：AFFINGER6でメニューバーを画面100％表示してサイトをキレイにしよう

今回はAFFINGER6のメニューバーを画面横幅いっぱいに広げる方法をご紹介しました。

ちょっとの修正でも、見え方は違ってくるものです。今回ご紹介した方法は3分もあれば、設定できると思うのでぜひ試してみてください。

AFFINGER6は細かい部分の設定もできて、カスタマイズ自由度だ高いのが魅力的ですね。

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

AFFINGER6についてよく知らない方は、AFFINGER6の特典10個付きレビュー！使用感やメリット・デメリットを徹底解説】を参考にしてみて下さい。

ちなみに当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益月6桁までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。