金利の変動

賢威6.1プリティーカスタマイズ ヘッダーの全体の背景色の変更

このブログは、賢威6.1のプリティを使っています。

このブログでは、メイン画像とヘッダー画像を両方設定していますが、

 

ヘッダー画像は、ロゴ画像と背景画像を別々に設定できるんですよ。

 

 

 

賢威の5の時から、ヘッダーの背景画像とロゴ画像を別々に
私は設定していました。

 

なぜって、その方がいいかなーって思っただけなんですけれども・・・・

 

賢威6.1になって、ヘッダーの背景色は、テンプレートメーカーで
設定できるようになりました。

 

デフォルト(初期設定)は、ホワイト(白)ですね。

 

違う色でも設定が可能になりました。

 

ただ、ヘッダー画像を設定する場合は、CSSに追加していきます。

 

また、ヘッダーロゴやロゴを画像にした場合も、
テンプレートメーカーから、画像の準備ができていれば、
アップロードするだけで、設定できるようになっています。

便利ですよね・・・

 

ただ、画像の準備が間に合わなかったり、ブログタイトルを変更する場合は、
ちょいと、ファイルとCSSを変更しなければなりません。

 

一度覚えると、変更するときに便利ですから、覚えておくと便利です。

 

ヘッダーの背景画像は、大き目な画像を用意しましょう!!

 

一枚の画像であれば、1500px×高さ(250pxとか)くらいがいいと思います。

 

ヘッダー全体の背景ですので、1枚画像だったら上記のサイズくらいです。
小さい画像を全体に敷き詰める場合は、CSSで設定していきますので、
サイズはあまり気にしなくても大丈夫です。

 

 

 

ヘッダー背景カラー・画像の変更

 

まず、ヘッダーの背景画像もしくは、カラーを変更する方法です。

ダッシュボードの外観から、テーマの編集をクリックします。

 

design.css  を変更していきますね。

コメントアウトのこの部分

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

↑ の下から、ヘッダーの設定が始まります。

 

ここを編集します。

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

 

今、背景はカラー(白)で設定しているんですが、
ここを変更するだけです。

 

カラーは、ブログカラーに合ったものでどうぞ!!

 

画像の場合は、全体に1枚の画像を用意した場合です。

※今回は、例としてピンクのグラデーションの画像を設置しました。

 

#header{

のコードの下に、下記コードを編集して貼ってくださいね。

できあがりは、こんな感じです。

ヘッダーの背景を変更しました。

 

どうでしょう?

 

これだけでも、なんか違うイメージになりますね。

 

 

小さい画像を敷き詰める場合は、コードもちょっと変更ね。

 

こんな感じになりますよ。

ヘッダー背景画像が小さい場合

 

 

全然イメージが違うでしょう????

 

 

小さい画像の場合は、継ぎ目も見えてしまいますので、
背景の場合は、1枚の画像の方がきれいです。

 

これも、ブログのテーマに合わせることで、
ブログのイメージが変わります。

 

ヘッダーの部分の高さを大きくすると、メインの画像には、
ちょっと違う感じのものを用意するといいですね。
もしくは、なくてもいいと思います。

 

ブログのイメージのインパクトを与えるヘッダー画像。

 

後からでも変更できますので、
じっくり作成していきましょう!!

 
 
 

※カスタマイズや設定に困ったら、
メールで質問してくださいね。

 
 
 

コメントを残す

サブコンテンツ

このページの先頭へ