カスタマイズ

【コピペで実装】AFFINGER4にヘッダー背景をつけてオシャレに!

投稿日:

AFFINGER4カスタマイズ

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

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

この記事をシェアしませんか?

おすすめ記事一覧

cropped-cropped-cropped-af3-3.png 1
超優秀!AFFINGER4の注目すべき機能8つ&購入者特典3つ

AFFINGER4の特徴と機能 当サイトはAFFINGER4の見本サイトです。AFFINGER4にはどのようなサイトを作ることができるのかを視覚的に分かりやすく示すために作られたサイトですね。 なお「 ...

ランキング 2
猿でも出来る!AFFINGER4の「商品ランキング」作成方法

AFFINGER4の独自機能といえば「誰でも簡単に商品ランキングが作れること」ですよね! AFFINGER4ならHTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。 ...

-カスタマイズ

Copyright© AFFINGER4の見本サイト , 2018 AllRights Reserved Powered by AFFINGER4.