お問い合わせはコチラから

WING(AFFINGER5)のヘッダーとフッターをフル幅にする

サイト運営

最近あまり見かけない「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)」のカスタマイズ第一弾でした。

国内テーマも良いですが、海外テーマはもっと良いです。

 

 

 

 

タイトルとURLをコピーしました