賢威8の背景色をカスタマイズ！

ブログの背景色は地味な存在だけど、雰囲気をガラリと変える要素が含まれています。

そこで、賢威8で作ったブログの背景色をカスタマイズする方法を解説します。

CSSコードをイジる必要がありますが、初心者にも分かりやすく紹介しますので参考にしてください。

[cc id=1691]

背景色3か所をカスタマイズ

背景色をカスタマイズするエリア

賢威8で作ったブログの背景色は3つのエリアに分かれて指定されています。

それぞれのエリアでCSSをカスタマイズする必要がありますが、背景色を指定するコードを追加CSSに記述するだけなので簡単です。

では、賢威8の背景色のカスタマイズ方法を1つずつ解説します。

本文があるコンテンツエリアと2カラム選択時のサイドバーエリアが合わさったメインエリアは、bodyタグによって背景色が設定されています。

そこで、メインエリアの背景色を変更するには、以下のコードを追加CSSにコピペしてください。

/*メインエリアの背景色*/
body{
	background-color: #f0f0f0;/*好みの色に変更*/
}

賢威8の初期設定の背景色は「#f0f0f0」の薄いグレー色なので、好みのカラーコードを見つけて指定すれば変更されます。

おすすめのカラーコードサイト

背景色のコードを追加CSSに貼り付けたら公開ボタンを押せば反映されます。

参考までに、背景色を決める時はなるべく薄めの色を選ぶと良いでしょう。あくまでも背景色でメインのカラーではありませんので。

次は、ロゴ画像やサイトタイトルを表示する最上部のヘッダーエリアの背景色をカスタマイズします。

賢威8のヘッダーエリアの背景色はクラス名「.keni-header_wrap」で指定されているので、追加CSSには次のように記述すれば変更可能です。

.keni-header_wrap{
	background-color: #fff;/*好みの色に変更*/
}

ヘッダー背景色の初期設定では白色「#fff」が指定されていますが、ちゃんブロ工房ではキーカラーとなる色「#00858a」にカスタマイズしています。

ただし、上記の背景色の変更だけではスマホ表示の際に上手くいきません。

賢威8のヘッダーのカスタマイズ方法は、次のページで詳しく解説しています。

[keni-linkcard url="https://cyan-blog.com/keni-header-logo-cus/"]

最後の背景色のカスタマイズは、最大3つのウィジェットとフッターメニューが表示可能なフッターエリアです。

賢威8のフッターエリアの背景色はクラス名「.keni-footer_wrap」で指定されているので、追加CSSには次のように記述すれば変更可能です。

.keni-footer_wrap{
	background-color: #fff;/*好みの色に変更*/
}

初期設定の背景色は白色「#fff」ですが、サイトのキーカラーや同系色の薄めの色をフッターエリアに指定するとまとまりが良いです。

賢威8のフッターのカスタマイズ方法は、下記の関連ページで詳しく解説しています。

[keni-linkcard url="https://cyan-blog.com/keni-footer-cus/"]

背景色を奇抜な色にしてしまうとブログの雰囲気が損なわれてしまう可能性があるので、色見本などを見ながらまとまりのある色を選択するのがおすすめです。

また、賢威8の背景色をカスタマイズするのは、CSSを知らない初心者でも簡単にできます。

賢威の使い方が分からない方には、ちゃんブロ工房では詳しく解説しているので参考にしてください。

[keni-linkcard url="https://cyan-blog.com/keni-review/"]