CSS（スタイル編）第２回背景の画像と背景色を変更する♪ きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第２回背景の画像と背景色を変更する♪

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

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

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

今回、うちが用意したのはこのような画像です。
ρ(･ω･`*)ｺﾚﾈ
幅 100px × 縦 100px 、サイズは 936バイト

サイズは小さいほうがいいと思い、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

では、各箇所に次の文字列を追加します。
『 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♪

|彡ｻｯ