![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/komatta_man2-270x300.png)
●ヘッダーエリアや画面上部のエリアを横幅いっぱいに表示する方法がわからない・・。
今回はこんなお悩みを解決していきます。
こんな方におすすめ
- AFFINGER6初心者
- AFFINGER6をおしゃれにカスタマイズしたい方
- サイトデザインにこだわりたい方
本記事の信頼性
メニューバーやヘッダーエリアはサイトに訪れたユーザーが一番初めに目につく箇所です。
ユーザーから良く見られる部分だからこそ、こだわってサイトデザインしていきたいですよね。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1843,h_2328/https://tecchanblogs.com/wp-content/uploads/2020/12/Tetsu-blog.jpg)
AFFINGERヘッダーエリア(メニューバー)の参考例
上記のような感じで画面横幅いっぱいまでメニューバー、ヘッダーが広がっていると見栄えが良く見えると思います。
今回はAFFINGER6のメニューバーを画面横幅いっぱいに広げる方法をご紹介します。
本記事を読めば、AFFINGER6を簡単にサイトカスタマイズができると思うので、ぜひ参考にしてみて下さい。
その他AFFINGER6の設定方法を知りたい方は、AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】をご覧ください。
それでは早速始めていきます。
目次
【AFFINGER6】ヘッダーエリア、メニューバー、ヘッダー画像エリアの詳細について
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_920,h_552/https://tecchanblogs.com/wp-content/uploads/2020/11/183207691-1024x614.jpg)
【AFFINGER6】ヘッダーエリア、メニューバー、ヘッダー画像エリアの詳細について
まず始めにそれぞれのエリアについてご説明します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1901,h_782/https://tecchanblogs.com/wp-content/uploads/2020/12/headerエリア詳細.jpg)
ヘッダーエリア、ヘッダー画像エリア、メニューバー、ヘッダーカードエリアの場所について
上記のような感じ。上からヘッダーエリア、ヘッダー画像エリア上、メニューバー、ヘッダーカードエリアとなっています。
ちょっとややこしいですが、ヘッダーエリアからメニューバーまでのエリアをheaderエリアといいます。
このheaderエリアの横幅が画面いっぱいになっていないとこんな感じ。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1157,h_804/https://tecchanblogs.com/wp-content/uploads/2020/12/メニューバーを画面横幅いっぱいに広げる方法.jpg)
ヘッダーエリア横幅いっぱいじゃない場合
なんかちょっと微妙・・メニューバーやヘッダーエリアが画面の途中から切れて白色になっているので、見栄えがあまりよくありません。
スマホで見る分には気になりませんが、パソコンで見ると案外気になる部分なんですよね。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
【AFFINGER6】メニューバーを画面横幅いっぱいに広げる方法
![【AFFINGER6】メニューバーを画面横幅いっぱいに広げる方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_559/https://tecchanblogs.com/wp-content/uploads/2020/12/2891-1024x588.jpg)
【AFFINGER6】メニューバーを画面横幅いっぱいに広げる方法
それではAFFINGER5でメニューバーを画面横幅いっぱいに表示する方法についてご紹介します。
まずは、AFFINGERの管理画面から外観⇒カスタマイズをクリックしてください。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1035,h_780/https://tecchanblogs.com/wp-content/uploads/2020/12/メニューバーを画面横幅いっぱいに広げる方法2.jpg)
AFFINGER5メニューバーを画面横幅100%にする方法
上記画像の通りです。
メニューのカラー設定⇒PCヘッダーメニュー⇒メニューの横幅を100%にするにチェックを入れます。
これでメニューバーの横幅を画面いっぱいに表示できました。
【AFFINGER6】メニューバーを横幅いっぱいに表示できない場合
![AFFINGER6でメニューバーを横幅いっぱいに表示できない場合](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_660/https://tecchanblogs.com/wp-content/uploads/2020/12/ONKJB601-e1608223562735-1024x694.jpg)
AFFINGER6でメニューバーを横幅いっぱいに表示できない場合
上記手順で画面横幅いっぱいにならない場合は、下記手順で確認してみて下さい。
手順①:カスタマイズ管理画面へ移動する
先ほどと同じようにAFFINGER管理画面から外観⇒カスタマイズをクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_345,h_508/https://tecchanblogs.com/wp-content/uploads/2020/12/メニューバーを画面横幅いっぱいに広げる方法3.jpg)
カスタマイズ管理画面
上記画面になります。
手順②:基本エリア設定から背景色を選択
上記の基本エリア設定をクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_346,h_473/https://tecchanblogs.com/wp-content/uploads/2020/12/メニューバーを画面横幅いっぱいに広げる方法4.jpg)
基本エリア設定⇒背景色を選択
すると上記画面になるので、『背景色』を選択します。
手順③:サイト背景色をクリアする
背景色を選択すれば、下記画面に移ります。
この画面でサイト背景色の指定をしていないでしょうか?
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_348,h_584/https://tecchanblogs.com/wp-content/uploads/2020/12/メニューバーを画面横幅いっぱいに広げる方法5.jpg)
AFFINGER サイト背景色をクリアする
サイト背景色を設定していると、メニューバーが100%表示されないので、注意が必要です。
僕自身、サイト背景色を白色(#ffffff)で指定していたので、画面いっぱいに表示ができていませんでした。
サイト背景色の『クリア』をクリックして保存すれば、解決すると思うので、実施してみて下さい。
AFFINGER6でヘッダーカード周辺の設定をするなら
![AFFINGER6でヘッダーカード周辺の設定をするなら](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_920,h_569/https://tecchanblogs.com/wp-content/uploads/2020/12/OQ5KBA01-1024x633.jpg)
AFFINGER6でヘッダーカード周辺の設定をするなら
ここまでheaderエリアを画面いっぱいに表示する方法についてご紹介しました。
ヘッダーカードを設定すれば、ユーザ―を集客することも可能です。
ヘッダーエリアを横幅いっぱいに表示して、そのままヘッダーエリアも変更したい方は、下記記事を参考にしてみて下さい。
>>【AFFINGER6】ヘッダーカードにカード型リンクを設定する方法
まとめ:AFFINGER6でメニューバーを画面100%表示してサイトをキレイにしよう
![まとめ:AFFINGER6でメニューバーを画面100%表示してサイトをキレイにしよう](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_871/https://tecchanblogs.com/wp-content/uploads/2020/10/AFFINGER-1024x916.png)
まとめ:AFFINGER6でメニューバーを画面100%表示してサイトをキレイにしよう
今回はAFFINGER6のメニューバーを画面横幅いっぱいに広げる方法をご紹介しました。
ちょっとの修正でも、見え方は違ってくるものです。今回ご紹介した方法は3分もあれば、設定できると思うのでぜひ試してみてください。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
AFFINGER6についてよく知らない方は、AFFINGER6の特典10個付きレビュー!使用感やメリット・デメリットを徹底解説】を参考にしてみて下さい。
ちなみに当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益月6桁までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
-
AFFINGER6(アフィンガー6)の使い方はこれでOK【徹底解説します】
続きを見る