だーしゃのCSS講座 背景画像及び背景色を変更してみよう!

だーしゃ

2005年07月28日 00:07

だーしゃのCSS講座 

第6回 背景の画像及び背景色を変更してみよう!

今回はpyoさんからの要請で背景色及び背景画像の変更の仕方についてレクチャーしてみまっす!これもさほど難しい事はないですよっ。簡単なのでやってみてください~。

【 背景色の変更 】
まずどういう事なのかというと、こちらをご覧ください。


■ブルースカイテンプレート


こちら今背景が灰色になってますよね?
こちらの色を変更してみようという事です。
まずはオリジナルテンプレートのスタイルシートでbodyという記述を探してください。


body{
 color:#000;
 margin:0px;
 background:#efefef;
 text-align:center;

}



赤文字の部分に注目!
これが背景を指定している記述です。
まず色を変更するにはこのカラーコード(#~~~~~~)を変更すればOK!





例)背景色の灰色を青に変更してみたいと思います。




  body{
  color:#000;
  margin:0px;
  background:#efefef;
  text-align:center;
  }





↓↓↓
↓↓




  body{
  color:#000;
  margin:0px;
  background:#0033ff;
  text-align:center;
  }





というような感じで簡単に背景色を変える事ができます。
カラーコードについてはこちらを参照してください>>カラーコード
お好きな色のコードを貼り付ければOKですよっ!




【 背景画像を変更する 】 
今度は画像の入れ替えを行いましょう~。
まずはこちらをご覧ください。


まず通常のテンプレート(ぼくのわたしの夏休み)

body{
font-family: "verdana", "helvetica", "osaka", "MS Pゴシック", sans-serif;
color:#000;
margin:0px;
background: url(/_img/summersea/umib02.jpg) top left
fixed repeat-x;
background-color: #fff;
}

こちらをpyoさんのように背景画像を変更しようというたくらみです。


body{
font-family: "verdana", "helvetica", "osaka", "MS Pゴシック", sans-serif;
color:#000;
margin:0px;
background: url(/usr/pyoblog/bg-kcs2.gif) top left
fixed repeat;
background-color: #fff;
}


もうわかりましたね。

background: url(/usr/pyoblog/bg-kcs2.gif) top left

赤字部分のURLを変更すればいいのです。

もし、ご自分のスタイルシートボディに上記記述がない場合は、
上の記述をコピーして、backgroundと入れ替えてください。
そうする事で背景に画像を使う事ができます(^^)


注)利用する画像絶対に直にリンクしてはいけません
こちらの画像は管理画面>画像一覧にて



自分のブログに一度アップロードして、そこの画像URLを入れてください。
そうしないと相手側のサーバーに負荷がかかってしまいます。


こちらも用は画像の入れ替えを行うだけなので、
比較的簡単ですよっ。
さぁやってみよ~!!!

よくわからない場合はコメントにて質問してください。
よろしくおねがいします~。

CSS講座
2006-04-11 だーしゃのCSS講座 写真に自動で白縁をつけたい!
2005-12-29 だーしゃのCSS講座 引用文に色を付けてみよう!
2005-09-02 だーしゃのCSS講座 線のカスタマイズしよう!
2005-07-28 だーしゃのCSS講座 背景画像及び背景色を変更してみよう!
2005-07-21 だーしゃのCSS講座 ブログタイトルの位置を変更してみよう!
2005-07-18 だーしゃのCSS講座 ブログタイトルの色を変えてみよう!
2005-07-17 だーしゃのCSS講座 ブログの構造を理解してみよう!
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく!
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう!

関連記事