テンプレートの背景について

[新着] Webテンプレートを仮オープンしました

0   名前： 栗野舜 ： 2007/05/02（水） 22:17  ID:.edsIx6m sub-.G
お久しぶりの方。はじめましての方。
質問です。

テンプレート用のサイトでダウンロードをしました。


中の灰色の背景と「bg」と言う名の画像を消したいのですがわかりません。
<iframe src="top.html"とあるので全体とtopのタグを乗せておきます。



全体↓
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">

<style type="text/css">
<!--
body{background-image:url('img/bg2.gif');}
-->
</style>

<base target="top">
</head>
<body scroll="no">
<div align="center">
<div id="wrap">

<!-- ********* 左側 ******** -->
<div id="left">
<h1></h1>

<h2>FANFICTION</h2>
<dl>
</div>

<!-- ********* 右側 ******** -->
<div id="right">
<iframe src="top.html" name="top" frameborder="0" width="100%" height="100%" style="border:none;overflow-x:hidden;" scrolling="yes" allowtransparency="true"></iframe>
</div>

<!-- ********* フッター ******** -->
<div id="foot">
<div id="menu">
<ul>
<li><a href="">ABOUT</a></li>

</ul>
</div>
</div>

</div>
</div>
</body>
</html>

たぶん問題があると思われるページ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
<link rel="STYLESHEET" href="style.css" type="text/css">
</head>
<body>
<h3>LAST UP</h3>
<p>8/23 - 配布開始</p>

<h3>ABOUT</h3>
<p>
「Void Symphony」をダウンロード頂きありがとうございました。
アイフレーム使用してます。タグがメニューのところだけちょっと複雑かも、しれません。狭いのでテキストサイト推奨です。もちろんカスタマイズ次第ではイラストサイトでもお使いいただけるかとは思います。
</p>
<div style="margin-top:1000px;"></div>
<p>
</p>
</body>
</html>


量が多くてすみません。よろしくおねがいします。
1   名前： Z ◆XTzyosZXcL ： 2007/05/02（水） 22:17  ID:tWsRhjqj sub-Cl
「消す」だけであれば、「全体」ページの
<style type="text/css">
<!--
body{background-image:url('img/bg2.gif');}
-->
</style>

を削除すれば事足りると思います。

HTML4.01仕様書該当部分（style要素）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.3
http://www.w3.org/TR/html401/present/styles.html#h-14.2.3

仕様書の読み方などHTMLの基本：
http://www.kanzaki.com/works/2001/pub/wsd01.html

CSSリファレンス該当部分（色と背景）：
http://hp.vector.co.jp/authors/VA022006/css/colors.html

　なお、「たぶん問題があると思われるページ」で参照している「style.css」の中身がどうなっているかご質問では明らかではありませんが、ご質問内容だけから判断するならば「無関係」です。
2   名前： Z ◆XTzyosZXcL ： 2007/05/02（水） 22:17  ID:tWsRhjqj sub-Cl
　あ、「中の灰色の背景」という単語を見落としていました。済みません。

「top.html」（たぶん問題があると思われるページ（？））で指定している「style.css」の中身も確認してください。背景関係の記述があれば、「中の灰色の背景」を消すにはそこの記述を修正することになるかと思います（資料は>>1で提示済ですので省略します）。
3   名前： 栗野舜 ： 2007/05/02（水） 22:17  ID:0O9CHfu7 sub-.G
ありがとうございます。

けれど、前に試したのですが全体ページの
<style type="text/css">
<!--
body{background-image:url('img/bg2.gif');}
-->
</style>
を消すと「bg2」と言う別の画像が消えてしまいます。


以下「style.css」の中身です。

*{
margin:0;
padding:0;
border:none;
font-family:Verdana;
font-size:10px;
color:#666;
line-height:1.5em;
}


body{
margin:0px;
padding:0px;
background-color:transparent;
scrollbar-face-color:#c4c5cd;
scrollbar-highlight-color:#c4c5cd;
scrollbar-track-color:#c4c5cd;
scrollbar-shadow-color:#c4c5cd;
scrollbar-3dlight-color:#c4c5cd;
scrollbar-arrow-color:#999;
scrollbar-darkshadow-color:#c4c5cd;
}

