人気ブログランキング | 話題のタグを見る
BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
トータル今日昨日 Since 29 November '05
ここのブログの記事をご覧のみなさんへ
  ここのブログを見に来てくださってありがとうございます♪m(_ _)m 勝手ながら、ここのブログは2006/08/02に
新ブログ『yozoの気が向いたと記2.0』に、非公開コメントを除く、すべての記事、及びコメント、トラックバックを
移転しております。また、移転以降、スパム対策のため、ここのコメント・トラックバックは受け付けておりません。
ご意見・ご感想は、お手数ですが、新ブログの同じタイトルの記事にて、お聞かせくだされば幸いです。m(_ _)m
新ブログ→yozoの気が向いたと記2.0 http://yozoblog2.blog63.fc2.com/
yozoの気が向いたと記
yozoの気が向いたと記2.0
ぽちっとお願いします♪

yozoの関連リンク

BlogPetのお友達

おすすめブログ紹介

BlogPet背景作家のみなさん

素材屋のみなさん

おすすめBlogGroup


BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
背景を変更する♪
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

by yoblog | 2006-04-29 20:16 | スキン編集 |TOP▲
<< 言葉バトン♪ |▲TOPにもどる▲| 端午の節句に何を食べますか? >>
トップ
2006/08/02 より、『yozoの気が向いたと記2.0』に移転しました。

新ブログはコチラです。
↓↓↓↓↓↓↓
yozoの気が向いたと記2.0

「うさも」が書いたBlogです。
次女うさ「うさみ」もいますよ♪

↓↓↓↓↓↓↓
うさもの気が向いたと記

末うさ「うさめ」のBlogです♪
↓↓↓↓↓↓↓
yozoのおすすめ本


人気ブログランキング - yozoの気が向いたと記
検索
カテゴリ
フォロー中のブログ
以前の記事
最新のトラックバック
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