賢威7 サイト全体・各エリアの背景色をカスタマイズする

賢威7のサイト全体と各エリアの背景色の変更について解説します。スタンダード版は、1箇所の変更でサイト全体の背景色を変えることができますが、クール版等は、ヘッダーやサイドバー、サブコンテンツなど各エリアをそれぞれ変更する必要があります。

サイト全体の背景色を変更する

背景色を変更するのはすべてbase.cssです。

WordPress管理画面>外観>テーマ編集をクリックします。

WordPress テーマの編集

 

画面右側の下の方にあるbase.cssをクリックします。ここで各部分に対応するカラーコード(色の番号)を変更、または追加するだけです。

WordPress×賢威 base.css

 

スタンダード版

base.cssから次のように書かれた箇所を探します。
※ctrl+Fで検索窓が開きますので、そちらに「賢威テンプレート」など検索したい文字を入力すると探しやすいです。

/*------------------------------------------------------------
賢威テンプレートの共通設定
-------------------------------------------------------------*/

html{
overflow-y: scroll;
}

body{
font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

 

font-familyの下の段にbackground:(カラーコード) ; を追加し、画面下の「ファイルを更新」ボタンをクリックします。

ファイルを更新

<変更例>3行目を変更しています。

 

サイト全体が下図のような色に変更されました。サイトを表示しても色が変更されていない場合は、キーボードのF5を押すと更新されます。

サイト全体の背景色

 

なお、グローバルナビ、サイドバー、フッター、コピーライトなど各エリアの背景色の変更は下記の記事を参考にしてください。

 

クール版

クール版の場合は、下図のようにグレー等の背景色がついているので、スタンダード版のようにbackground:(カラーコード) ; を追加するのではなく、同箇所のカラーコードを変更します。

賢威7 クール版

 

<変更前>

<変更後>3行目を変更しました。

 

クール版の場合、ここのカラーコードを変更してもサイト全体の背景は変わらず、下図の赤で囲った箇所のみの変更になります。その他の箇所を変更するには以下の記事を参考にしてください。

賢威7 クール版 背景色

 

ビューティー版

ビューティー版の場合は、下図のようにエレガントな背景画像がついているので、画像を消してカラーコードを追加します。

賢威7 ビューティー版 背景色

 

<変更前>

<変更後>7行目、15~17行目をそれぞれ以下のように変更します。

 

サイト全体が下図のような色に変更されました。グローバルナビ(メニュー)、フッターメニューなどは下記を参考にしてください。

賢威7 サイト全体の背景色 変更

 

エレガントな画像は透けていますので、画像を残したまま背景色だけを変更することも可能です。その場合は、7行目、15~17行目をそれぞれ次のように変更してください。

 

サイトの各エリアの背景色を変更する

スタンダード版

賢威7「スタンダード版」は、上記のように「テンプレートの共通設定」でサイト全体の背景色の変更ができますが、ヘッダー、フッターなど、それぞれのエリアの背景色を変更することもできます。

「スタンダード版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。

解説にある例)は下図のカラーコードです。

賢威7 スタンダード版 背景色

 

①ヘッダー

5~7行までを追加します。 例)#bc8f8f

 

グローバルナビの上と下の色を分けたい場合は、上記に加え、メインビジュアルに7行目の記述を追加します。

 

グローバルナビの下(ヘッダーb)の背景色が変更されました。 例)#bdaaaa

keni7ha17

 

②グローバルナビ

グローバルナビは、2ヶ所(②-A・②-B)変更が必要です。マウスを乗せた時の色を変更する場合は更に②-Cの変更が必要です。

②-A 3行目のカラーコードを変更します。例)#8f8f8f→#d2b48c

②-B 5行目のカラーコードを変更します。例)#8f8f8f→#d2b48c

②-C マウスを乗せた時の色を変更 
   4行目のカラーコードを変更します。例)#eee→#e6d2b8

 

③メインコンテンツ

6行目のコードを追加します。

 

