賢威　サイト全体の背景色の変更・背景画像の挿入の方法

賢威のテンプレートの背景は非常にシンプルで全面一色です。
これを少しカスタマイズするとサイト全体の雰囲気がぐっと良くなりますよね。
もちろんデザインセンスあってのことですが．．．

ここでは、賢威のサイト全体の背景の色を変えたり、背景に画像を入れる方法をご紹介します。
サイト全体の背景のカスタマイズは『design.css』で行います。

 

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

まず単純にサイト全体の背景色を変える方法です。

賢威コーポレート版の背景は、はじめこんな風に真っ白です。
プリティ版などの他のテンプレートも一色です。

 

 

背景色を変えるには、
WordPres管理画面＞外観＞テーマ編集をクリックします。

 

画面右のメニュー下の方の『design.css』をクリックします。

 

テーマ編集画面の一番上に、

/*--------------------------------------------------------
1、サイト全体の背景設定
------------------------------------------------------*/
と、あります。

 

ここでbackground-colorの右横のカラーコードを変更します。
カラーコードは下記のようなサイトを参考にしてください。

HTMLカラーコード

 

白（#fff）から薄い水色（#e2e9f5）に変えてみました。

 

ヘッダーやフッターの色は変わりません。

変更したい場合はそれぞれ下記の記事を参考にして下さい。

『賢威ヘッダー（ページ上部）の文字の色・サイズ・背景を変える』

『賢威フッター（ページ下部）の文字の色・サイズ・背景を変える』

ヘッダーもフッターもメニューも全て背景色を同じにする場合は
それぞれの背景色をなくします。その方法は最後に説明します。

 

コンテンツ部分（サイト中央）の背景色を変える

このままだと賢威の初めのデザインとそんなに変わりがないので
こんな風に画面の中央部分の色を変えてみましょう。

 

この場合は背景の色を変えるのではなく、中央に白い画像を入れます。

こんな画像を用意します。白い部分だけです。

 

賢威の横幅が950pxなので横1100px　縦50pxの白い長方形です。

横幅は1000px~1200px、縦は長くなりすぎない程度で適当でいいと思います。

「どうやってこんな画像を用意すればいいの？」という方には、
無料の画像編集ソフト『PhotoScape（フォトスケイプ）』がおススメです。

PhotoScapeで白い画像を作る方法はこちらを参考にしてください。

 

画像を準備できたら
メディアライブラリに画像を追加します。

WordPress管理画面＞メディア＞新規追加をクリックします。

画像をドラッグ&ドロップします。

 

「編集」をクリックし、

 

画面右側にあるファイルのURLを
どこかにコピーするなどして控えておきます。

 

次にWordPress管理画面＞外観＞テーマ編集をクリックし、

右側下の『design.css』をクリックします。

画像を挿入してサイトの中央を白くします。
※色はお好みでやってみてください。

テーマ編集画面の一番上
/*--------------------------------------------------------
1、サイト全体の背景設定
------------------------------------------------------*/
のコードを下記のように書き換えます（赤字部分を追加）。

＜変更前＞

/*-------------------------------------------------------- 1、サイト全体の背景設定 ------------------------------------------------------*/ #container{ background-color: #e2e9f5; }

 

＜変更後＞

/*-------------------------------------------------------- 1、サイト全体の背景設定 ------------------------------------------------------*/ #container{ background-color: #e2e9f5!important; background: url(画像のURL) center center repeat-y; background-attachment: fixed;}

 

背景が変わらない場合は『F5』キーを押してブラウザを更新してみてください。
それでも変わらない場合はこちらも試してみてください。
→『ブラウザの更新　スーパーリロード』

 

立体感を出すのにこんな画像でやってもいいです。両端に影を付けています。
これもPhotoScapeでフレームを付けるとできます。

 

こんな風に少し浮いたように見えます。

 

 

サイト全体の背景に画像を入れる

画面の両端も含めて画像にしたい場合はサイトの背景をまるごと画像にしてしまいます。

横1800px×縦100～4000pxぐらいの画像を作ります。

縦の数字にかなり幅がありますが
同じ画像を「縦に繰り返し（repeat-y）」ても模様がおかしくならない場合は
50～100pxぐらいでいいと思います。

画像を「縦に繰り返し（repeat-y）」を使わずに1枚の画像を背景にする場合は、
記事をどのぐらいの書くかによって、長さを調整してください。

こんな画像を用意しました。縦1800px　横1340pxです。

 

画像の中央を白くした方が見やすいので
はじめから画像の中央に白い部分を作っておきました。

画像を背景にする手順はさきほどと同じです。

メディアファイルに画像を追加し、画像のURLを控え
design.cssの「サイト全体の共通設定」のコードを書き換えます。

 

 

一枚の長い画像を使用する場合

1枚の長い画像を使用し、画像を繰り返さない場合は「repeat-y」を
「no-repeat」に書き換えます。

/*-------------------------------------------------------- 1、サイト全体の背景設定 ------------------------------------------------------*/ #container{ background-color: #e2e9f5!important; background: url(画像のURL) center center no-repeat; background-attachment: fixed;}

 

背景画像も一緒にスクロールさせる場合

画面をスクロールしても背景画像は動かないようにしていますが
背景画像も一緒に動いた方がいいという場合には、
上記コードのうち一番下の
『background-attachment: fixed;』の箇所を削除してください。

 

画面いっぱいを同じ背景にする場合

ご紹介した方法ではヘッダーやフッターなどは背景色が設定されているので変わりません。

画面いっぱいこの背景画像にする場合には、
ヘッダーやフッター、グローバルナビなど各箇所の背景色をなくす必要があります。

それぞれの『background-color: #〇〇〇;』という箇所をすべて
『background : none;』に変更してください。

 

＜トップ＞

 

＜ヘッダー＞

 
＜グローバルナビ＞

 

 

＜フッター＞ 

 

こんな感じになります。

 

 

メニューの下の黒いラインが要らない場合は、グローバルナビのborderの行を削除してください。

 

黒いラインが消えました。