AFFINGER

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

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

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

 

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

 

こんな方におすすめ

  • AFFINGER5初心者
  • AFFINGER5をおしゃれにカスタマイズしたい方
  • サイトデザインにこだわりたい方

 

本記事の信頼性

当ブログもAFFINGER5を使用しています。メニューバーを横幅いっぱいにする方法についてご紹介できます。

 

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

 

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

 

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

 

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

 

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

 

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

 

AFFINGER5についてよく知らない、評判やメリット・デメリットについて確認しておきたいという方は、AFFINGER5の評判・メリットデメリットを徹底解説【実際に使った感想をレビュー】を参考にしてみて下さい。

 

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

 

 

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

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

 

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

 

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

 

上記のような感じ。

 

上からヘッダーエリア、ヘッダー画像エリア上、メニューバー、ヘッダーカードエリアとなっています。ちょっとややこしいですが、ヘッダーエリアからメニューバーまでのエリアをheaderエリアといいます。

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

まずは、AFFINGERの管理画面から外観⇒カスタマイズをクリックしてください。

 

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

 

上記画像の通りです。

 

メニューのカラー設定⇒PCヘッダーメニュー⇒メニューの横幅を100%にするにチェックを入れます。

 

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

 

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

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

 

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

 

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

 

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

 

カスタマイズ管理画面

 

上記画面になります。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

僕自身、サイト背景色を白色(#ffffff)で指定していたので、画面いっぱいに表示ができていませんでした。

 

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


【AFFINGER5】ヘッダーカード周辺のカスタマイズをするなら

【AFFINGER5】ヘッダーカード周辺のカスタマイズをするなら

 

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

 

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

 

ヘッダーエリアを横幅いっぱいに表示して、そのままヘッダーエリアもカスタマイズしたいという方は、下記記事を参考にしてみて下さい。

 

>>参考:【AFFINGER5】ヘッダーカードにカード型リンクを設定する方法&カスタマイズ方法

 

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

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

 

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

 

ちょっとの修正でも、見え方は違ってくるもの。

 

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

 

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

 

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

 

それでは本日はこの辺りで。

 

関連記事
WordPressブログのおすすめ有料テーマ
【2021年】WordPressブログのおすすめ有料テーマ7つを徹底比較

続きを見る

 

関連記事
【AFFINGER5】カスタムMCボタンでアフィリエイト収益UP!カスタマイズ方法を解説

続きを見る

 

-AFFINGER