④サブコンテンツ

12行目のカラーコードを追加します。例)#d3d3d3

 

⑤フッター

5行目のカラーコードを変更します。例)#8f8f8f→変更なし

 

⑥コピーライト

5行目のカラーコードを変更します。例)#222→変更なし

 

 

クール版

賢威7「クール版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。

解説にある例)は下図のカラーコードです。

賢威7クール版 サイトの構成

 

①ヘッダー

5行目のカラーコードを変更します。例)#fff→#bc8f8f

 

②グローバルナビ

7行目のカラーコードを変更します。例)#fff→#d2b48c

 

③メインコンテンツ

6行目のコードを追加します。

 

④サブコンテンツ

12行目のカラーコードを変更します。例)#fafafa→#d3d3d3

 

⑤フッター

5行目のカラーコードを変更します。例)#444→変更なし

 

⑥コピーライト

5行目のカラーコードを変更します。例)#222→変更なし

 

メインビジュアルで変更

グローバルナビのすぐ下の「メインビジュアルで変更」と書かれた場所は、次のように設定されています。色を変えたい場合は<変更後A>のように8行目のカラーコードを変更します。サイト全体の背景色と同じで良ければ<変更後B>のように削除してください。

<変更前>

<変更後A>

9行目を変更します。ここはbackground(背景)ではなく、border-bottom(下の線)を変更することになります。
例)黒に変更 #f1f1f1→#222

メインビジュアル 背景色

 

<変更後B>

「メインビジュアルで変更」と書かれた箇所を削除しました。

賢威7 クール版 背景色

 

ビューティ版

賢威7「ビューティ版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。

解説にある例)は下図のカラーコードです。

なお、ビューティ版のヘッダーとサブコンテンツの背景色の変更はスタンダード版と同じですので、そちらを参考にしてください。

スタンダード版のヘッダーサブコンテンツ

賢威7ビューティー版 背景色 変更

 

②グローバルナビ、⑤フッター、⑥コピーライトには背景画像がついてますので、それを取り除いてカラーコードを変更します。

背景画像をつけたまま背景色を変更したい場合は、url(./images/common/bg-darkbrown.jpg)等の右にあるカラーコードのみ変更します。詳細は各項目で解説します。

 

②グローバルナビ

4箇所変更します。

<変更前>

<変更後>上記の9行目、17~19行目をそれぞれ以下のように変更します。
     例)#8f6f30→#d2b48c
     ※背景画像を残す場合は、9行目、17行目のカラーコードのみ変更します。

 

上記の記述からもう少し下に下がると以下のような記述があります。こちらも変更します。

<変更前>

<変更後>上記の8行目、17~19行目をそれぞれ以下のように変更します。
     例)#8f6f30→#d2b48c
     ※背景画像を残す場合は、8行目、17行目のカラーコードのみ変更します。

 

③メインコンテンツ

24行目のカラーコードを変更します。

 

⑤フッター

<変更前>

<変更後>上記の5行目、14~16行目をそれぞれ以下のように変更します。
     例)#d3bd92→#b3b3b3
     ※背景画像を残す場合は、5行目、14行目のカラーコードのみ変更します。

 

⑥コピーライト

<変更前>

<変更後>上記の5行目、15~17行目をそれぞれ以下のように変更します。
     例)#8f6f30→#695123
     ※背景画像を残す場合は、5行目、15行目のカラーコードのみ変更します。

 

こちらの記事も参考になります

2 Responses to “賢威7 サイト全体・各エリアの背景色をカスタマイズする”

  1. きりと より:

    はじめまして、きりとと申します。

    ランキングから来ました。

    背景色を変更する方法が詳しく
    図で解説されていたので結構わかりやすいですね。

    参考にさせていただきます。

    応援していきます。

    • yudnali より:

      きり様

      はじめまして
      コメント有難うございます。
      今後ともよろしくお願いいたします。

コメントを残す

サブコンテンツ

このページの先頭へ