だーしゃの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講座 ヘッダーの画像を変えてみよう!
ありがとうございます~。
質問くださった方をこちらに案内できます。
自分とこのHPサーバーにUPしてる画像ひっぱってますが
ばれちゃいましたね。(苦笑)
やっぱりてぃ~だにUPしなおしたほうがいいでしょうか?(^^ゞ
■pyoさんへ
こんにちはっ、お役に立ててうれしいですよっ
そしれいろいろリクエストしてくれれば、できる限り紹介していきたいですねっ
そして画像の件についてなのですが、なぜてぃーだにアップするのを推奨するかというと、遠くから持ってくるより表示等が若干早くなるらですよっ。
でももちろん自分の管理しているHPからのリンクであればまだいいんですけどね、素材屋さんから直接リンクはもちろんだめです。
そんな感じでまた色々とアドバイスなどよろしくです~
だーしゃ先生、おはようございます。
思い立って、壁紙を変更しようと、やってみましたが、URLをはりつけても
実際に見ると真っ白になってます、、、。どうしたらよいでしょうか。
もともとが、背景画像じゃなくって、背景色のテンプレートの場合、
画像にはできないのですか??
↓挑戦してみた「body」のところ記述です。
body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/壁紙用 awa2.gif) top left
text-align:center;
}
■sunさんへ
こんにちは、壁紙ですね。
これは、壁紙の画像ファイルに日本語が使われていることが問題です。
画像ファイルをアルファベット表記に設定しなおしてください。
そうしたらいけますよ(^^)!
ぜひお試しあれ!
こんばんは。さっそくの回答ありがとうございました!!
画像ファイルの名前をアルファベットに変えて、再度アップロードしてみました。
が、やっぱり背景が真っ白になってしまいます。ファイルになにか問題が!?
↓またまた「body」の記述です。
body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/kabe kabe10.gif) top left
■sunさんへ
なるほど!もう一つ理由がありました~。
アルファベット表記はOKです!
問題は、スペースが入ってますよね、それがファイル名だとだめなんですよ~
なので例えば「 kabe-kabe10.gif 」とか表記を変えてみてくださいね(^^)
言葉足らずでごめんなさいm(_ _)m
試してみてくださいね~、できない場合はまた言ってくださいね~。(^^ )
だーしゃさ~~ん!助けてくださいーー!
ファイル名のスペースを「-」にかえて再度アップロードして
挑戦したのですが、また真っ白に、、、、(><)
一番上のスタイルシートのところを変更するだけで大丈夫なんですよね?
たぶん、ほかのところはいっさいさわってないはずなのですが。
body{
color:#000;
margin:0px;
background: url(//img03.ti-da.net/usr/aruhiharenohi/kabe-fruitnashi1.gif) top left
text-align:center;
}
■sunさんへ
今SUNさんの所に書いてきましたけど、「;」が抜けてるの気がつきませんでした~。
スタイルシートは 「~~~:~~~;」コロンとセミコロンで区切りを入れる必要があるんです。
今回はBACKGRONDの所抜けてるのが気がつきませんでした~。
今度こそ大丈夫なはず!また何かあれば言ってくださいね~
ありがとうございました!!!
教えてもらったのをコピペしたら、壁紙がちゃんとかわりました!
とっても嬉しいです!ありがとうございます♪
■sunさんへ
よかったよかった(^^)
また何かあれば試してみてくださいね~
自分でデザインできると楽しいですからねっ!
また何でも聞いてくださいね~
すみません、また質問させてください。
ブログの枠の線の色、あと、サイドバーや日付のタイトルバーの背景、
を変えるには、どこをいじればよいでしょうか?
お暇な時でかまいませんので、よろしくお願いします!!
□sunさんへ
コメントありがとうございます(^^)!
いいですね!これ講座のネタになります!!
最近どのような講座を開こうかなやんでたのでこちらでやりましょうね~
ちょいとお待ちを!
ありがとうございます~!
あとで記事をじっくり読みながら
やってみようと思います!!
こんばんは。
いつも参考にさせていただいてます♪
sunさんの講座ネタあたしも、是非やってもらいたかったもので
嬉しいな~♪
勝手にフォントとか追加していじってるんですけどね。すでに(笑)
でも、相手がインストールしてないと意味ない場合もあるし((^_^;))
だ~しゃさんの講座のお陰で、css自分では作成できないけど
書かれてるものは、大体読めるようになりました。
ほんとに、あの構造の図は、分かりやすいです!!
m(__)m ほんと~~~に、感謝です。
もっとつっこんで、ですね。ふふ。
自分で素材作成したいので、サイドバーや日付バーのピクセル数を
参考値で構わないので、教えてくださいませ。
※以前、トップのとこは記述があったので勝手に作成しちゃった(笑)
お忙しいと思いますが、よろしくおねがいいたします。
■PINKさんへ
こんにちは、コメントありがとうございます。
ネタは色々と振ってくださいね~
そのほうがこちらとしても説明しやすいし。
でもちょと眠い間に作った物なので。。
わかりやすくないかも。。。
これからぼちぼちやっていきますに~
こんにちワァ☆kirariです!!
サイドのボーダーが出てくるのが、とても遅いんですが
どうしてですか??
あと、友達のブログにコメントを残す時、私の名前とURLが毎回出てきません。
なので、コメントを残す時は毎回URLをコピーする作業をしないといけません。
どうしたら、前みたいに名前もURLを残すことができますか?
教えて下さい!!
だーしゃさま
こんにちはm(__)m
CSS講座をみながらサイドの壁紙を変える事が出来ました。
とってもわかりやすくって、ちゃんと変える事が出来ました。^^
ありがとうございます!
ちょっと前からTI-DAでブログ始めた月です
だーしゃさんの所で勉強して
色々変えてみようと思っているのですが、
自分が気に入った素材屋さんの素材を
saveしてti-daにアップロードしようとすると、
できませんでしたって出てくるんです、
大きすぎるのでしょうか?
小さくできますでしょうか?
■月さんへ
こんにちは、コメントありがとうございます。
アップロードする時に拡張子はjpg か gif になってますか?
もしかするとそれが原因かもしれませんね。
大きすぎる場合は、画像加工ツールを使って小さくしてみてくださいね。
そうしたら出来ると思いますよー
はい、拡張子が違っていました
それを変えたらアップロードはできたのですがっ・・・・
色々やって、今の状態になったのですが
メニューの文字の色がどこだかわかりません、
と、ブログ記事のタイトルのバックグランドにも
メニューと同じ画像を入れたいのですが
それも判りませんでした(-.-)
どうすれば(・_・?)
はじめまして、実は、コメント書込み2度目なんです。地球を一周で、一度。
だーしゃさんが、てぃーだのスタッフとは・・・。
てぃーだブロガーズマガジンを注意せず見ていたので、2月11日号では、だーしゃさんの01: てぃーだ本のタイトルをつけてください! by だーし で、小さい ゃが、字余りになっていて気が付きませんでした。(よく見ればよかった)
なので、地球一周では、バカな事を書き込んでいるので、出来れば削除をお願いしたいです。
「だーしゃのCSS講座」のおかげで、老眼鏡片手に楽しいブログ生活が出来そうです。ありがとうございます。
まずは、背景の色を変えてみました。
追記の「続きを読む」も、もしかして変えられるかと思いやってみました。
いや~楽しい。又、お邪魔しますね
■月さんへ
ブログとってもキレイですねー(^^)
サイドバーのサイドタイトルの部分でしょうか。
こちら今白になってますよね。
.sidetitle{ XXXXX }
こちらの部分のcolorの部分を変更すればOKですよ。
今たぶん{#FFF}になってると思うので、「#000」にしてみてください。
もちろん任意のやつでOKですよ。
レッツトライです!
■kuutaさんへ
こんにちは、コメントありがとうございまます。
未完成の地図のほう、最近ほったらかしにしてしまってたので、
コメントにきがついてませんでした!すみません!
削除なんてとんでもないですよ。ありがとうございました!
ブログ是非是非楽しんでくださいね。
沢山の方と交流すると楽しくなりますよーー(^^)
はじめまして♪ だ~しゃさんの 講座とっても
わかりやすいので 私も やってみようと
壁紙を 変えようとためしたのですが。。。
@(/ェ・o)@クスン
左側だけ 変わってくれました
後のセンターと 右側は 真っ白に。。
background:url(http://blog.tida.net/usr/rikurenger/kabe_snow3.gif) top left text-align:center;
どうしたら 壁紙だけ 変わってくれるのか
教えてくださいペコリ(o_ _)o))
またまた おじゃましますペコリ(o_ _)o))
前のデザインだと難しそうなので
3カラムのシンプルデザインにかえました
ブログのタイトルは 変えることができました
ヽ(*⌒∇^)ノヤッホーイ♪
サイドシートが カラーを変えたいのですが
どうしても 出来ないのですが 教えてください
お願いします。
body{
color:#000;
margin:0px;
background:#00008B;
text-align:center;
}
↑↑↑これだけじゃ だめなのですかね~
@(/ェ・o)@クスン
りくレンジャーhahaさん
こんにちはー、ご連絡がおそくなりました!
まず一つ目なのですが、
>左側だけ 変わってくれました
>後のセンターと 右側は 真っ白に。。
こちらおそらくテンプレートの作りになりますねー。
なので、別のテンプレートじゃないとむずかしそうです。。。
>サイドシートが カラーを変えたいのですが
>どうしても 出来ないのですが 教えてください
こちらサイドバーのところですよね。
再度は
.links{~~~~}
の部分に
background:#00008B;
を追加してみて下さい。
多分出来ると思いますので。。
まずはやってみてくださいねー。
わぁいヽ(∀`ヽ●)(ノ●´∀)ノ わぁい♪
カラー変えることが できました。
ありがとうございました。
もう少し 欲がでて 画像を入れ替えようと
したら できませんでした@(/ェ・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;
}
で ライトも 同様にやってみたのですが うまくできませんでした。
何回も すみませんが 教えてください。。
またまた~来ましたペコリ(o_ _)o))
講座を一回から 一通り 私なりに
勉強してみたら 思い通りに
なるました♪ これも だーしゃさんの
おかげですわぁいヽ(∀`ヽ●)(ノ●´∀)ノ わぁい♪
ありがとです<m(__)m>
りくレンジャーhahaさん
どうやら無事にできたようですねー!
おつかれさまでした!
自分で色々と触ると楽しいですよね。
いろいろやってみてくださいーー。
(^^)!
初めまして。
ブログを参考にさせて頂きました。
背景画像を変更してみましたが、
ブラウザによっては、背景が透けて見えてしまうようです。
てぃーだブログではないからなのでしょうか…(^^;)。
ちなみに、
body{
color:#000;
margin:0px;
background: url(/usr/toyopet/wallppr025.gif) top left
fixed repeat;
background-color: #fff;
}
と作っています。
■ toyopet-saiyouさんへ
こんにちは!コメントありがとうございます。
そしてなのですが、まず今回の件について、調べてみた所、
現在ご利用になられているテンプレートの構造上、
こういう風に表示されてしまうという事となっています。
なので、オススメはテンプレートをいったん別の物に変えて
その後で背景画像を変更する、という風にした方がいいですねー、
現在のテンプレートで背景画像のみ変更する、という事をするには、
かなり手間がかかってしまいますよ。
他のテンプレート、シンプルな物にすれば、
すぐに出来ると思いますので。
どうぞよろしくお願いいたします。
ありがとうございます。
あれからスタイルシートを確認したのですが、
contentsやlinkなどの色指定をしないといけないみたいで、
挫折してしまいました(笑)。
もう少しシンプルな物…。
なるほど、そうすればいいですよね☆
■ toyopet-saiyouさんへ
もうすでに、いろいろとさわられているので、
カンはつかめていると思います、
なので、シンプルなスタイルシートを土台にすれば、すぐにできるのではないでしょうか。
まずはやってみてくださいね(^^)
何かあればまた連絡ください、よろしくお願いいたします。(~^)
なんとか、ブログリニューアルしたんですが、
まだまだ納得いかないのでこれからもいじり続けます。(^^)v
ブログのカスタマイズ素人の私でも楽しくなってきましたよ~。
そこで、また質問なのですが、リンクを貼っている箇所の下線を消したいんですが
どうすればいいですか?
それとリンクの文字色・クリックした時の文字色・クリック後の文字色を変えたいです。
基本的な質問だと思うのですが、教えて下さい。m(..;)m
■ 森のおもちゃ箱*さちさんへ
だんだんとかわってきていますよねーー(^^)
表紙がかわっていたのでびっくりしましたー。
そしてそれが面白いのはほんとそうだとおもいますっ。
僕もいじるのはおもしろいですっ。
そしてリンクの文字の色などは
基本的に
http://css.eweb-design.com/0402_lcs.html
↑のページが基本になります。
細かい所になりますが、
text
と書かれている部分を調整する事で編集できます。
そこら辺をいじってみてくださいねーー(^^)
だーしゃさんありがとう~。(*^^*)
やっていて、なるほど!なるほど!へぇ~面白い♪と思ってしまいました。
これでやっと一段落といったところです。
だーしゃさんのおかげでほんとうに助かりました。m(^^)m
■ 森のおもちゃ箱*さちさんへ
よかったですー、とりあえずひと段落ですねっ
やっぱり作っていくのっておもしろいですよね、
そして見ていただく方が居る事には感謝ですっ。
また何かあればきいてくださいねー、
よろしくどうぞですー。
ずっと前に一度質問させていただきました。
その節は有難うございました。
ところで今回、背景に画像を入れたいのですが、画像のサイズが小さいので全面に入るようにするのはどうしたらいいでしょうか。要するに繰り返し表示させればいいのかなと思いますが、やり方がわかりません。
どうか宜しくお願いいたします。
すみません。
問題が解決しました。
fixed repeat;
この部分もコピーしていたのが間違いの原因でした。削除してみたら、ちゃんと背景にできていました。
ちなみにこれはどういう意味ですか。
■ tsujitokuさんへ
こんにちは、解決できてよかったです!
んで fixed repeat; は要するにですが、固定するって意味で、
リピートがかからなくて、画像が繰り返し表示されないようにする時につかいますよー。
細かい所ですが、やっていくと楽しいですよね^-^
はじめまして。
今日てぃーだブログに初めて登録したものです。
だーしゃさんのこのページでこれからいろいろと勉強をさせていただこうかと思っていますが、同じような地域ブログで
カテゴリー別にヘッダー画像を入れ替えているサイトを以前目にしたのですが、てぃーだブログでも可能でしょうか。
■scrappyさんへ
こめんとありがとうございますっ、
基本的に他の所で出来ていることは、てぃーだブログでもできるので、
やり方はちょっと現時点ではわからないですが、出来ると思いますよー.
カテゴリー別でヘッダー画像が変わるのもいいですね!
自分も勉強しなきゃですっ
はじめまして★
いろいろ探していたらこちらにたどりつきました!
滋賀咲くの背景をまずカスタムしたいんですが、海外のサイトでいい背景の素材をみつけたんですが、
<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>
と、このようなソース?で設定しかできないようなのですが。。。
どうすればよいですか??
何かいい案がありましたら、教えてくださいませ。。
よろしくお願いいたします。
■えりぃさんへ
こんにちは、はじめましてー
何かのスクリプトですねーーー
基本的に、画像を背景に入れ込むので、スクリプトを利用するより、
右クリックで画像を保存して、その画像を自分のブログにUPして、
それのURLを自分の背景画像のURLと入れ替える方がいいですよ。
うーん、どうでしょうー