【コピペOK】AFFINGER4のヘッダーに背景色をつける方法

おおかみくん

AFFINGER4のサイトタイトルの背景に色をつけたいんだけど、それってできる？

ひつじくん

もちろんできるよ！しかも割と簡単にできる！

今回は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の場合は元の作りがシンプルなので、ロゴを設定しなくても綺麗に仕上げることができる印象です。

テキストで仕上げれば読み込みが早いというメリットもありますので、よろしければ試してみてくださいね！