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

だーしゃのCSS講座 

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

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


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


■ブルースカイテンプレート
だーしゃのCSS講座 背景画像及び背景色を変更してみよう!

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


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

}



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





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


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

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





↓↓↓
↓↓


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

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





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





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


まず通常のテンプレート(ぼくのわたしの夏休み)
だーしゃのCSS講座 背景画像及び背景色を変更してみよう!
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さんのように背景画像を変更しようというたくらみです。

だーしゃのCSS講座 背景画像及び背景色を変更してみよう!
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と入れ替えてください。
そうする事で背景に画像を使う事ができます(^^)


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

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

自分のブログに一度アップロードして、そこの画像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講座 ヘッダーの画像を変えてみよう!



同じカテゴリー(CSSについて)の記事

この記事へのコメント
ありがとうございます~。
質問くださった方をこちらに案内できます。

自分とこのHPサーバーにUPしてる画像ひっぱってますが
ばれちゃいましたね。(苦笑)
やっぱりてぃ~だにUPしなおしたほうがいいでしょうか?(^^ゞ
Posted by pyo at 2005年07月28日 10:42
■pyoさんへ
こんにちはっ、お役に立ててうれしいですよっ
そしれいろいろリクエストしてくれれば、できる限り紹介していきたいですねっ

そして画像の件についてなのですが、なぜてぃーだにアップするのを推奨するかというと、遠くから持ってくるより表示等が若干早くなるらですよっ。

でももちろん自分の管理しているHPからのリンクであればまだいいんですけどね、素材屋さんから直接リンクはもちろんだめです。

そんな感じでまた色々とアドバイスなどよろしくです~
Posted by だーしゃ at 2005年07月28日 15:29
だーしゃ先生、おはようございます。
思い立って、壁紙を変更しようと、やってみましたが、URLをはりつけても
実際に見ると真っ白になってます、、、。どうしたらよいでしょうか。
もともとが、背景画像じゃなくって、背景色のテンプレートの場合、
画像にはできないのですか??

↓挑戦してみた「body」のところ記述です。

body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/壁紙用 awa2.gif) top left
text-align:center;
}
Posted by sun at 2005年08月27日 15:25
■sunさんへ
こんにちは、壁紙ですね。
これは、壁紙の画像ファイルに日本語が使われていることが問題です。
画像ファイルをアルファベット表記に設定しなおしてください。
そうしたらいけますよ(^^)!
ぜひお試しあれ!
Posted by だーしゃ at 2005年08月27日 16:50
こんばんは。さっそくの回答ありがとうございました!!
画像ファイルの名前をアルファベットに変えて、再度アップロードしてみました。
が、やっぱり背景が真っ白になってしまいます。ファイルになにか問題が!?

↓またまた「body」の記述です。

body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/kabe kabe10.gif) top left
Posted by sun at 2005年08月27日 23:06
■sunさんへ
なるほど!もう一つ理由がありました~。
アルファベット表記はOKです!
問題は、スペースが入ってますよね、それがファイル名だとだめなんですよ~
なので例えば「 kabe-kabe10.gif 」とか表記を変えてみてくださいね(^^)
言葉足らずでごめんなさいm(_ _)m

試してみてくださいね~、できない場合はまた言ってくださいね~。(^^ )
Posted by だーしゃ at 2005年08月27日 23:13
だーしゃさ~~ん!助けてくださいーー!
ファイル名のスペースを「-」にかえて再度アップロードして
挑戦したのですが、また真っ白に、、、、(><)

一番上のスタイルシートのところを変更するだけで大丈夫なんですよね?
たぶん、ほかのところはいっさいさわってないはずなのですが。


body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/kabe-fruitnashi1.gif) top left
text-align:center;
}
Posted by sun at 2005年08月28日 12:46
■sunさんへ

