--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年04月29日

背景を変更する♪

CSSの編集で背下の3点の背景を変更してみました。
  1. ページの背景に画像を使ってみる♪

  2. ブログタイトルの背景に画像を使ってみる♪

  3. ブログの背景に画像を使ってみる♪


  1. まず、使用したい画像をアップロードします。
    アップロードの方法の説明はコチラ

    http://pds.exblog.~省略~/□☆○1.gif
    http://pds.exblog.~省略~/□☆○2.gif
    http://pds.exblog.~省略~/□☆○3.gif

    なおyozoは左サイドの素材屋さんからお借りしています。必要な分だけダウンロードさせていただいています。もちろん、掲示板やコメントに一言ですが、お礼のカキコしています。


  2. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」のそれぞれのセレクタ(BODYやDIV.TOPやDIV.CONTENTSのことです。)の{ }のbackgroundのurlの部分にURLを貼り付けるだけです。{ }の中のコードは使用しているスキンによって変わります。1回ずつ、「プレビュー」で確認するようにしましょう。編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    1. ページの背景に画像を使ってみる♪の場合
      BODY{
      MARGIN : 0PX;
      PADDING : 0PX;
      background: url("http://pds.exblog.~省略~/□☆○1.gif");
      background-repeat:repeat;

      }
      なお、この画像は1キロバイトの素材屋さんよりダウンロードさせていただきました。


    2. ブログタイトルの背景に画像を使ってみる♪の場合
      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;

      }
      なお、ここの画像はまったりほんぽよりダウンロードさせていただきました。


    3. ブログの背景に画像を使ってみる♪
      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*』よりダウンロードさせていただきました。


  3. 「プレビュー」で確認してから、「保存」してください。



4/29 23:20 追記
下の『柴成@NNユーザー』様のコメントにありますように、CSS編集はブラウザによって表示のしかたが変わることもあります。
今回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



人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

スポンサーサイト

メイン

≪New 言葉バトン♪ | Top | 端午の節句に何を食べますか? Old≫

トラックバックURL


コメント

yozoさん、こんばんは~^^
スキン変更ですね。
水色がとても爽やかで優しいです(*^o^*)
コメントのところの音符ラインもすご~く可愛いです♪
さすがですね(*^▽^*)

コメント

>ゆうゆさん、こんばんはー♪
>スキン変更ですね。
そうなんですよ。GW初日だというのにどうして・・・(笑)です。
>水色がとても爽やかで優しいです(*^o^*)
>コメントのところの音符ラインもすご~く可愛いです♪
ありがとうございまっす♪(* ̄∇ ̄*)エヘヘ
ゆうゆさんにそうおっしゃっていただけたら、とてもうれしいですよ♪
(..)(^^)(^。^)(*^o^)(^O^)ウレシーーー!!

コメント

yozoさん、こんばんは♪(*'ー')
この記事、カスタマイズしているときに読みたかったわー!!(笑)
背景を変えるだけでもどの部分を変えればいいか分からず
結構時間をかけました。
まぁおかげで今では簡単に出来るようになりましたが。
それにしても爽やかなスキンになりましたね!!(゚-゚*)(。。*)ウンウン
上のタイトルの部分も狭くなってスペースが有効利用できています!!
エキサイトのブログの方には特に分かりやすい記事でいいですね♪(*'ー')

コメント

こんばんはー。
はて、残念ながら。
私のネスケでは表示しませんね。残念っ!
んーcssのどの部分がまずいんだろう?
なにか抜けているワケでもなさそうだし☆
cssはデリケートですねぇ(^_^;)

コメント

