CSSについてですが、かなりの初心者です。

質問

CSSについてですが、かなりの初心者です。

HPのテンプレートをダウンロードして使用しようとしたのですが、
サーバーにアップしても、外部CSSから読み込みができません。

エラーチェックをしたのですが、修正の箇所がよくわかりません。
解決方法を教えて下さい。

ダウンロードした素材は下記のURLのものです。
http://pondt.com/data/template_10/

内容が文字数を超えて掲載できないので、
サイト内でご確認頂ければと思います。

宜しくお願い致します。

回答No.2

qualheart · ベストアンサー

CSSの中にメニューのボタン画像は以下のように指定されてます。

#head_menu ul li.a01 a{ background:url(img/menu/a01.jpg) no-repeat;}
#head_menu ul li.a01 a:hover{ background:url(img/menu/a01_on.jpg) no-repeat;}
#head_menu ul li.a02 a{ background:url(img/menu/a02.jpg) no-repeat;}
#head_menu ul li.a02 a:hover{ background:url(img/menu/a02_on.jpg) no-repeat;}
#head_menu ul li.a03 a{ background:url(img/menu/a03.jpg) no-repeat;}
#head_menu ul li.a03 a:hover{ background:url(img/menu/a03_on.jpg) no-repeat;}
#head_menu ul li.a04 a{ background:url(img/menu/a04.jpg) no-repeat;}
#head_menu ul li.a04 a:hover{ background:url(img/menu/a04_on.jpg) no-repeat;}
#head_menu ul li.a05 a{ background:url(img/menu/a05.jpg) no-repeat;}
#head_menu ul li.a05 a:hover{ background:url(img/menu/a05_on.jpg) no-repeat;}

これらの画像はちゃんと「img/menu/」のディレクトリにアップされてますか？
画像が見つからないから、画像が表示されないだけじゃないでしょうか？

確認してみてください。

お礼

ありがとうございます！
うまく表示されました！

フォルダ名が違う名前でした。

回答No.1

qualheart

確認ですが、CSSファイルもダウンロードし、一緒にサーバーにアップしましたか？
default.cssというファイルです。

<!-- 外部CSS読み込み -->
<link href="default.css" rel="stylesheet" type="text/css" />
<!-- /ここまで -->

↑という箇所があると思いますが、この書き方だと、CSSファイルはアップしたHTMLファイルと同じフォルダにある必要があります。もしサーバーにdefault.cssをアップしていないのであれば、CSSファイルが参照できないのでもちろんレイアウトは崩れます。

解決策としては、default.cssもダウンロードして一緒にアップするか、もしくはdefault.cssのリンクパスを、"http://pondt.com/data/template_10/default.css"に変更するかどちらかです。

ご参考まで。

お礼

さっそくのご回答ありがとうございます。

default.cssというファイルも一緒にアップしたのですが、
CSSの部分だけ透明で表示されています。

ボタンの色が透明です。

リンクパスの変更をしたほうが確実でしょうか？