背景画像の設定

for:malishさん
time:2008/09/05

質問

テンプレダークレッドを使用しているのですが、背景画像を差し替えると表示されません。
CSSを全コピーして、画像urlのみを変更しています。
直接画像アドレス打つと表示されるので、画像の問題ではないと思うんですが><
最初はFirefoxのみで画像確認出来、他ブラウザでは反映されていないので、色々弄っていたんですが、最終的にFirefoxでも表示されなくなってしまいました。
ですので、テンプレ自体を選択しなおして再度挑戦してみたのですが全く反映しませんでした><



前説

「背景画像」というのが,ヘッダの背景なのか,或いはページ全体の背景なのか,よく分かりませんが,こちらで試したところ,ヘッダの場合はURLを変更するだけで画像が表示されるようなので,ここではページ全体の背景を指すものとして説明します。
このデザインでは,背景(background, background-color)がそれぞれの場所(例:header, mainpage, 等)ごとに設定されているため,それらの内のどこか1ヶ所だけ変更してもダメなようで,全ての箇所を設定変更する必要があるようです(メンドくせー)。


手順1

先ず,CSSのテンプレを「メモ帳」にコピペします。そして「メモ帳」のメニュー・バー「編集」>「検索」を利用して「background」で検索し,何箇所かあるその値を空欄にしていってください。その場合,「backgroud-color」もそれに該当します。

【例】
〈テンプレ〉
background: #000;
background-color: #000;

〈変更後〉
background: ;
background-color: ;

※注意1
CSSテンプレの下の方にある「/*差分表示*/」「/*検索結果*/」のbackgroundの値は変更する必要はありません。
※注意2
CSSテンプレの中の,
ul li{
background:~~;
…
}
の箇所は,変更すると箇条書きの表示に影響しますので,画面全体の背景をデフォルトの黒色のままにする場合は弄らず,そのままにしておいた方が楽です。
しかし,背景を黒色 以外 に指定する場合は,逆に箇条書きのリスト・アイコンだけが浮いてしまい変なので,
(例)「背景=ピンク」の場合

テンプレの「ul」「ul li」「ol li」の部分をごっそり下のように書き換えてください。
ul,
ol
{
margin: 0px;
padding: 0px 0px 0px 20px;
}

ul li
{
background: ;
margin: 0px;
padding: 0px;
line-height: 200%;
}

ol li
{
margin: 0px;
padding: 0px;
line-height: 1.5;
}


手順2

次に,上で編集したテンプレの 後に ,以下の記述を追加します。
ここで,「url()」に画像の場所を記入し,かつ上の「※注意2」でも少し触れた,画面の背景を記入します。ここではデフォルトの黒色のままにしてあります。
body
{
background: url() no-repeat #000000;
}

#header h2
{
color: #FFFFFF;
}

#header a,
#header a:link,
#header a:visited,
#header a:hover,
#header a:active
{
color: #FFFFFF;
}


手順3

最後に,「CSSカスタマイズ」の「ユーザ定義CSS」に,上のメモ帳の記述を全てコピペして「変更する」ボタンを押して確定させればオケーです。