2008年11月19日
2006年04月29日
背景を変更する♪
CSSの編集で背下の３点の背景を変更してみました。
←ぼちっと応援お願いします♪ m(_ _)m
- ページの背景に画像を使ってみる♪
- ブログタイトルの背景に画像を使ってみる♪
- ブログの背景に画像を使ってみる♪
- まず、使用したい画像をアップロードします。アップロードの方法の説明はコチラ
http://pds.exblog.~省略~/□☆○1.gif
http://pds.exblog.~省略~/□☆○2.gif
http://pds.exblog.~省略~/□☆○3.gifなおyozoは左サイドの素材屋さんからお借りしています。必要な分だけダウンロードさせていただいています。もちろん、掲示板やコメントに一言ですが、お礼のカキコしています。 - [ブログ設定]−[スキン変更]−[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」のそれぞれのセレクタ（BODYやDIV.TOPやDIV.CONTENTSのことです。)の｛ ｝のbackgroundのurlの部分にURLを貼り付けるだけです。｛ ｝の中のコードは使用しているスキンによって変わります。１回ずつ、「プレビュー」で確認するようにしましょう。編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
- ページの背景に画像を使ってみる♪の場合
BODY{
MARGIN : 0PX;
PADDING : 0PX;
background: url("http://pds.exblog.~省略~/□☆○1.gif");
background-repeat:repeat;
}なお、この画像は1キロバイトの素材屋さんよりダウンロードさせていただきました。 - ブログタイトルの背景に画像を使ってみる♪の場合
DIV.TOP{
width: 780px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
height: 165px;
background-image:url("http://pds.exblog.~省略~/□☆○2.gif");
background-repeat:repeat;
}なお、ここの画像はまったりほんぽよりダウンロードさせていただきました。 - ブログの背景に画像を使ってみる♪
DIV.CONTENTS{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
width: 780px;
background-image:url("http://pds.exblog.~省略~/□☆○3.gif");
background-repeat:repeat;
}なお、ここの画像は『chai*』よりダウンロードさせていただきました。
- ページの背景に画像を使ってみる♪の場合
- 「プレビュー」で確認してから、「保存」してください。
下の『柴成＠NNユーザー』様のコメントにありますように、CSS編集はブラウザによって表示のしかたが変わることもあります。4/29 23：20 追記
今回yozoの設定したbackgroundは、｛ ｝の中に同じ文字backgroundの設定を残していると、IEでは表示されますが、他のブラウザでは反映されないのですね。そのことをうっかり忘れていたわけです。
DIV.TOP{
width: 780px;
background: #FFFFFF;←この行が残ってました
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
height: 165px;
background-image:url("http://pds.exblog.~省略~/□☆○2.gif");
background-repeat:repeat;
}
この追記を書くにあたり、下のコメントにて、助言くださった私の大切な友人webでお絵かきのまこさんに心より感謝いたします。
<yozoからのお願い>
私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
←ぼちっと応援お願いします♪ m(_ _)m≪New 言葉バトン♪ | Top | 端午の節句に何を食べますか？ Old≫
トラックバックURL
コメント
スキン変更ですね。
水色がとても爽やかで優しいです(*^o^*)
コメントのところの音符ラインもすご〜く可愛いです♪
さすがですね(*＾▽＾*)
Posted by ゆうゆ at 2006.04.29 20:32 | edit
コメント
＞スキン変更ですね。
そうなんですよ。GW初日だというのにどうして・・・（笑）です。
＞水色がとても爽やかで優しいです(*^o^*)
＞コメントのところの音符ラインもすご〜く可愛いです♪
ありがとうございまっす♪(*￣∇￣*)ｴﾍﾍ
ゆうゆさんにそうおっしゃっていただけたら、とてもうれしいですよ♪
(..)(^^)(^。^)(*^o^)(^Ｏ^)ｳﾚｼｰｰｰ!!
Posted by yoblog at 2006.04.29 20:44 | edit
コメント
この記事、カスタマイズしているときに読みたかったわー!!(笑)
背景を変えるだけでもどの部分を変えればいいか分からず
結構時間をかけました。
まぁおかげで今では簡単に出来るようになりましたが。
それにしても爽やかなスキンになりましたね!!(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
上のタイトルの部分も狭くなってスペースが有効利用できています!!
エキサイトのブログの方には特に分かりやすい記事でいいですね♪(*'ｰ')
Posted by まゆび at 2006.04.29 21:10 | edit
コメント
はて、残念ながら。
私のネスケでは表示しませんね。残念っ！
んーcssのどの部分がまずいんだろう？
なにか抜けているワケでもなさそうだし☆
cssはデリケートですねぇ(^_^;)
Posted by 柴成＠NNユーザー at 2006.04.29 21:52 | edit
コメント
yozoさんのブログ、随分素敵に衣替えなさったんですね！！
私のブログは確かCSSがいじれなかった気がします（？？）
でも、ホント素敵(#^.^#)
Posted by ろんちゃん at 2006.04.29 22:35 | edit
コメント
＞この記事、カスタマイズしているときに読みたかったわー!!(笑)
ははは・・・実はyozoも結構大変でしたよ（笑）
背景をどんなのにしようというのが最も時間かかりました。（泣）
＞まぁおかげで今では簡単に出来るようになりましたが。
さすがですね。yozoもまゆびさんのCSSの記事を参考にしてますよ♪
＞爽やかなスキンになりましたね!!(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
そうおっしゃていただくととてもうれしいですよ（笑）
本当に励みになります。m(_ _)m
＞上のタイトルの部分も狭くなってスペースが有効利用できています!!
＞エキサイトのブログの方には特に分かりやすい記事でいいですね♪
ありがとうございまっす m(_ _)m
エキサイトの方はそのまま使えるようにしたつもりですよ♪
あとはCSSの基本ですよね。役に立つと思います。(^○^)
Posted by yoblog at 2006.04.29 22:48 | edit
コメント
ふふふ・・・今度はNN（ネットスケープ）ですね。
「Webでお絵かき」のまこさんですよね。（笑）
いらっしゃいませ。もう具合はいいのですね。安心しました。m(_ _)m
＞はて、残念ながら。
＞私のネスケでは表示しませんね。残念っ！
えっ？なんですって・・・
ちょいとCSSの見直しを・・・(￣□￣；)ギョッ またしても
background-colorの属性を残して編集してましたね。
IEは追加すると、追加した上の行で同じ属性を定義していても、追加の行で変更できます。他のブラウザは、ダメですよね。うっかりしてましたよ。修正済みなので今はもう大丈夫でしょうが・・・
ページの背景も、設置できないようです。（苦笑）
さっそく、追記しておきますね。いつも本当に貴重な指摘をしてくださってありがとうございまっす♪本当に感謝してます m(_ _)m
＞cssはデリケートですねぇ(^_^;)
うーん。CSSは他のブラウザのことも考えないといけませんものね。
ちょっとした、うっかりで、IEオンリーブログになっちゃいますよね。
反省隊＼(_ _*)m(_ _)m(*_ _)／参上
Posted by yoblog at 2006.04.29 23:00 | edit
コメント
＞yozoさんのブログ、随分素敵に衣替えなさったんですね！！
ありがとうございまっす♪ちょっとIEしか表示できなかったようですが
まこさん（柴成＠NNユーザーさん）の指摘で、修正しましたよ（笑）
＞私のブログは確かCSSがいじれなかった気がします（？？）
えっ？そうですか？みなさんいじってるような・・・
たぶんできると思いますけど・・・思い違いなのかなぁ〜♪
ちょっと自信ないですけど・・・ごめんなさい。m(_ _)m
Posted by yoblog at 2006.04.29 23:17 | edit
コメント
オリジナルのスキンってすごいなぁー。憧れるけど・・・。私に出来るんだろうか。。。
そっかー。yozoさんに教えてもらえばいいんだーーー。
なんてーーー。
でも、あの、、、なんていうのかわからないのですが、raraの背景が来る度に変わるやつとか。。。やってみたいと思っていることはたくさんあるんだよなーー。でもいいんだ。少しずつやっていければいいんだよねー。
わからないときは教えてください！！！
Posted by enu50430 at 2006.05.01 13:10 | edit
コメント
うぉー。yozoさんのスキンが変わっていて、おおおーーーかわいい♪って思っていたら、こうやってやったんだー、、、そっかーそっかー。
＞憧れるけど・・・。私に出来るんだろうか。。。
背景の画像を変えるだけですから、raraちゃんの背景でアップロードもできるようになっているし、CSSの編集もコメント欄の拡大でやった要領ですからね。enuさんなら難しくないはずですよ。p(･∩･)qｶﾞﾝﾊﾞﾚ!
＞そっかー。yozoさんに教えてもらえばいいんだーーー。
ＯＫ！遠慮なくいつでもいいですよ♪
＞やってみたいと思っていることはたくさんあるんだよなーー。
BlogPet背景ﾗﾝﾀﾞﾑ表示ですね。ここのカテゴリーにありますよ。
いつでも読んでみてねー♪もちろんその記事にわからないことを質問してくださいね。たくさん参考になるコメントもあるはずですよ。
＞でもいいんだ。少しずつやっていければいいんだよねー。
＞わからないときは教えてください！！！
はい♪少しずつ、のんびりやりましょう♪わからなければもちろん
いつでも聞いてくださいね♪~~~ヾ(〃＾∇＾)ｏ ﾌｧｲﾄｫｰ!!
Posted by yoblog at 2006.05.01 16:14 | edit
コメント
ずっと タイトルの背景に画像を入れたいと思っていましたぁ〜。
とっても参考になりました。トライしてみますね。
また、ご訪問させていただきます。
Posted by Studio-Fam at 2006.06.30 23:02 | edit
コメント
＞ずっと タイトルの背景に画像を入れたいと思っていましたぁ〜。
＞とっても参考になりました。トライしてみますね。
お時間のあるときにでも、じっくりとりくんでみてくださいね。
というよりも、どの画像を背景にしたいのか？というのが
最も時間のかかることだと思いますよ。その画像を設定するだけなら
すぐにできますからね。頑張ってみてくださいませ♪(ﾟｰﾟ)(｡_｡)ｳﾝｳﾝ
Posted by yoblog at 2006.07.01 08:51 | edit
コメント
早速トライしてみましたぁ〜
タイトル背景に画像ハリハリできました
有難うございました。
メモ帳増設もとっても気になるし・・・
プルダウンも気になるぅ〜
少しずつ改造にトライしてみます
Posted by komine at 2006.07.02 14:55 | edit
コメント
＞早速トライしてみましたぁ〜
＞タイトル背景に画像ハリハリできました 有難うございました。
できましたか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
素敵なタイトルになりましたね♪(ﾟｰﾟ)(｡_｡)ｳﾝｳﾝ
＞メモ帳増設もとっても気になるし・・・プルダウンも気になるぅ〜
＞少しずつ改造にトライしてみます
そうですね。一つずつトライしてみてくださいね。
そのうち、簡単になってきますよ。CSSに見慣れてきますからね。
そうなれば自由自在に触れるようになってきますよ！(*^-ﾟ)vｨｪｨ♪
Posted by yoblog at 2006.07.02 15:43 | edit