今SUNさんの所に書いてきましたけど、「;」が抜けてるの気がつきませんでした~。
スタイルシートは 「~~~:~~~;」コロンとセミコロンで区切りを入れる必要があるんです。
今回はBACKGRONDの所抜けてるのが気がつきませんでした~。
今度こそ大丈夫なはず!また何かあれば言ってくださいね~
Posted by だーしゃ at 2005年08月28日 14:28
ありがとうございました!!!
教えてもらったのをコピペしたら、壁紙がちゃんとかわりました!
とっても嬉しいです!ありがとうございます♪
Posted by sun at 2005年08月28日 14:55
■sunさんへ
よかったよかった(^^)
また何かあれば試してみてくださいね~
自分でデザインできると楽しいですからねっ!
また何でも聞いてくださいね~
Posted by だーしゃ at 2005年08月28日 16:44
すみません、また質問させてください。

ブログの枠の線の色、あと、サイドバーや日付のタイトルバーの背景、
を変えるには、どこをいじればよいでしょうか?

お暇な時でかまいませんので、よろしくお願いします!!

Posted by sun at 2005年09月01日 02:24
□sunさんへ
コメントありがとうございます(^^)!
いいですね!これ講座のネタになります!!

最近どのような講座を開こうかなやんでたのでこちらでやりましょうね~
ちょいとお待ちを!
Posted by だーしゃ at 2005年09月01日 22:59
ありがとうございます~!
あとで記事をじっくり読みながら
やってみようと思います!!
Posted by sun at 2005年09月02日 09:06
こんばんは。
いつも参考にさせていただいてます♪

sunさんの講座ネタあたしも、是非やってもらいたかったもので
嬉しいな~♪
勝手にフォントとか追加していじってるんですけどね。すでに(笑)
でも、相手がインストールしてないと意味ない場合もあるし((^_^;))

だ~しゃさんの講座のお陰で、css自分では作成できないけど
書かれてるものは、大体読めるようになりました。
ほんとに、あの構造の図は、分かりやすいです!!
m(__)m ほんと~~~に、感謝です。

もっとつっこんで、ですね。ふふ。
自分で素材作成したいので、サイドバーや日付バーのピクセル数を
参考値で構わないので、教えてくださいませ。
※以前、トップのとこは記述があったので勝手に作成しちゃった(笑)

お忙しいと思いますが、よろしくおねがいいたします。
Posted by pinkの足跡 at 2005年09月02日 23:12
■PINKさんへ
こんにちは、コメントありがとうございます。
ネタは色々と振ってくださいね~
そのほうがこちらとしても説明しやすいし。

でもちょと眠い間に作った物なので。。
わかりやすくないかも。。。

これからぼちぼちやっていきますに~
Posted by だーしゃ at 2005年09月03日 00:42
こんにちワァ☆kirariです!!

サイドのボーダーが出てくるのが、とても遅いんですが

どうしてですか??


あと、友達のブログにコメントを残す時、私の名前とURLが毎回出てきません。


なので、コメントを残す時は毎回URLをコピーする作業をしないといけません。


どうしたら、前みたいに名前もURLを残すことができますか?

教えて下さい!!
Posted by kirari at 2006年01月17日 11:56
だーしゃさま

こんにちはm(__)m

CSS講座をみながらサイドの壁紙を変える事が出来ました。
とってもわかりやすくって、ちゃんと変える事が出来ました。^^
ありがとうございます!
Posted by Luna at 2006年02月04日 14:33
ちょっと前からTI-DAでブログ始めた月です
だーしゃさんの所で勉強して
色々変えてみようと思っているのですが、
自分が気に入った素材屋さんの素材を
saveしてti-daにアップロードしようとすると、
できませんでしたって出てくるんです、
大きすぎるのでしょうか?
小さくできますでしょうか?
Posted by at 2006年03月05日 11:38
■月さんへ

