1.間違っている頁をSafariで表示
2.ブラウザ画面内でControlキー+クリックで
「要素の詳細を表示」を選択
↓
するとこのような画面になる
「要素の詳細を表示」を選択
↓
するとこのような画面になる
3.今回の例の修正したい箇所は<address>〜</address>の部分の
背景が出ていない事なのでコードの左にある三角をクリックして開き▼
<address>〜</address>の部分を探す
4.<address>〜</address>の部分を表示した際に
右下の項目から {} =スタイルを選んで
「スタイル・ルール」を表示する
右下の項目から {} =スタイルを選んで
「スタイル・ルール」を表示する
5.今回は背景が表示されていないので
ここで見ないといけないのは
の行。試しに↑この青文字の部分をクリックしてみると
↓
このようになる。
↓
このようになる。
「これは画像が表示できない」「そのURLには画像が存在しない」
という表示。つまり、URLが間違っています。
URLが間違っている事がわかったので(画面はfc2のスペースを契約している場合)、
修正するために青い文字の部分をダブルクリック
http://自分のURL/kadaisite/img/bk_footer.png
は、index.htmlからみて１つ上の階層なので
url(../../img/bk_footer.png)ではなく
url(../img/bk_footer.png)です。
[これは相対パスと階層の考え方を理解していないとなおせません。]
WEB 第５回 5/12 を思い出しましょう。
つまり、../が１つ多いので消します。
(../を1つ消す= http://自分のURL/img/bk_footer.pngを
http://自分のURL/kadaisite/img/bk_footer.png
(../を1つ消す= http://自分のURL/img/bk_footer.pngを
http://自分のURL/kadaisite/img/bk_footer.png
にするのと同じことになります)
すると
画像が正しく表示されます↓
画像が正しく表示されます↓
背景画像がSafari上にも正しく表示されます
../が一つ多かったときの画面↓と比べてみましょう
修正箇所がzakka.cssの137行目だとわかったので
Dreamweaverを使ってその部分のurlを
url(../img/bk_footer.png)に修正しましょう。