yozoさん、こんばんは☆彡
yozoさんのブログ、随分素敵に衣替えなさったんですね!!
私のブログは確かCSSがいじれなかった気がします(??)
でも、ホント素敵(#^.^#)

コメント

>まゆびさん、こんばんはー♪
>この記事、カスタマイズしているときに読みたかったわー!!(笑)
ははは・・・実はyozoも結構大変でしたよ(笑)
背景をどんなのにしようというのが最も時間かかりました。(泣)
>まぁおかげで今では簡単に出来るようになりましたが。
さすがですね。yozoもまゆびさんのCSSの記事を参考にしてますよ♪
>爽やかなスキンになりましたね!!(゚-゚*)(。。*)ウンウン
そうおっしゃていただくととてもうれしいですよ(笑)
本当に励みになります。m(_ _)m
>上のタイトルの部分も狭くなってスペースが有効利用できています!!
>エキサイトのブログの方には特に分かりやすい記事でいいですね♪
ありがとうございまっす m(_ _)m
エキサイトの方はそのまま使えるようにしたつもりですよ♪
あとはCSSの基本ですよね。役に立つと思います。(^○^)

コメント

>柴成@NNユーザー様、こんばんはー♪
ふふふ・・・今度はNN(ネットスケープ)ですね。
「Webでお絵かき」のまこさんですよね。(笑)
いらっしゃいませ。もう具合はいいのですね。安心しました。m(_ _)m
>はて、残念ながら。
>私のネスケでは表示しませんね。残念っ!
えっ?なんですって・・・
ちょいとCSSの見直しを・・・( ̄□ ̄;)ギョッ またしても
background-colorの属性を残して編集してましたね。
IEは追加すると、追加した上の行で同じ属性を定義していても、追加の行で変更できます。他のブラウザは、ダメですよね。うっかりしてましたよ。修正済みなので今はもう大丈夫でしょうが・・・
ページの背景も、設置できないようです。(苦笑)
さっそく、追記しておきますね。いつも本当に貴重な指摘をしてくださってありがとうございまっす♪本当に感謝してます m(_ _)m
>cssはデリケートですねぇ(^_^;)
うーん。CSSは他のブラウザのことも考えないといけませんものね。
ちょっとした、うっかりで、IEオンリーブログになっちゃいますよね。
反省隊\(_ _*)m(_ _)m(*_ _)/参上

コメント

>ろんちゃんさん、こんばんはー♪
>yozoさんのブログ、随分素敵に衣替えなさったんですね!!
ありがとうございまっす♪ちょっとIEしか表示できなかったようですが
まこさん(柴成@NNユーザーさん)の指摘で、修正しましたよ(笑)
>私のブログは確かCSSがいじれなかった気がします(??)
えっ?そうですか?みなさんいじってるような・・・
たぶんできると思いますけど・・・思い違いなのかなぁ~♪
ちょっと自信ないですけど・・・ごめんなさい。m(_ _)m

コメント

うぉー。yozoさんのスキンが変わっていて、おおおーーーかわいい♪って思っていたら、こうやってやったんだー、、、そっかーそっかー。
オリジナルのスキンってすごいなぁー。憧れるけど・・・。私に出来るんだろうか。。。
そっかー。yozoさんに教えてもらえばいいんだーーー。
なんてーーー。
でも、あの、、、なんていうのかわからないのですが、raraの背景が来る度に変わるやつとか。。。やってみたいと思っていることはたくさんあるんだよなーー。でもいいんだ。少しずつやっていければいいんだよねー。
わからないときは教えてください!!!

コメント

>enuさん、こんにちはー♪
うぉー。yozoさんのスキンが変わっていて、おおおーーーかわいい♪って思っていたら、こうやってやったんだー、、、そっかーそっかー。
>憧れるけど・・・。私に出来るんだろうか。。。
背景の画像を変えるだけですから、raraちゃんの背景でアップロードもできるようになっているし、CSSの編集もコメント欄の拡大でやった要領ですからね。enuさんなら難しくないはずですよ。p(・∩・)qガンバレ!
>そっかー。yozoさんに教えてもらえばいいんだーーー。
OK!遠慮なくいつでもいいですよ♪
>やってみたいと思っていることはたくさんあるんだよなーー。
BlogPet背景ランダム表示ですね。ここのカテゴリーにありますよ。
いつでも読んでみてねー♪もちろんその記事にわからないことを質問してくださいね。たくさん参考になるコメントもあるはずですよ。
>でもいいんだ。少しずつやっていければいいんだよねー。
>わからないときは教えてください!!!
はい♪少しずつ、のんびりやりましょう♪わからなければもちろん
いつでも聞いてくださいね♪~~~ヾ(〃^∇^)o ファイトォー!!  

コメント

こんばんわ はじめまして。komineと申します。
ずっと タイトルの背景に画像を入れたいと思っていましたぁ~。
とっても参考になりました。トライしてみますね。
また、ご訪問させていただきます。

コメント

>komineさん、おはよーございまっす♪いらっしゃいませー♪
>ずっと タイトルの背景に画像を入れたいと思っていましたぁ~。
>とっても参考になりました。トライしてみますね。
お時間のあるときにでも、じっくりとりくんでみてくださいね。
というよりも、どの画像を背景にしたいのか?というのが
最も時間のかかることだと思いますよ。その画像を設定するだけなら
すぐにできますからね。頑張ってみてくださいませ♪(゚ー゚)(。_。)ウンウン

コメント

yozoさんこんにちわ
早速トライしてみましたぁ~
タイトル背景に画像ハリハリできました
有難うございました。
メモ帳増設もとっても気になるし・・・
プルダウンも気になるぅ~
少しずつ改造にトライしてみます

コメント

>komineさん、こんにちはー♪
>早速トライしてみましたぁ~
>タイトル背景に画像ハリハリできました 有難うございました。
できましたか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
素敵なタイトルになりましたね♪(゚ー゚)(。_。)ウンウン
>メモ帳増設もとっても気になるし・・・プルダウンも気になるぅ~
>少しずつ改造にトライしてみます
そうですね。一つずつトライしてみてくださいね。
そのうち、簡単になってきますよ。CSSに見慣れてきますからね。
そうなれば自由自在に触れるようになってきますよ!(*^-゚)vィェィ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。