ここあです。
先日、ワードプレスの設置代行サービスとして
AFFINGER5の設定をしていたのですが、
ヘッダーとフッターの幅がどうしても100%にならず苦労しました＾＾；
AFFINGER5は有料テーマの中でも特に多機能で、
設定を触るだけでいろんなことができてしまう
非常に優秀なテーマなのですが、
その反面、頻繁に触っていないと
「あの設定どこでやるんだったっけ？」と
迷子になってしまいます（笑）
ということで、今回も結局「迷子」になってしまった自分のため、
また、これからAFFINGER5を触って、
私と同じような設定で悩んでしまうあなたのために
備忘録としてきちんと残しておこうと思います！
例え「ピンポイントでマイナー」な内容であっても…。
というのも、たいてい迷子になるのは、本当に些細な部分で
誰でも簡単に出来そうだけど、なぜか出来ない！
だから検索してもなかなかネットでヒットしない！（泣）
そういう理由で解決できないことが多いからです＾＾；
なので、私もしっかりと残しておこうと思いますので、
同じことで悩んでいるあなたはぜひ参考にしてください＾＾
すぐに終わりますので（笑）
そもそもヘッダーとフッターとは？
そもそも「ヘッダーやフッターって何？」と思う
Web制作に関して、全く知識がないあなたのために
超ざっくり解説しておきます。
ヘッダーとはこの部分
まぁ、厳密には、
グローバルメニュー（ホームとか表示されてるメニュー）までの部分が
ヘッダーにはなるんですけど…
フッターとはこの部分
この辺のことだとざっくり覚えておいてください。
本当に超ざっくり（笑）
要はこのWebサイトの上下の部分、ここの表示を100%幅にしたい！
このように…
ただそれだけの単純な話（笑）
まぁ、通常なら設定で簡単にできるのですが…
設定してもそうなってくれないから苦労するわけで…。
もうね、完全にトラップですよ、トラップ。
そうは言っても憎めないAFFINGER5はステキです＾＾
と言うことで、時を戻そう！（笑）
AFFINGER5のヘッダーとフッターを100%表示にするには
普通にやればAFFINGER5のヘッダーとフッター部分を
100%表示にするのは超簡単です。
作業工程は…
STEP1
外観→カスタマイズをクリックSTEP2
メニューのカラー設定をクリックSTEP3
PCヘッダーメニューをクリックSTEP4
「メニューの横幅を100%にする」にチェック
これだけで100%表示になります。
通常は…。
ということで、文字だけでは分かりにくい！と言うあなたのために
画像も付けてお伝えすると…
１）ダッシュボードメニューから外観 → カスタマイズをクリック
２）［＋］メニューのカラー設定をクリック
３）PCヘッダーメニューをクリック
４）メニューの横幅を100%にするにチェックを入れる
これで通常はAFFINGER5のヘッダーとフッター部分が100%表示になります。
くどいですけど、このように↓
しかし、それで100%表示にならなかったので、私は苦労しました＾＾；
だって、どこの設定が影響してるのか、サッパリ分からなかったですもん！
ということで、ヘッダーとフッターを100%表示にするための解決方法は
以下の通りです。
AFFINGER5のヘッダーとフッターを100%表示にならない時は
上記の設定でヘッダーとフッターが100%表示にならないなんてことは
これまで一度もなかったので、焦ったわけですが…
まさか、こんなトラップがあるなんて（笑）
ということで、そんな時の対処法は超簡単！
その理由というのが、背景色の設定にあったからです。
つまり、サイトの背景色に何かしら色の設定が入ってしまっていると
ヘッダーとフッターが100%表示にならなくなってしまうんですね。
なので、ヘッダーとフッターが100%表示にならない場合は
おそらくは何かしらサイトの背景色が影響しておりますので、
早速背景色の設定を変更しましょう！
手順は以下の通り
１）ダッシュボードメニューから外観 → カスタマイズをクリック
２）基本エリア設定をクリック
３）背景色をクリック
４）サイト背景色を無しにする
確かに書いてました。
色の設定すると幅のMAX値は1100pxになりますと…＾＾；
ですから、おそらくこれを見て設定した記憶があれば
「あれ？」なんてことにはならないはず。
ですが私は、こんなところの背景色を設定をした
「記憶はございません！」（笑）
とは言え最近では、
AFFINGER5も「着せ替え」なる非常に便利な機能があるので
デザインの「着せ替え機能」を使ってしまうと、
合によってはそうした機能によってサイト背景色の設定が入ってしまうため
いざカスタマイズしようとした場合に思うようにはいかず
私のように困ってしまうということがあるんですね。
私が今回、そうなってしまったのは事実
この「着せ替え機能」を使って設定したからという経緯があります。
※着せ替えは便利な反面、そういうデメリットもあります＾＾；
なので、「着せ替え機能」は確かに便利な機能ですが、
特に設定項目の多いAFFIGER5の場合は、自分が設定しないことで
予期せぬ迷宮に入り込んでしまうことがありますので、
特にサイトのデザインをカスタマイズされる場合は
慎重に設定されることをおすすめします。
ヘッダーとフッターの幅が100%表示にならない時の解決方法まとめ
今回は、着せ替え機能により自分が設定した記憶のない部分に設定が入ってしまい
予期せぬところで、設定通りに表示画面が切り替わらず困惑したという私の経緯から
ヘッダーとフッターの幅が100%表示にならない時の解決方法について
備忘録としてまとめました。
特にAFFIGER5は設定項目が非常に多いテーマですし、
メインテーマとして使っていない私の場合は、
実際、よく設定で迷子になってしまうのも事実です。
※だからいつでもすぐに見返せるようマニュアルも作ってるんですけどね…。
とは言え、何をするにしてもそうですが、
どれだけ複雑なテーマであっても、やはり継続して使っていれば
それなりにきちんと使いこなすことができますし
今回のトラブルに関しては、
解決方法さえ分かればこれといって何も難しいことではなく、
わずか数秒で解決できる内容だったのも事実です。
ですから、とにかく設定で悩んでも諦めず
そして、無事に解決できた内容は備忘録としてでも良いので
こうしてきちんとブログに書いて残しましょう！＾＾
そうすることで、自分が悩んだ時間も無駄ではなくなりますし、
アウトプットしておくことで、
次回こそは同じことで悩まなくて済むようになります。
さらには、そうした記事が同じ悩みを持つ方への助けにもなりますので
特に今の時代は、自分の行動が決して無駄になることはないのです。
なので、しっかりと行動しながら、次に生かせるよう
AFFIGER5の設定も大いに悩み解決して、
それを糧にブログ運営を頑張りましょう！
私も実際、今回の解決策を見つけるまで2時間ぐらい取られましたが、
決して「くそ〜っ！」とは思わず、「ブログに書くネタができた！」
ぐらいにしか思わず作業をしてましたので（笑）
意外と気軽に時間が過ごせました。
必ずいつかは解決策も見つかりますからね＾＾
今は、そうして些細なことでも考え方によっては
無駄になることは絶対にありませんので
ぜひあなたも楽しみながらAFFIGER5の設定をしてくださいね。
ということで、
最後までお読みいただきありがとうございました！
