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

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)」のカスタマイズ第一弾でした。

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

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました