AFFINGER6でトップページのヘッダーメニューやロゴをフルサイズで表示するカスタマイズ

AFFINGER6ではトップページを簡単にカスタマイズすることができます。

サイト型の設定記事は当サイトでも複数執筆していて、どの記事も人気です。

• AFFINGER6｜トップページをブログ型からサイト型にカスタマイズ
• AFFINGER6｜ヘッダーエリアに動画を流してトップページをオシャレにする！
• AFFINGER6｜動画を背景に設定してサイトに動きを加える

これらの設定はAFFINGER6の機能だけで実装することができます。

ここでは、本当に細かい事ですが「ヘッダーをフルサイズに調整するCSS」を紹介します。

どういう事？って方には見てもらえれば簡単に分かります。

これはWindowsの画面ですが、モニターサイズによっては「カスタマイズ前は記事幅がデフォルト」になっています。

AppleのMacでカスタマイズしている方や小さめのモニターでしか確認していない方は、他の人から見たらこのように表示されているということを覚えておきましょう。

カスタマイズ自体は簡単にコピペで実装できるようにしています。

AFFINGER6ヘッダーをフルサイズ表示

細かいことですが、カスタマイズにこだわっている方は気になりますよね。

もちろん当サイトでも実装しています。

また、このカスタマイズはトップページのみに実装しており、記事ページでは記事幅のままにしています。

もちろんフルサイズ設定にもできますが、記事が表示されている状態だと違和感があります。

さらにレスポンシブにもしっかりと対応しており、以下のように画面幅を狭めてもフルサイズで表示されます。

細かいですが気になる場所だったので、このように記事にしました。

以下で設定方法を解説します。

設定方法

設定方法はスタイルシートへコードを書き込むだけで実装できます。

/*PCでロゴとナビゲーション全画面*/
@media only screen and (min-width: 960px) {
.home #headbox {max-width: 100%;
	}
}
@media only screen and (min-width: 960px) {
.home nav {max-width: 100%;
	}
}

スタイルシートへの書き込み方がよくわからない方は以下の記事を参考にしてみてください。

それぞれのコードについて解説しておきます。

きちんと意味を理解しておけば、他にも応用できると思います。

PC表示のみロゴをフルサイズ表示

@media only screen and (min-width: 960px) {
.home #headbox {max-width: 100%;
	}
}

@media only screen and (min-width: 960px)はPC表示のみという命令のコードです。

これを記載しない場合すべてのページでコードが有効化されます。

.home #headbox {max-width: 100%;
}

こちらの部分がフルサイズ表示のコードです。

ヘッダーに対して100％幅で表示するように命令しています。

PC表示のみメニューをフルサイズ表示

こちらのも同じように@media only screen and (min-width: 960px)でPC表示のみという命令のコードで制限しています。

.home nav {max-width: 100%;
}

navはナビゲーションの事で、ヘッダーメニューの事です。

カスタマイズは自己責任で！

カスタマイズはこだわると悩みがつきません。

PHPなどをバックアップを取らずに変更してしまうと、取り返しのつかないこともあるので注意しましょう。