こんにちは、コメントありがとうございます。
アップロードする時に拡張子はjpg か gif になってますか?
もしかするとそれが原因かもしれませんね。
大きすぎる場合は、画像加工ツールを使って小さくしてみてくださいね。
そうしたら出来ると思いますよー
Posted by だーしゃ at 2006年03月14日 00:49
はい、拡張子が違っていました
それを変えたらアップロードはできたのですがっ・・・・
色々やって、今の状態になったのですが
メニューの文字の色がどこだかわかりません、
と、ブログ記事のタイトルのバックグランドにも
メニューと同じ画像を入れたいのですが
それも判りませんでした(-.-)
どうすれば(・_・?)
Posted by at 2006年03月19日 00:02
はじめまして、実は、コメント書込み2度目なんです。地球を一周で、一度。
だーしゃさんが、てぃーだのスタッフとは・・・。
てぃーだブロガーズマガジンを注意せず見ていたので、2月11日号では、だーしゃさんの01: てぃーだ本のタイトルをつけてください! by だーし で、小さい ゃが、字余りになっていて気が付きませんでした。(よく見ればよかった)
なので、地球一周では、バカな事を書き込んでいるので、出来れば削除をお願いしたいです。

「だーしゃのCSS講座」のおかげで、老眼鏡片手に楽しいブログ生活が出来そうです。ありがとうございます。
まずは、背景の色を変えてみました。
追記の「続きを読む」も、もしかして変えられるかと思いやってみました。
いや~楽しい。又、お邪魔しますね
Posted by kuuta at 2006年03月20日 01:19
■月さんへ

ブログとってもキレイですねー(^^)
サイドバーのサイドタイトルの部分でしょうか。
こちら今白になってますよね。

.sidetitle{ XXXXX }

こちらの部分のcolorの部分を変更すればOKですよ。
今たぶん{#FFF}になってると思うので、「#000」にしてみてください。
もちろん任意のやつでOKですよ。

レッツトライです!

■kuutaさんへ
こんにちは、コメントありがとうございまます。
未完成の地図のほう、最近ほったらかしにしてしまってたので、
コメントにきがついてませんでした!すみません!
削除なんてとんでもないですよ。ありがとうございました!

ブログ是非是非楽しんでくださいね。
沢山の方と交流すると楽しくなりますよーー(^^)
Posted by だーしゃ at 2006年03月20日 02:01
はじめまして♪ だ~しゃさんの 講座とっても
わかりやすいので 私も やってみようと
壁紙を 変えようとためしたのですが。。。
@(/ェ・o)@クスン 
左側だけ 変わってくれました
後のセンターと 右側は 真っ白に。。
background:url(http://blog.tida.net/usr/rikurenger/kabe_snow3.gif) top left text-align:center;
どうしたら 壁紙だけ 変わってくれるのか
教えてくださいペコリ(o_ _)o))
Posted by りくレンジャーhaha at 2006年10月03日 10:16
またまた おじゃましますペコリ(o_ _)o))
前のデザインだと難しそうなので
3カラムのシンプルデザインにかえました
ブログのタイトルは 変えることができました
ヽ(*⌒∇^)ノヤッホーイ♪
サイドシートが カラーを変えたいのですが
どうしても 出来ないのですが 教えてください
お願いします。
body{
color:#000;
margin:0px;
background:#00008B;
text-align:center;
}
↑↑↑これだけじゃ だめなのですかね~
@(/ェ・o)@クスン
Posted by りくレンジャーhaha at 2006年10月03日 19:32
りくレンジャーhahaさん

こんにちはー、ご連絡がおそくなりました!

まず一つ目なのですが、

>左側だけ 変わってくれました
>後のセンターと 右側は 真っ白に。。

こちらおそらくテンプレートの作りになりますねー。
なので、別のテンプレートじゃないとむずかしそうです。。。

>サイドシートが カラーを変えたいのですが
>どうしても 出来ないのですが 教えてください

こちらサイドバーのところですよね。
再度は

.links{~~~~}

の部分に

background:#00008B;

を追加してみて下さい。
多分出来ると思いますので。。