a{text-decoration:none;}
a:link,a:active,a:visited{color:#666;}
a:hover{color:#c4c5cd;}

br{line-height:normal;letter-spacing:normal;}

h1{font-size:20pt; color:#fff; font-family:"Century Gothic"; font-weight:normal;padding:5px;text-align:center;}
h2{font-size:11px;font-weight:normal;color:#0364bc;margin:10px 5px 0px 5px;}
h3{ font-size:10px; font-weight:normal; text-align:left;margin:10px 5px 0px 5px;color:#333;border-bottom:3px double #666;}

p{margin:5px 20px;color:#666;text-align:left;}

dl{margin:5px 5px;text-align:left;}
dt{padding:1px 0;font-size:10px;font-weight:bold;color:#333;}
dd{margin:0 0 0 10px;padding:1px 0 1px 10px;border-left:3px double #333;}

#wrap{
position:relative;
width:622px;
margin:0px auto;
text-align:left;
background:#c4c5cd url(img/bg.gif) left bottom no-repeat;
border:1px solid #eeedef;
border-width:0px 1px 1px 1px;
}
#left{
width:210px;
height:500px;
float:left;
overflow:auto;
}
#right{
width:410px;
height:500px;
float:right;
overflow:auto;
}
#foot{
position:relative;
width:100%;
clear:both;
}
#menu{padding:20px 0;text-align:right;}
#menu ul{
list-style-type:none;
padding:0.5em 0;
background-color:#000;
}
#menu li{ display:inline;}
#menu li a{ display:inline; text-decoration:none; margin:0 0.1em 0 0; padding:0.2em 1.4em;}
#menu li a:link,#menu li a:visited{ color:#fff;}
#menu li a:hover{background:url(img/a.gif) left center no-repeat;color:#d2ff00;}


4   名前： 匿名 ： 2007/05/02（水） 22:17  ID:RaS78dte sub-Cl
#wrap{
position:relative;
width:622px;
margin:0px auto;
text-align:left;
background:#c4c5cd url(img/bg.gif) left bottom no-repeat; /* ←ここ */
border:1px solid #eeedef;
border-width:0px 1px 1px 1px;
}
上記該当行にimg/bg.gifを設定している記述があります。ここを削除してください。

>1 >2 を参考に、すこしスタイルシートについて調べてみると自分でできるようになりますよ。
5   名前： Z ◆XTzyosZXcL ： 2007/05/02（水） 22:17  ID:tWsRhjqj sub-Cl
　bgとbg2は別物でしたか。失礼しました（やはり「style.css」の記述が影響していましたか）。

　さて、「中の灰色の背景」とは>>3でいうとどの部分となるのでしょうか？background-colorプロパティを指定しているのは数箇所あります（資料は>>1で提示済ですので省略します）ので、段落であればP要素に指定しているところ、そうではなくて本文全体ならばBODY要素に指定しているところを修正、ということになるかと思います。
　ただし、CSSの反映は優先順位次第ですから細かく指定すればするほどその順位に気をつけないと思った結果とならないのでご注意下さい。

参考・CSSの優先順位：
http://web.xii.jp/iec/css/intro/priority

余談・Webデザイン指針：
http://nekoshiki.fc2web.com/guidline/index.html

　なお、「テンプレート用のサイト」さんによっては規約に「無断改変を禁ずる」などの記述があるかもしれませんので、利用規約などが明示されていればそちらもご確認されることを薦めておきます（テンプレート作者への技術相談が多すぎるため「カスタマイズ代行は請け負いません、ご自分で勉強した上で作業してください」というような断り書きがされているところもあるようです）。
6   名前： Z ◆XTzyosZXcL ： 2007/05/02（水） 22:17  ID:tWsRhjqj sub-Cl
　それと、結局今回の内容はCSSについてどうこうという話になってしまいましたので、次回からは同様のご質問はスタイルシート質問板でしてくださるようお願いいたします。

掲示板のカテゴリー：
http://www.tagindex.com/bbs/note.html#h104
一覧へ戻る