ローカルでは正常なレイアウトがWEBでは崩れます。

質問

HP作成超初心者の超初歩的な質問ですが、お尋ねいたします。ホームページビルダーで作成しておりますが、既存のファイルを修正してアップし直したところ、ローカルでは正常なであったレイアウトがWEBにアップすると崩れます。https://kasuri-ikat.com内の「ブログ」リストページkasuri-ikat.com/posts/post_archive.htmlが崩れてしまいました。ローカルでは正常なレイアウトの「ブログ」も画像　http://kasuri-ikat.com/kasuri-blog.jpg　にしてアップしております。
HTMLもCCSもよく分かりませぬ素人ですが、どうすれば正常なレイアウトに戻るか、アドバイスいただければと思いまして、質問させていただきます。よろしくお願いいたします。

回答No.3

4017B · ベストアンサー

念の為、当該ファイル(post_archive.html)をDLして自分のローカルPC上で開いてブラウザ表示させてみたところ、そのままでは表示が崩れました。そこで表示が崩れていないほかのページに適用されているCSSファイルを別途にDLし、先の回答に習い修正してみたところ画像ファイル以外は正常に表示される様になりました。従って前述の通り、単純なCSSファイルへのリンク先URLの指定ミスで間違い無いです。

正常に表示されている他ページに適用されているCSSファイルは…

- https://kasuri-ikat.com/style.css

～になっているので、表示が崩れているページのCSSファイルへのリンク先URLを正しく修正すれば問題は改善すると思います。とりあえず…

<link rel="stylesheet" type="text/css" href="https://kasuri-ikat.com/style.css">

～みたいに「絶対URL表記」の形式で記述して置けば確実に正常に表示されると思います。ただし絶対URL表記にした場合、web上にアップロードしたファイルの場合は正常に表示されますが、逆にローカルPC上で開くと表示が変になる場合があります。

＞ローカルでも表示が…
初心者が使うローカルPC上で簡単web制作ソフトみたいなヤツは、マウスでドラッグするだけで画像を貼り付けたり出来て便利なんですが…。結局、webページは最終的には全てweb上のサーバにアップロードしてブラウザから不特定多数の閲覧者が利用するモノなので。その手のソフトを使ってwebページを作ると、内部のHTMLコードに記述されたURLが "製作者自身のローカルPCでのHDD上でのファイルパス" になっているので、だから日本語URLになってたり、本番のweb環境に存在しないおかしなURLになっていたりします。

中級者以上であれば慣れているので、仮にローカルPC上ではweb制作ソフトを使っていたとしても、本番のweb環境にアップロードする際に一律にリンクURL等を置換処理して本番環境のURLに合わせてからアップロードするので問題無い場合が多いのですが…まあこれはweb制作初心者あるあるなので誰もが一度は通る道です。1回、間違って置けば、次回からは「ああ、あれか」と思い当たる様になり、自力で解決出来る事が1つずつ増えて行きます。

補足

2度目のご回答にもすぐさまお礼を申し述べましたが、本日（12/23）本サイトを再訪いたしましたところ、そのお礼コメントがどこにも見当たりません。なぜ消えているのか、あるいは別のページにあるのかもしれませんが、あらためてお礼申し上げます。ほんとうに詳しくご丁寧にご教示いただきまして、素人のわたしにもレイアウトの崩れを修正することができました。ありがとうございます。まだまだ問題が出てくるかも分かりませんが、今後ともよろしくお願いいたします。

回答No.2

kimamaoyaji

グーグルクロム、マイクロソフトエッジ、ファイヤーフォックスで見る限り正常な画像と同じです。

回答No.1

4017B

単純なCSSファイルへのリンク先URLの指定ミスですね。表示がおかしくなっているページの post_archive.html の上から10行目の部分の…

<link rel="stylesheet" type="text/css" href="ブログ _ 絣ラボ_files/style.css">

～となっているのを、

<link rel="stylesheet" type="text/css" href="../style.css">

～みたいに書き直してから再保存し、再度web上に上書きアップロードし直してみてください。

補足

すぐさまご回答いただきましてありがとうございます。確かに日本語表記はおかしいですね。ご指示のとおり修正しましたｔころ、ローカルでもレイアウトが崩れました。なぜでしょうか。ご面倒をおかけいたしますが、よろしくお願いいたします。