賢威7 サイト全体・各エリアの背景色をカスタマイズする
賢威7のサイト全体と各エリアの背景色の変更について解説します。スタンダード版は、1箇所の変更でサイト全体の背景色を変えることができますが、クール版等は、ヘッダーやサイドバー、サブコンテンツなど各エリアをそれぞれ変更する必要があります。
サイト全体の背景色を変更する
背景色を変更するのはすべてbase.cssです。
WordPress管理画面>外観>テーマ編集をクリックします。
画面右側の下の方にあるbase.cssをクリックします。ここで各部分に対応するカラーコード(色の番号)を変更、または追加するだけです。
スタンダード版
base.cssから次のように書かれた箇所を探します。
※ctrl+Fで検索窓が開きますので、そちらに「賢威テンプレート」など検索したい文字を入力すると探しやすいです。
/*------------------------------------------------------------ html{ body{ |
font-familyの下の段にbackground:(カラーコード) ; を追加し、画面下の「ファイルを更新」ボタンをクリックします。
<変更例>3行目を変更しています。
1 2 3 4 |
body{ font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; background: #e4dccc ; } |
サイト全体が下図のような色に変更されました。サイトを表示しても色が変更されていない場合は、キーボードのF5を押すと更新されます。
なお、グローバルナビ、サイドバー、フッター、コピーライトなど各エリアの背景色の変更は下記の記事を参考にしてください。
クール版
クール版の場合は、下図のようにグレー等の背景色がついているので、スタンダード版のようにbackground:(カラーコード) ; を追加するのではなく、同箇所のカラーコードを変更します。
<変更前>
1 2 3 4 |
body{ font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; background:#f1f1f1; } |
<変更後>3行目を変更しました。
1 2 3 4 |
body{ font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; background:#e4dccc; } |
クール版の場合、ここのカラーコードを変更してもサイト全体の背景は変わらず、下図の赤で囲った箇所のみの変更になります。その他の箇所を変更するには以下の記事を参考にしてください。
ビューティー版
ビューティー版の場合は、下図のようにエレガントな背景画像がついているので、画像を消してカラーコードを追加します。
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*-------------------------------------------------------- テンプレートレイアウト --------------------------------------------------------*/ .container{ position: relative; background:url(./images/common/bg_site-header.png) 0 0 repeat-x ; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .container{ background: url(./images/common/bg_site-header@2x.png) 0 0 repeat-x ; -webkit-background-size: 1160px 700px; background-size: 1160px 700px; } } |
<変更後>7行目、15~17行目をそれぞれ以下のように変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*-------------------------------------------------------- テンプレートレイアウト --------------------------------------------------------*/ .container{ position: relative; background: #e4dccc ; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .container{ background: #e4dccc ; } } |
サイト全体が下図のような色に変更されました。グローバルナビ(メニュー)、フッターメニューなどは下記を参考にしてください。
エレガントな画像は透けていますので、画像を残したまま背景色だけを変更することも可能です。その場合は、7行目、15~17行目をそれぞれ次のように変更してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*-------------------------------------------------------- テンプレートレイアウト --------------------------------------------------------*/ .container{ position: relative; background: url(./images/common/bg_site-header.png) 0 0 repeat-x #fff; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .container{ background: url(./images/common/bg_site-header.png) 0 0 repeat-x #fff; } } |
サイトの各エリアの背景色を変更する
スタンダード版
賢威7「スタンダード版」は、上記のように「テンプレートの共通設定」でサイト全体の背景色の変更ができますが、ヘッダー、フッターなど、それぞれのエリアの背景色を変更することもできます。
「スタンダード版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。
解説にある例)は下図のカラーコードです。
①ヘッダー
5~7行までを追加します。 例)#bc8f8f
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*-------------------------------------------------------- ヘッダー --------------------------------------------------------*/ .site-header { background-color: #bc8f8f; } .site-header-conts{ display: table; width: 100%; padding: 30px 0; } |
グローバルナビの上と下の色を分けたい場合は、上記に加え、メインビジュアルに7行目の記述を追加します。
1 2 3 4 5 6 7 8 |
/*-------------------------------------------------------- メインビジュアル --------------------------------------------------------*/ .main-image{ margin-bottom: 2em; background: #bdaaaa;/*←追加するとグローバルナビの下の色を変更*/ } |
グローバルナビの下(ヘッダーb)の背景色が変更されました。 例)#bdaaaa
②グローバルナビ
グローバルナビは、2ヶ所(②-A・②-B)変更が必要です。マウスを乗せた時の色を変更する場合は更に②-Cの変更が必要です。
②-A 3行目のカラーコードを変更します。例)#8f8f8f→#d2b48c
1 2 3 4 |
.global-nav{ padding: 0; background: #8f8f8f; } |
②-B 5行目のカラーコードを変更します。例)#8f8f8f→#d2b48c
1 2 3 4 5 6 7 8 |
.global-nav-in li a{ display: block; min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/ padding: 1em; /*画像をメニューにする場合は値を0に*/ background-color: #8f8f8f; color: #fff; text-decoration: none; } |
②-C マウスを乗せた時の色を変更
4行目のカラーコードを変更します。例)#eee→#e6d2b8
1 2 3 4 5 6 |
.global-nav-in li a:hover, .global-nav-in li a:active, .global-nav-in li a:focus{ background-color: #eee; color: #333; } |
③メインコンテンツ
6行目のコードを追加します。
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- メインコンテンツ --------------------------------------------------------*/ .main-conts{ line-height: 1.8; background: #f5f5f5; } |
④サブコンテンツ
12行目のカラーコードを追加します。例)#d3d3d3
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*-------------------------------------------------------- サブコンテンツ --------------------------------------------------------*/ .sub-conts .section-wrap{ margin: 0 auto; padding: 0; border: none; } .sub-conts .section-wrap .section-in{ padding: 0 20px 30px; background: #d3d3d3; } |
⑤フッター
5行目のカラーコードを変更します。例)#8f8f8f→変更なし
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ .site-footer{ background: #8f8f8f; color: #fff; } |
⑥コピーライト
5行目のカラーコードを変更します。例)#222→変更なし
1 2 3 4 5 6 7 8 |
/*コピーライト*/ .copyright{ margin: 0; padding: 15px 0; background: #333; color: #fff; text-align: center; } |
クール版
賢威7「クール版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。
解説にある例)は下図のカラーコードです。
①ヘッダー
5行目のカラーコードを変更します。例)#fff→#bc8f8f
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- ヘッダー --------------------------------------------------------*/ .site-header{ background:#fff; margin-bottom:-3px; } |
②グローバルナビ
7行目のカラーコードを変更します。例)#fff→#d2b48c
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ .global-nav{ padding: 0; background:#fff; border-bottom:#222 solid 3px; margin-bottom:-3px; z-index: 200; position: relative; } |
③メインコンテンツ
6行目のコードを追加します。
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- メインコンテンツ --------------------------------------------------------*/ .main-conts{ line-height: 1.8; background: #f5f5f5; } |
④サブコンテンツ
12行目のカラーコードを変更します。例)#fafafa→#d3d3d3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*-------------------------------------------------------- サブコンテンツ --------------------------------------------------------*/ .sub-conts .section-wrap{ margin: 0 auto 20px; padding: 0; border: none; } .sub-conts .section-wrap .section-in{ padding:0 20px 20px; background: #fafafa; border: 1px solid #fafafa; } |
⑤フッター
5行目のカラーコードを変更します。例)#444→変更なし
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ .site-footer{ background: #444; color: #fff; } |
⑥コピーライト
5行目のカラーコードを変更します。例)#222→変更なし
1 2 3 4 5 6 7 8 |
/*コピーライト*/ .copyright{ margin: 0; padding: 15px 0; background: #222; color: #eee; text-align: center; } |
メインビジュアルで変更
グローバルナビのすぐ下の「メインビジュアルで変更」と書かれた場所は、次のように設定されています。色を変えたい場合は<変更後A>のように8行目のカラーコードを変更します。サイト全体の背景色と同じで良ければ<変更後B>のように削除してください。
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*-------------------------------------------------------- メインビジュアル --------------------------------------------------------*/ .main-image{ z-index: 100; position: relative; border-bottom:#f1f1f1 solid 2em; border-top:#222 solid 3px; margin-bottom:-3px; margin-top:-3px; background:#f1f1f1; } |
<変更後A>
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*-------------------------------------------------------- メインビジュアル --------------------------------------------------------*/ .main-image{ z-index: 100; position: relative; border-bottom:#222 solid 2em; border-top:#222 solid 3px; margin-bottom:-3px; margin-top:-3px; background:#f1f1f1; } |
9行目を変更します。ここはbackground(背景)ではなく、border-bottom(下の線)を変更することになります。
例)黒に変更 #f1f1f1→#222
<変更後B>
1 2 3 4 5 6 7 |
/*-------------------------------------------------------- メインビジュアル --------------------------------------------------------*/ .main-image{ margin:0; } |
「メインビジュアルで変更」と書かれた箇所を削除しました。
ビューティ版
賢威7「ビューティ版」のサイト全体の構成は下図のようになっています。上記と同じ要領で背景色を変更したい箇所のカラーコードを変更、または追加してください。
解説にある例)は下図のカラーコードです。
なお、ビューティ版のヘッダーとサブコンテンツの背景色の変更はスタンダード版と同じですので、そちらを参考にしてください。
②グローバルナビ、⑤フッター、⑥コピーライトには背景画像がついてますので、それを取り除いてカラーコードを変更します。
背景画像をつけたまま背景色を変更したい場合は、url(./images/common/bg-darkbrown.jpg)等の右にあるカラーコードのみ変更します。詳細は各項目で解説します。
②グローバルナビ
4箇所変更します。
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ .global-nav{ padding: 0; border-top: 1px solid #b48f43; border-bottom: 1px solid #8f6f30; background: url(./images/common/bg-darkbrown.jpg) #8f6f30 ; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .global-nav{ background: url(./images/common/bg-darkbrown@2x.jpg) #8f6f30 ; -webkit-background-size: 180px 140px; background-size: 180px 140px; } } |
<変更後>上記の9行目、17~19行目をそれぞれ以下のように変更します。
例)#8f6f30→#d2b48c
※背景画像を残す場合は、9行目、17行目のカラーコードのみ変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ .global-nav{ padding: 0; border-top: 1px solid #b48f43; border-bottom: 1px solid #8f6f30; background: #8f6f30 ; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .global-nav{ background: #8f6f30 ; } } |
上記の記述からもう少し下に下がると以下のような記述があります。こちらも変更します。
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.global-nav-in li{ display: table-cell; list-style: none; position: relative; vertical-align: middle; margin: 0; border-right: 1px solid #ad8f47; background: url(./images/common/bg-darkbrown.jpg) #8f6f30 ; text-align: center; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .global-nav-in li{ background: url(./images/common/bg-darkbrown@2x.jpg) #8f6f30 ; -webkit-background-size: 180px 140px; background-size: 180px 140px; } } |
<変更後>上記の8行目、17~19行目をそれぞれ以下のように変更します。
例)#8f6f30→#d2b48c
※背景画像を残す場合は、8行目、17行目のカラーコードのみ変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.global-nav-in li{ display: table-cell; list-style: none; position: relative; vertical-align: middle; margin: 0; border-right: 1px solid #ad8f47; background: #8f6f30 ; text-align: center; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .global-nav-in li{ background: #8f6f30 ; } } |
③メインコンテンツ
24行目のカラーコードを変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*-------------------------------------------------------- メインコンテンツ --------------------------------------------------------*/ .main-conts{ line-height: 1.8; } .col1 .main-conts{ margin-bottom: 40px; } /*コンテンツの基本単位(「section-wrap」+「section-in」でコンテンツを覆う)*/ .section-wrap{ -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 30px; padding: 40px; border: 1px solid #ccc; } .main-conts .section-wrap{ border: none; box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1); background:#fff; } |
⑤フッター
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ .site-footer{ background: url(./images/common/bg_site-header.png) #d3bd92; color: #795a2e; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .site-footer{ background: url(./images/common/bg_site-header@2x.png) #d3bd92; -webkit-background-size: 1175px 710px; background-size: 1175px 710px; } } |
<変更後>上記の5行目、14~16行目をそれぞれ以下のように変更します。
例)#d3bd92→#b3b3b3
※背景画像を残す場合は、5行目、14行目のカラーコードのみ変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*-------------------------------------------------------- フッター --------------------------------------------------------*/ .site-footer{ background: #d3bd92; color: #795a2e; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .site-footer{ background: #d3bd92; } } |
⑥コピーライト
<変更前>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*コピーライト*/ .copyright{ margin: 0; padding: 15px 0; background: url(./images/common/bg-darkbrown.jpg) #8f6f30 ; color: #fff; text-align: center; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .copyright{ background: url(./images/common/bg-darkbrown@2x.jpg) #8f6f30 ; -webkit-background-size: 180px 140px; background-size: 180px 140px; } } |
<変更後>上記の5行目、15~17行目をそれぞれ以下のように変更します。
例)#8f6f30→#695123
※背景画像を残す場合は、5行目、15行目のカラーコードのみ変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*コピーライト*/ .copyright{ margin: 0; padding: 15px 0; background: #8f6f30 ; color: #fff; text-align: center; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .copyright{ background: #8f6f30 ; } } |
はじめまして、きりとと申します。
ランキングから来ました。
背景色を変更する方法が詳しく
図で解説されていたので結構わかりやすいですね。
参考にさせていただきます。
応援していきます。
きり様
はじめまして
コメント有難うございます。
今後ともよろしくお願いいたします。
初めまして。
WordPressで賢威のスタンダートを使用してブログを書いてます。
上記に通りに、色を変えるのを色々、指導通りに試して見たのですが、ファイルの編集に成功しました。となるのですが、一向に色が変わりません。どうしたら良いでしょうか。宜しくお願いします。
yamaさん
はじめまして。
お返事が大変遅くなり申し訳ありません。
WordPressの更新がうまくいかない場合はおそらくキャッシュが影響
しているものと思われます。
Google chromeの場合は「F5キー」を押すと強制的に更新されます。
その他の場合はこちのサイトを参考にしてみてください。
http://www.netyasun.com/browser/reload.html