きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第2回 背景の画像と背景色を変更する♪

<<   作成日時 : 2008/02/03 11:46   >>

ブログ気持玉 0 / トラックバック 1 / コメント 4

前回は、トップと記事ページのタイトル画像を替えました(ん)
今回はトップと記事ページの背景の画像や色を変えて
ブログ全体のイメージを変えてみたいと思います♪

画像


赤い枠の部分には好きな画像を表示させることが出来ます。
この場所は小さな画像でも繰り返し並べ表示させることで
枠の中全体に画像がいきわたるようになっています。
用意する画像は赤い枠いっぱいのものでなくてもいいわけです。

今回、うちが用意したのはこのような画像です。
ρ(・ω・`*)コレネ

サイズは小さいほうがいいと思い、PNGイメージで保存しました。





 背景画像を変更する♪ 

それでは、設定にしてみましょう(ん)
背景は各ページ共通ですので設定箇所は一箇所でOKです。
今回は一番上のほうにあるから見つけやすいと思います。

 A 『 共通スタイル 』   CSS 全体Map 

>/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
}

/* カウンタ領域 */





body{ 』のあとに、次の文字列を追加します。

background-image:url(画像のURL);

画像のURL 』は用意した画像のURLに置き換えてます。
URLを入力する際には改行を入れずに1行で入力してください。

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-image:url(画像のURL);
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
}

/* カウンタ領域 */




入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
すると背景にさっきの画像がキレイに並びました♪

画像


これで背景画像が変更できたわけですが、
このままではコンテナ領域(カレンダーなどが表示される部分など)と
変更した画像とのバランスがあまり良くないですね。
そこで、この部分の背景色を画像に合ったものに変えます。

※ページの読み込みが遅い場合、タイトルや背景の画像の表示より前に
画像の後ろの背景色が表示されたりするらしいです。
画像やブログ全体のイメージに合った背景色を設定しておけば、
そのような場合でも違和感無く見れるので一緒に背景色の変更をします。






 背景画像のバックとコンテナ領域の背景色を変更する♪ 

背景画像とコンテナ部分の背景色の設定場所はさっきと同じです。
背景画像の入力を済ましたので、今はこのようになっていますね。

 A 『 共通スタイル 』   CSS 全体Map 

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-image:url(画像のURL);
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
}

/* カウンタ領域 */





では、各箇所に次の文字列を追加します。
background-image:url(画像のURL); 』の後に…

background-color:■; ← 背景画像のバックの背景色


#container{ 』の後には…

background-color:■; ← コンテナ領域の背景色

上のように各箇所の背景色設定の場所はわかれています。
』 『 』 にはカラーコードが入ります。
カラーコードについてはウェブで調べると出てきます。
またこちらでもカラーコードの紹介がされています。

うちのブログでは、『 background-color:#FFEEEE; 』 と書き込みました。
『 #FFEEEE 』が薄いピンクを表しています。

色を決め、カラーコードを書き込んでください。

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-image:url(画像のURL);
background-color:■;
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
background-color:■;
}

/* カウンタ領域 */




入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)

画像


どうかな?
これでかなりブログのイメージが変わったと思います♪





 トップページのタイトル画像のバックに背景色を設定する♪ 

トップページのタイトル画像後ろの背景色を指定しておきます。
前回タイトル画像を変更した時に書き込みをした場所です。

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
background-image:url(画像のURL);
height:▲px;

/* 包含要素を相対位置指定できるようにします */
}





前回のCSS編集でこのようになっていますね。
前回入力した文字列『 height:▲px; 』 の後に次の文字列を追加します。

background-color:■;

』 にはカラーコードを入力します。

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
background-image:url(画像のURL);
height:▲px;

background-color:■;
/* 包含要素を相対位置指定できるようにします */
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)





 記事ページのタイトル画像のバックに背景色を設定する♪ 


記事ページのタイトル画像後ろの背景色です。

 C 『 記事ページ 』   CSS 全体Map 

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
background-image:url(画像のURL);
height:▲px;

/* 包含要素を相対位置指定できるようにします */
}





前回入力した文字列『 height:▲px; 』 の後に次の文字列を追加します。

background-color:■;

』 にはカラーコードを入力します。

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
background-image:url(画像のURL);
height:▲px;

background-color:■;
/* 包含要素を相対位置指定できるようにします */
}




入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)

画像

タイトル画像、背景画像の表示をしないとこうなってます。

今回は少し設定箇所を多く書いてしまいましたが、
同じような内容を繰り返すので迷うことも少ないと思います。


さて、ここまでの設定では、まだ気になる点が残っていますが、それは次回に。

それでは、今回はこのくらいで(わら)
次はブログ全体のイメージを変えてみたいと思います♪


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
ブログの背景画像を変更☆
この間は、トップページと記事ページのタイトル部分の背景画像を変更したけど、今回はブログの背景画像(サイド部分)を変更してみました{%クローバーwebry%} ...続きを見る
Mixture 
2009/01/28 09:27

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
こんにちは(@ぺこ)
お久しぶりです。

ブログの背景の画像をスクロールしないように
出来ないのでしょうか??

画像が動かず定位置の背景に、したいのですが(@あらやだ)
どうぞ
お力添えのほどヨロシクお願い致します
たむたむ
2011/02/06 15:30
たむたむさん、いらっしゃいませ(にこ)

背景画像の固定には以下の文字列を使用します。

background-attachment: fixed;

固定したいエリアのところに文字列を追加して下さい。
蛇足かもですが、画像の繰り返しをしない場合は以下の文字列もセットで使ったりします。

background-repeat: no-repeat;

疑問な点がありましたらまたコメント下さいね(にこ)
mairis
2011/02/07 09:33
こんばんは(@ぺこ)

ありがとうございました(たいよう)
今度、頑張って背景画像を書いて
やってみます(@ん)
たむたむ
2011/02/07 23:50
>> たむたむさん
ご自分で背景画像描くんですね(びっくり)「
がんばってください(にこ)ノ
mairis
2011/02/08 17:49

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第2回 背景の画像と背景色を変更する♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる