2005年07月28日
だーしゃのCSS講座 背景画像及び背景色を変更してみよう！
だーしゃの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;
}
というような感じで簡単に背景色を変える事ができます。
カラーコードについてはこちらを参照してください＞＞カラーコード
お好きな色のコードを貼り付ければＯＫですよっ！
【 背景画像を変更する 】
今度は画像の入れ替えを行いましょう～。
まずはこちらをご覧ください。
まず通常のテンプレート（ぼくのわたしの夏休み）
こちらをpyoさんのように背景画像を変更しようというたくらみです。
もうわかりましたね。
background: url(/usr/pyoblog/bg-kcs2.gif) top left
赤字部分のＵＲＬを変更すればいいのです。
もし、ご自分のスタイルシートボディに上記記述がない場合は、
上の記述をコピーして、backgroundと入れ替えてください。
そうする事で背景に画像を使う事ができます（＾＾）
注）利用する画像絶対に直にリンクしてはいけません。
こちらの画像は管理画面＞画像一覧にて
自分のブログに一度アップロードして、そこの画像ＵＲＬを入れてください。
そうしないと相手側のサーバーに負荷がかかってしまいます。
こちらも用は画像の入れ替えを行うだけなので、
比較的簡単ですよっ。
さぁやってみよ～！！！
よくわからない場合はコメントにて質問してください。
よろしくおねがいします～。
▼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 だーしゃのＣＳＳ講座 ブログの構造を理解してみよう！
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく！
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう！
■関連記事一覧
まずどういう事なのかというと、こちらをご覧ください。
■ブルースカイテンプレート
こちら今背景が灰色になってますよね？
こちらの色を変更してみようという事です。
まずはオリジナルテンプレートのスタイルシートで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;
}
というような感じで簡単に背景色を変える事ができます。
カラーコードについてはこちらを参照してください＞＞カラーコード
お好きな色のコードを貼り付ければＯＫですよっ！
【 背景画像を変更する 】
今度は画像の入れ替えを行いましょう～。
まずはこちらをご覧ください。
まず通常のテンプレート（ぼくのわたしの夏休み）
body{
font-family: "verdana", "helvetica", "osaka", "ＭＳ Ｐゴシック", sans-serif;
color:#000;
margin:0px;
background: url(/_img/summersea/umib02.jpg) top left
fixed repeat-x;
background-color: #fff;
}
font-family: "verdana", "helvetica", "osaka", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", sans-serif;
color:#000;
margin:0px;
background: url(/usr/pyoblog/bg-kcs2.gif) top left
fixed repeat;
background-color: #fff;
}
font-family: "verdana", "helvetica", "osaka", "ＭＳ Ｐゴシック", 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
赤字部分のＵＲＬを変更すればいいのです。
もし、ご自分のスタイルシートボディに上記記述がない場合は、
上の記述をコピーして、backgroundと入れ替えてください。
そうする事で背景に画像を使う事ができます（＾＾）
注）利用する画像絶対に直にリンクしてはいけません。
こちらの画像は管理画面＞画像一覧にて
自分のブログに一度アップロードして、そこの画像ＵＲＬを入れてください。
そうしないと相手側のサーバーに負荷がかかってしまいます。
こちらも用は画像の入れ替えを行うだけなので、
比較的簡単ですよっ。
さぁやってみよ～！！！
よくわからない場合はコメントにて質問してください。
よろしくおねがいします～。
■関連記事一覧
↓
CSS＆ブログの活用講座！
この記事へのトラックバックURL
http://daxiazzz.ti-da.net/t455798
この記事へのトラックバック
| 時々、ブログのデザインを変更しちゃってますが、これのほとんどは てぃ～だブログより提供されたものを使っています。ただし、引用部分をはっきりさせたいから色つけて囲んでおきた... |
デザインいじり【なんくる主婦の年中わーばぐち】at 2005年07月28日 11:22
| 今、ブログの後ろの壁紙をかえたくって、だーしゃサンの『CSS講座』に通っています。だーしゃ先生は、恐縮するくらいすぐにコメントでお返事くれて親切にアドバイスしてくれます。私が... |
壁紙かえたいな～【アルヒハレノヒ】at 2005年08月28日 13:00
|
今回は、ホームページの<body>タグの基本設定について書いていきます。 この<body>タグには、ホームページのベースとなる文字色や、背景色を設定することができます。 以前「... |
HTMLページの文字と背景色【ネットビジネス用CGI Perl HTML Javascriptの情報サイト】at 2006年03月27日 00:09
この記事へのコメント
|
|
ありがとうございます～。 質問くださった方をこちらに案内できます。 自分とこのＨＰサーバーにUPしてる画像ひっぱってますが ばれちゃいましたね。（苦笑） やっぱりてぃ～だにUPしなおしたほうがいいでしょうか？(^^ゞ |
Posted by pyo at 2005年07月28日 10:42
|
|
■pyoさんへ こんにちはっ、お役に立ててうれしいですよっ そしれいろいろリクエストしてくれれば、できる限り紹介していきたいですねっ そして画像の件についてなのですが、なぜてぃーだにアップするのを推奨するかというと、遠くから持ってくるより表示等が若干早くなるらですよっ。 でももちろん自分の管理しているＨＰからのリンクであればまだいいんですけどね、素材屋さんから直接リンクはもちろんだめです。 そんな感じでまた色々とアドバイスなどよろしくです～ |
Posted by だーしゃ at 2005年07月28日 15:29
|
|
だーしゃ先生、おはようございます。 思い立って、壁紙を変更しようと、やってみましたが、URLをはりつけても 実際に見ると真っ白になってます、、、。どうしたらよいでしょうか。 もともとが、背景画像じゃなくって、背景色のテンプレートの場合、 画像にはできないのですか？？ ↓挑戦してみた「body」のところ記述です。 body{ color:#000; margin:0px; background: url(http://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(http://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(http://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 ＣＳＳ講座をみながらサイドの壁紙を変える事が出来ました。 とってもわかりやすくって、ちゃんと変える事が出来ました。＾＾ ありがとうございます！ |
Posted by Ｌｕｎａ at 2006年02月04日 14:33
|
|
ちょっと前からＴＩ－ＤＡでブログ始めた月です だーしゃさんの所で勉強して 色々変えてみようと思っているのですが、 自分が気に入った素材屋さんの素材を ｓａｖｅしてｔｉ－ｄａにアップロードしようとすると、 できませんでしたって出てくるんです、 大きすぎるのでしょうか？ 小さくできますでしょうか？ |
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_ _)ｏ)) |
Posted by りくレンジャーhaha at 2006年10月03日 10:16
|
|
またまた おじゃましますﾍﾟｺﾘ(o_ _)ｏ)) 前のデザインだと難しそうなので ３カラムのシンプルデザインにかえました ブログのタイトルは 変えることができました ヽ(＊⌒∇^)ﾉﾔｯﾎｰｲ♪ サイドシートが カラーを変えたいのですが どうしても 出来ないのですが 教えてください お願いします。 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(http://img03.ti-da.net/usr/rikurenger/rokem2.png); overflow:hidden; } で ライトも 同様にやってみたのですが うまくできませんでした。 何回も すみませんが 教えてください。。 |
Posted by りくレンジャーhaha at 2006年10月04日 08:36
|
|
またまた～来ましたﾍﾟｺﾘ(o_ _)ｏ)) 講座を一回から 一通り 私なりに 勉強してみたら 思い通りに なるました♪ これも だーしゃさんの おかげですわぁいヽ(∀`ヽ●)(ﾉ●´∀)ﾉ わぁい♪ ありがとです<m(__)m> |
Posted by りくレンジャーhaha at 2006年10月04日 10:59
|
|
りくレンジャーhahaさん どうやら無事にできたようですねー！ おつかれさまでした！ 自分で色々と触ると楽しいですよね。 いろいろやってみてくださいーー。 （＾＾）！ |
Posted by だーしゃ at 2006年10月04日 15:28
日本の地域ブログ大集合！津々浦々の美味い・楽しいがここに！
