賢威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 ヘッダーの背景画像やカラーを変更する「ヘルシー版の葉っぱの削除」でした