今回はAFFINGER4のヘッダー部分(サイトタイトル部分)に背景色をつけたいと思います！
昔のStignerとかだとヘッダーを横幅いっぱいに拡張してから色をつけたりしないといけないこともあり大変でしたが、AFFINGER4ならヘッダー拡張など不要で、色を指定するだけでヘッダー部分に背景色をつけることができるのです。便利になりましたねぇ。
ではAFFINGER4のヘッダーに背景をつける方法をこれから紹介させていただきましょう！
ヘッダーに背景色をつける方法
AFFINGER4のヘッダー部分に背景色をつけたいなら、以下のコードをスタイルシートにコピペ追記するだけでオッケーです！
#headbox-bg{
background-color: #c50a0a;/*色はお好みに修正を*/
}
#headbox {
background-color: #c50a0a !important;/*色はお好みに修正を*/
}
追記する場所はスタイルシート内なら基本的にどこでもオッケーですが、最下部に追記しておくようにすれば今後わかりやすくて良いでしょう。
ここではカラーを#c50a0aに指定していますが、この色は自分の好みのものに修正するようにしてくださいね。カラーコードはこちらのサイトを参考にすればお好みのものが見つかるはずです。
サイトタイトルの色を変えておく
サイトタイトルの背景が変わったので、必要に応じてサイトタイトルの文字色を変更しましょう。これもコピペで貼り付けるだけで実装されますよ！
header .sitename {
color: #fff !important;
}
今回はサイトタイトルを白く変更するようにコーディングしています。この文字色もカラーコードを変えれば変更できますので、これも好みに合わせて変更してくださいね！
番外編：ヘッダーに影をつける方法
ついでにヘッダーに影をつけておくと、よりいっそう格好よく見える気がします。その方法もついでなので説明しておきましょう。
以下のコードをコピペするだけ！
ヘッダーに色をつけるなら基本的には以下のコードをコピペするだけでオッケーです！
#headbox-bg{
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);}
}
これでPC・スマホ共にヘッダー部分に影をつけるようにすることができました！影の範囲はpxをいじってもらえると変わりますので、気に入らない人は調整してみてくださいませ。
ヘッダーカスタマイズ/まとめ
これでAFFINGER4のヘッダー上部が完成しました。以前よりも格好よくなってきましたねぇ〜！
ヘッダー上部にはサイトロゴを設定したりもできますが、FFINGER4の場合は元の作りがシンプルなので、ロゴを設定しなくても綺麗に仕上げることができる印象です。
テキストで仕上げれば読み込みが早いというメリットもありますので、よろしければ試してみてくださいね！
