どうも、ケイジです!
今回は賢威7のカスタマイズとしてサイト全体の背景色、メインコンテンツ部分、サイドバー部分の色をそれぞれ変更する方法を説明していきます。

背景色は原色カラーは避けた方がいい

賢威7で背景色を変更する方法メイン

背景色を変更する前に背景色のお話をすこししたいと思います。サイトはあたり前ですがコンテンツが何よりも重要です。背景色が例えば赤や青などの原色だとしたらどうでしょうか?実際かなり目が疲れますし見にくいのです。これは訪問してくれた人にこのサイトって見にくいなという印象を与えてしまうので、せっかく中身がいいものだとしても非常に勿体ない。

 

基本白がサイトの背景色としては多いのですが、灰色や薄い色であればサイトの個性もでて逆に印象に残せるという考え方もあるのであまり極端な色じゃなければサイトにあった色やあなたの好みの色にしましょう。

では早速賢威7を使った時の背景色を変更方法を説明していきます。

 

 

賢威7の背景色変更方法

ダッシュボード→外観→テーマ編集→base.css

賢威7の背景色変更方法1

ダッシュボード→外観→テーマ編集→base.cssを開き、一番下部までスクロールします。上記画像の赤枠の部分に下記記述のソースを挿入しましょう。

 

背景色変更のソース

body {
    background: #F5F5F5;
}
 
.main-conts .section-wrap {
    background: #fff;
}
.sub-conts .section-wrap .section-in {
    background: #fff;
}

こちらを全部コピーして上記の部分にまずは挿入してください。

 

#F5F5F5という部分、さらに下に#fffというのが2つあると思います。これらはカラーコードというもので、ヤフーやGoogleなどでカラーコードと検索するとたくさんでてきますので好きな色のコードを決めたらそれぞれ入力してください。このソースはサイト全体の色、メインコンテンツ部分、サイドバーの部分の色をそれぞれ指定するソースとなっています。

 

サイトの全体の色
body {
    background: #F5F5F5;
}
メインコンテンツ部分の色
.main-conts .section-wrap {
    background: #fff;
}
サイドバー部分の色
.sub-conts .section-wrap .section-in {
    background: #fff;
}

それぞれこのように上からサイト全体、メインコンテンツ部分、サイドバー部分の色の指定となっています。今回はメインコンテンツ部分とサイドバー部分は白色にして、サイト全体の背景色は灰色にするという形のソースとなっています。

 

 

背景色カスタマイズ前と後の変化

デフォルトの状態

賢威7背景色デフォルト

 

背景色カスタマイズ後

賢威7背景色カスタマイズ後

 

 

まとめ

背景色はコンテンツとサイドバー部分と同じ色にしてしまうよりも若干違う色にした方が、コンテンツがより際立つかと思ったのでこのように色を分けてカスタマイズしてみました。サイトの色に関してはけっこう迷いが出る部分だと思いますので本記事で説明している方法でじっくり色を調整してみてください。

 

賢威7カスタマイズ一覧まとめ記事へ