まずはやってみてくださいねー。
Posted by だーしゃ at 2006年10月04日 00:06
わぁいヽ(∀`ヽ●)(ノ●´∀)ノ わぁい♪
カラー変えることが できました。
ありがとうございました。
もう少し 欲がでて 画像を入れ替えようと
したら できませんでした@(/ェ・o)@クスン
#links{
width:160px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 5px 20px 5px;
background-color:url(//img03.ti-da.net/usr/rikurenger/rokem2.png);
overflow:hidden;
}
で ライトも 同様にやってみたのですが うまくできませんでした。
何回も すみませんが 教えてください。。
Posted by りくレンジャーhaha at 2006年10月04日 08:36
またまた~来ましたペコリ(o_ _)o))
講座を一回から 一通り 私なりに
勉強してみたら 思い通りに
なるました♪ これも だーしゃさんの
おかげですわぁいヽ(∀`ヽ●)(ノ●´∀)ノ わぁい♪
ありがとです<m(__)m>
Posted by りくレンジャーhaha at 2006年10月04日 10:59
りくレンジャーhahaさん

どうやら無事にできたようですねー!
おつかれさまでした!

自分で色々と触ると楽しいですよね。
いろいろやってみてくださいーー。

(^^)!
Posted by だーしゃ at 2006年10月04日 15:28
初めまして。
ブログを参考にさせて頂きました。

背景画像を変更してみましたが、
ブラウザによっては、背景が透けて見えてしまうようです。

てぃーだブログではないからなのでしょうか…(^^;)。

ちなみに、

body{
color:#000;
margin:0px;
background: url(/usr/toyopet/wallppr025.gif) top left
fixed repeat;
background-color: #fff;
}

と作っています。
Posted by toyopet-saiyou at 2009年04月06日 15:20
■ toyopet-saiyouさんへ

こんにちは!コメントありがとうございます。
そしてなのですが、まず今回の件について、調べてみた所、

現在ご利用になられているテンプレートの構造上、
こういう風に表示されてしまうという事となっています。

なので、オススメはテンプレートをいったん別の物に変えて
その後で背景画像を変更する、という風にした方がいいですねー、
現在のテンプレートで背景画像のみ変更する、という事をするには、
かなり手間がかかってしまいますよ。

他のテンプレート、シンプルな物にすれば、
すぐに出来ると思いますので。
どうぞよろしくお願いいたします。
Posted by だーしゃだーしゃ at 2009年04月07日 08:02
ありがとうございます。
あれからスタイルシートを確認したのですが、
contentsやlinkなどの色指定をしないといけないみたいで、
挫折してしまいました(笑)。

もう少しシンプルな物…。
なるほど、そうすればいいですよね☆
Posted by toyopet-saiyou at 2009年04月07日 09:41
■ toyopet-saiyouさんへ
もうすでに、いろいろとさわられているので、
カンはつかめていると思います、
なので、シンプルなスタイルシートを土台にすれば、すぐにできるのではないでしょうか。
まずはやってみてくださいね(^^)
何かあればまた連絡ください、よろしくお願いいたします。(~^)
Posted by だーしゃだーしゃ at 2009年04月08日 07:33
なんとか、ブログリニューアルしたんですが、
まだまだ納得いかないのでこれからもいじり続けます。(^^)v
ブログのカスタマイズ素人の私でも楽しくなってきましたよ~。

そこで、また質問なのですが、リンクを貼っている箇所の下線を消したいんですが
どうすればいいですか?
それとリンクの文字色・クリックした時の文字色・クリック後の文字色を変えたいです。
基本的な質問だと思うのですが、教えて下さい。m(..;)m
Posted by 森のおもちゃ箱*さち森のおもちゃ箱*さち at 2009年04月16日 11:05
■ 森のおもちゃ箱*さちさんへ
だんだんとかわってきていますよねーー(^^)
表紙がかわっていたのでびっくりしましたー。

そしてそれが面白いのはほんとそうだとおもいますっ。
僕もいじるのはおもしろいですっ。

そしてリンクの文字の色などは

基本的に

http://css.eweb-design.com/0402_lcs.html

↑のページが基本になります。

細かい所になりますが、

text

と書かれている部分を調整する事で編集できます。

