最近あまり見かけない「WING（AFFINGER5）」のヘッダーとフッターを画面幅（100%）にするカスタマイズをしたので、その時のメモです。
Affinger5/WingのカスタマイザーやAffinger5管理などにヘッダーやフッターをフル幅にする設定にあるのかもしれませんが、私には探しきれませんでした。
また、グローバルメニューに背景画像を設定している時にメニューが100%幅にならなかったというのもあり、CSSでサクッとカスタマイズしました。
今回のカスタマイズはコピペで簡単にできるものですが、CSSで直接設定しているため、カスタマイザー等から後から設定を変更できなくなります。適用する場合はその点、注意してください。
参考：【用途別】国産 WordPress 有料 テーマの本当のおススメは？
Affinger5/Wingのフッターを100%幅にするCSSカスタマイズ
追加CSS辺りにCSS変更後のコードを張り付けます。CSS変更前は上書きされるので特に何もする必要ありません。
フッターを100%幅カスタマイズCSS変更前
@media only screen and (min-width: 960px){
#footer {
margin: 0 -20px;
max-width: 1154px;
}}フッターを100%幅カスタマイズCSS変更後
@media only screen and (min-width: 960px){
#footer {
margin: 0;
max-width: 100%;
}}Affinger5/Wingのヘッダーを100%幅にするCSSカスタマイズ
追加CSS辺りにCSS変更後のコードを張り付けます。CSS変更前は上書きされるので特に何もする必要ありません。
ヘッダーを100%幅カスタマイズCSS変更箇所①
変更前
@media only screen and (min-width: 960px){
#wrapper-in {
padding: 0 20px;
}}
#wrapper-in {
background: #ffffff;
margin: 0 auto;
max-width: 1114px;
}変更後
#wrapper-in {
max-width: none;
}
@media only screen and (min-width: 960px){
#wrapper-in {
padding: 0;
}}ヘッダーを100%幅カスタマイズCSS変更箇所②
変更前
@media only screen and (min-width: 960px){
#headbox {
max-width: 1094px;
}}
@media only screen and (min-width: 960px){
#headbox, #content-w {
max-width: 1154px;
margin: 0 -20px !important;
} }変更後
@media only screen and (min-width: 960px){
#headbox, #content-w {
margin: 0 auto;
width: 100%;
}}
@media only screen and (min-width: 960px){
#headbox, #content-w {
max-width: 1154px;
margin: 0 auto !important;
}}まとめ
ヘッダーとフッターは100%幅になっているのが主流なので、なっていないと何か落ち着かない感じがしますよね。以上、「WING（AFFINGER5）」のカスタマイズ第一弾でした。
国内テーマも良いですが、海外テーマはもっと良いです。
