最近あまり見かけない「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)」のカスタマイズ第一弾でした。
国内テーマも良いですが、海外テーマはもっと良いです。