2017年9月28日更新

サイト全体の背景色を変更する方法:賢威7

Thumbnail

今回の記事では、WordPressテーマ:賢威7サイトの背景色を変更する方法を紹介したいと思います。
ほんの少しのCSSコードを追加するだけでサイト全体の色を変更できる上に、サイトの印象をがらっと変えることができます。

○○の色を変えてみたけど、なんか物足りない、もう少しメリハリが欲しい、イメチェンしたい、などの場合にぜひお試し下さい!

カスタマイズ前

↓ 賢威コーポレート版をインストールしたばかりの状態

background-before

カスタマイズ後

↓ 背景をベージュ色に変更(一緒にコンテンツ部分とサイドバーの色も変更)

background-after

↓ 個別記事についてもトップページと同じように背景色を変更

background-after-2

1. CSSファイルを編集

今回は背景全体の色を変更したいので、CSSファイルを編集していきます。
親テーマ(賢威7本体)の base.css ファイルや、お使いの子テーマの CSS ファイルに以下のコードを追加します。

CSS
コピーする
body {
background: #FFF9ED;
}

これで背景全体がベージュ色になりました。
(色が付いている場所は、元から賢威7のCSSファイルで色付けされている箇所です)

↓ トップページ

background-mid

背景の色は変わりましたが、最新情報部分も一緒にベージュ色になってしまい、背景と同化していますよね。

個別記事の本文についても色が同化してかなり見づらい状態なので、コンテンツを包む .section-wrap の色を白にします。
(一緒にサイドバーの背景もグレーから白にします)

以下のコードをCSSファイルに追加すると、、、

CSS
コピーする
.main-conts .section-wrap {
background: #fff;
}
.sub-conts .section-wrap .section-in {
background: #fff;
}

最新情報リストとサイドバーの背景が白になりました。
最新情報リストや個別記事など他のページについても背景が白になっています。

background-after

↓ 個別記事のページ(背景がベージュになり、コンテンツ部分とサイドバーの背景が白に)

background-after-2

2. ベージュ以外の背景色にするには

ここでは背景色をベージュにしてみましたが、もちろんそれ以外の色に変更することもできます。
例えばうちのサイトのように薄いグレーにするには、先ほどのコードは

body {
background: #F4F4F4;
}

となります。

↓ うちのサイトは#F4F4F4の色を使用

webcraftlog-background-color

background: の後が色コード(#から続く6桁の英数字)なので、この部分を変更すればお好みの色に変更することができます。

ちなみに色コードは以下のサイトで詳しく紹介されているので、良かったら参考にして下さい。
相性の良い色の組み合わせを提案してくれているので、配色を考えるときにはとても便利です。

参考:
http://www.color-hex.com/color-palettes/

color-hex

Copyrights © WebCraftLogAll Rights Reserved.