そこら辺をいじってみてくださいねーー(^^)
Posted by だーしゃだーしゃ at 2009年04月16日 11:14
だーしゃさんありがとう~。(*^^*)
やっていて、なるほど!なるほど!へぇ~面白い♪と思ってしまいました。
これでやっと一段落といったところです。
だーしゃさんのおかげでほんとうに助かりました。m(^^)m
Posted by 森のおもちゃ箱*さち森のおもちゃ箱*さち at 2009年04月17日 00:29
■ 森のおもちゃ箱*さちさんへ
よかったですー、とりあえずひと段落ですねっ
やっぱり作っていくのっておもしろいですよね、
そして見ていただく方が居る事には感謝ですっ。
また何かあればきいてくださいねー、
よろしくどうぞですー。
Posted by だーしゃ at 2009年04月17日 07:41
ずっと前に一度質問させていただきました。
その節は有難うございました。

ところで今回、背景に画像を入れたいのですが、画像のサイズが小さいので全面に入るようにするのはどうしたらいいでしょうか。要するに繰り返し表示させればいいのかなと思いますが、やり方がわかりません。

どうか宜しくお願いいたします。
Posted by tsujitoku at 2009年09月20日 21:45
すみません。
問題が解決しました。

fixed repeat;

この部分もコピーしていたのが間違いの原因でした。削除してみたら、ちゃんと背景にできていました。
ちなみにこれはどういう意味ですか。
Posted by tsujitoku at 2009年09月20日 23:45
■ tsujitokuさんへ

こんにちは、解決できてよかったです!

んで fixed repeat; は要するにですが、固定するって意味で、

リピートがかからなくて、画像が繰り返し表示されないようにする時につかいますよー。

細かい所ですが、やっていくと楽しいですよね^-^
Posted by だーしゃ at 2009年09月21日 11:27
はじめまして。
今日てぃーだブログに初めて登録したものです。
だーしゃさんのこのページでこれからいろいろと勉強をさせていただこうかと思っていますが、同じような地域ブログで
カテゴリー別にヘッダー画像を入れ替えているサイトを以前目にしたのですが、てぃーだブログでも可能でしょうか。
Posted by scrappyscrappy at 2010年02月10日 16:23
■scrappyさんへ

こめんとありがとうございますっ、
基本的に他の所で出来ていることは、てぃーだブログでもできるので、
やり方はちょっと現時点ではわからないですが、出来ると思いますよー.
カテゴリー別でヘッダー画像が変わるのもいいですね!
自分も勉強しなきゃですっ
Posted by だーしゃ at 2010年02月10日 20:09
はじめまして★
いろいろ探していたらこちらにたどりつきました!
滋賀咲くの背景をまずカスタムしたいんですが、海外のサイトでいい背景の素材をみつけたんですが、

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B%20background-image%20%3A%20url%28%22http%3A//www.shabbyblogs.com/storage/backgrounds/Oct10/FieldTripW.jpg%20%22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20%20background-attachment%20%3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Avar%20shabby_div%20%3D%20document.createElement%28%27div%27%29%3B%0Ashabby_div.innerHTML%20%3D%20%27%3Ca%20target%3D%22_blank%22%20href%3D%22%20http%3A//www.shabbyblogs.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//www.ShabbyBlogs.com/storage/ShabbyBlogs.jpg%22%3E%3C/a%3E%27%3B%0Adocument.getElementsByTagName%28%27body%27%29.item%280%29.appendChild%28shabby_div%29%3B%0Ashabby_div.style.cssText%20%3D%20%22position%3A%20absolute%3B%20left%3A%200px%3B%20top%3A%2030px%3B%20z-index%3A%2050%3B%20width%3A%20150px%3B%20height%3A%2045px%3B%22%3B%0A%3C/script%3E"));</script>

と、このようなソース?で設定しかできないようなのですが。。。

どうすればよいですか??

何かいい案がありましたら、教えてくださいませ。。

よろしくお願いいたします。
Posted by えりぃ at 2011年01月31日 00:27
■えりぃさんへ
こんにちは、はじめましてー

何かのスクリプトですねーーー
基本的に、画像を背景に入れ込むので、スクリプトを利用するより、
右クリックで画像を保存して、その画像を自分のブログにUPして、
それのURLを自分の背景画像のURLと入れ替える方がいいですよ。

うーん、どうでしょうー
Posted by だーしゃだーしゃ at 2011年01月31日 17:56
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。