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