賢威6.1でヘッダーの背景画像やカラーを変更する「ヘルシー版の葉っぱの削除」

賢威6.1でヘッダーの背景画像やカラーを変更する方法をご紹介します。
特に賢威ヘルシー版を利用する際に、デフォルトの状態から「葉っぱ」の画像が
ついてきますので変更したいって方は多いと思います＾＾
簡単に変更できますので、ご紹介していきますね＾＾

 

ヘルシー版の葉っぱを削除する方法

ヘルシー版のヘッダーに表示されている葉っぱ画像ですが、これは「images」の中にある
bg-header.jpgが表示されていますので、それを調節することで可能です。

 

1.まずは外観⇒テーマ編集から「design.css」を開きます。

 

2.表示されたソースの中に

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
    font-size: 1.2em; }

の部分がありますので、

「url(./images/common/bg-header.jpg) center top repeat-x」の部分を削除します。

#header{
    background: #fff;
    font-size: 1.2em; }

これで葉っぱの画像を削除することができます。

 

ヘッダー背景画像やカラーを変更する方法

次に、応用編として、背景画像や背景色を変更する方法ですが、

#header{
    background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
    font-size: 1.2em; }

赤字の部分が背景画像で、青字の部分が背景色になります。

 

背景画像を変更する方法

背景画像を設置する方法ですが、背景画像はセンター寄せのリピート表示になりますので、
設置したい背景がある場合は、パターン画像か、1500px以上の大きな画像を用意します。

1.まずはメディアなどで、画像を取り込み、画像URLをコピーします。

 

2.画像URLをコピーしたら、テーマ編集のdesign.cssから「#header」を開き
下記のようにタグに設定します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
    font-size: 1.2em; }

↓

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    background: url(http://URL/wp-content/uploads/up.jpg) center top repeat-x #fff;
    font-size: 1.2em; }

 

3.このように背景画像が変更します。

ヘッダー文字をヘッダー画像の変更してしまう方法もありますが、
ヘッダー文字は残して、背景だけ変えたい場合に有効です。

 

 

背景カラーを変更する方法

次に、背景カラーの変更ですが、
ヘッダー画像と背景カラーを合わせるときなどに有効です。

1.設定は背景画像と同じですので、下記のようにソースを変更してください。

①url(./images/common/bg-header.jpg) center top repeat-xを削除して
②#fffの部分のカラー色を変更します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
    font-size: 1.2em; }

↓

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    background: #fff;
    font-size: 1.2em; }

 

このように画像カラーを変更することが可能です。

 

以上

賢威6.1 ヘッダーの背景画像やカラーを変更する「ヘルシー版の葉っぱの削除」でした