CSSの編集で背下の3点の背景を変更してみました。
- ページの背景に画像を使ってみる♪
- ブログタイトルの背景に画像を使ってみる♪
- ブログの背景に画像を使ってみる♪
- まず、使用したい画像をアップロードします。
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を貼り付けるだけです。{ }の中のコードは使用しているスキンによって変わります。1回ずつ、「プレビュー」で確認するようにしましょう。編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
- ページの背景に画像を使ってみる♪の場合
BODY{
MARGIN : 0PX;
PADDING : 0PX;
background: url("http://pds.exblog.~省略~/□☆○1.gif");
background-repeat:repeat;
}
- ブログタイトルの背景に画像を使ってみる♪の場合
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*』よりダウンロードさせていただきました。
- 「プレビュー」で確認してから、「保存」してください。
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
←ぼちっと応援お願いします♪ m(_ _)m