スタイルシートのカスタマイズ方法 を教えて！！

質問

下記スタイルシートの花の絵の部分を自分のＣドライブ内に保存している画像に変更したいのですが、どのようにすればいいのでしょうか。

@charset "EUC-JP";

/* ###############################
▼▼基本　
#################################　*/
body
{
color: #6e625c;
background-color: #fff;
background-image: url("https://cart1.fc2.com/template/bouquet/image/bg.gif");
text-align: center;
margin: 0;
padding: 0;
bgcolor: #ffffff }
#BaseBlock
{
color: #6e625c;
font-size: 10px;
font-family: Osaka, "Verdana", "ＭＳ Ｐゴシック";
text-align: left;
margin: 0 auto;
padding: 0;
width: 863px }
a:link , a:active , a:visited
{
color: #c36;
text-decoration: none }
a:hover
{
color: #29a8a8;
text-decoration: underline }
br
{
letter-spacing: normal }

/* ###############################
▼▼ 先頭
#################################　*/
#HeadBlock
{
font-size: 10px;
font-family: Osaka,Verdana, "ＭＳ Ｐゴシック";
background-image: url("https://cart1.fc2.com/template/bouquet/image/bg-head.gif");
background-repeat: repeat-x;
background-position: 0 0;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 245px }
.HeadBlockA
{
background-image: url("https://cart1.fc2.com/template/bouquet/image/top-1.jpg");
text-align: right;
margin: 0 auto;
padding: 0;
width: 863px;
height: 46px }
.HeadBlockAtext
{
padding-top: 20px }
.HeadBlockB
{
background-image: url("https://cart1.fc2.com/template/bouquet/image/top-2.jpg");
text-align: right;
margin: 0 auto;
padding: 0;
width: 863px;
height: 138px }
.HeadBlockC
{
background-image: url("https://cart1.fc2.com/template/bouquet/image/top-3.jpg");
text-align: right;
margin: 0 auto;
padding: 0;
width: 863px;
height: 42px }
.ShopName
{
font-size: 20px;
font-family: Verdana, Osaka,"MS UI Gothic";
font-weight: bold;
margin: 0;
padding: 10px 0 0 0 }
.ShopName a:link , .ShopName a:active , .ShopName a:visited
{
color: #000;
text-decoration: none }
.ShopName a:hover
{
color: #dadada;
text-decoration: none }

「▼▼基本」の部分のURL（background-image: url("https://….jpg");）を変更するのでしょうか。
その際、「▼▼ 先頭」の部分のURL（background-image: url("https://….jpg");）は触らないでそのままでいいのでしょうか。
ずっと「▼▼ 先頭」の部分のURLを変更していましたが、全く反映されません。
Ｃドライブに入っている画像は「○○.jpg」と書けばいいのでしょうか。

回答No.2

friday2007

Ｃドライブのどこに画像を保存していますか？
それがわからないと正確な回答がしづらいです。
質問する際に、フォルダ構成をきちんと伝えると、いい回答が得られると思いますよ。

＞「▼▼基本」の部分のURL（background-image: url("https://….jpg");）を変更するのでしょうか。
＞その際、「▼▼ 先頭」の部分のURL（background-image: url("https://….jpg");）は触らないでその＞ままでいいのでしょうか。
＞ずっと「▼▼ 先頭」の部分のURLを変更していましたが、全く反映されません。
＞Ｃドライブに入っている画像は「○○.jpg」と書けばいいのでしょうか。

何とも言えません。
あなたがどの画像を反映したいのかが全くわからないからです。
このスタイルシートでは画像をたくさん参照していますが、それぞれ違った画像を参照しているんです。
スタイルシートの基礎はわかりますか？

ＣＳＳで画像を参照する例を書きます。
（あくまで例です）
Ｃドライブに「src」というフォルダを作ります。その中に以下のファイルを入れているとします。

・「css」フォルダをさらに作り、ＣＳＳファイルを保存しています。「common.css」とします。
・common.cssを参照しているHTMLファイル「index.html」とします。
・index.htmlに表示する画像は「image」フォルダに保存しています。

フォルダ構成はこうなっています。
Cドライブ/src/index.html
Cドライブ/src/css/common.css
Cドライブ/src/image/画像.jpg

上記構成の場合、common.cssに書く画像のＵＲＬは
background-image: url("../image/画像.jpg");
となります。

「../」の意味はわかりますか？
この記述の場合、cssフォルダの１つ上の階層のimageフォルダの中の「使いたい画像.jpg」を参照しています。

もし、あなたのパソコンのＣドライブの中の
ＨＴＭＬファイル、CSSファイル、画像が【全て同じフォルダに入っている】ならば、
background-image: url("画像.jpg");
となります。

ＣＳＳが全く解らず、どうしたらいいのかわからない状況ならば、
「ＨＴＭＬファイル、CSSファイル、画像が【全て同じフォルダに入っている】」が最もわかりやすいので、必要な画像を「ＣＳＳと同じフォルダ」に全部落としてみましょう。
で、https:// 　　　…　　　bouquet/までを全部消してＨＴＭＬファイルをブラウザで見てみましょう。
繰り返しますが、「background-image: url("画像.jpg");」という感じです。
画像が反映されませんか？

Ｎｏ．１さんが書かれている「とほほ」は大変有名で、大変分かり易いサイトです。
もし、上記の説明では全くわからなければ、こちらを一度ご覧になって勉強されてはいかがでしょうか。

回答No.1

Nayuta_X

参考まで、

とほほのスタイルシート入門（基礎知識）

http://www.tohoho-web.com/css/basic.htm

スタイルシート　で、検索して見てください。
参考になるものが、きっと　あると思います。