ローカルでは正常なレイアウトがWEBで崩れる原因と解決方法

前へ 次へ
このQ&Aのポイント
  • HP作成初心者がホームページビルダーで作成したファイルを修正してアップした際、ローカルでは正常なレイアウトだったがWEBでは崩れる現象が発生しました。
  • 具体的な例として、https://kasuri-ikat.com内の「ブログ」リストページ（kasuri-ikat.com/posts/post_archive.html）が崩れてしまいました。
  • HTMLやCSSの知識が乏しく、正常なレイアウトに戻す方法が分からない状況です。アドバイスをいただけると幸いです。
回答を見る
  • ベストアンサー

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

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

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1305/1776)
回答No.3

念の為、当該ファイル(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つずつ増えて行きます。

uuu-pp
質問者

補足

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

その他の回答 (2)

回答No.2

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

  • 4017B
  • ベストアンサー率73% (1305/1776)
回答No.1

単純な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上に上書きアップロードし直してみてください。

uuu-pp
質問者

補足

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

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • Ｏｋｗｅｂのレイアウトの崩れ。。。

    前から思っていたのですが、テーブルのレイアウトになるＨＰがたまにあります。 http://honobono.s19.xrea.com/5.jpg ブログとか多いです。 私はＨＰビルダーのレイアウトモード？だっけ、ああいった作成ソフトのせいだと思っていたのですが・・・。 ＩＥは、6.0で、ＯＳはＷｉｎ2000です。 同じ現象の人や、対処法があれば、よろしくお願いします。

  • HPの画像が正常に表示されません

    ホームページビルダーで制作したデータを yahooジオシティーにアップしましたが、画像が 正常に表示されません。×印ではありません。 画像に変な色がついたり半分がずれてしまったり とにかく正常ではないのです。 画像の拡張子はjpgにしていますが、RGBとCMYKは関係は あるのでしょうか？ ホームページビルダー上では正常なのに　FTPサーバーに アップしたとたんに　画像が壊れてしまっています。 原因を教えてください。よろしくお願いいたします。

  • 標準モードでのレイアウトを固定したい。

    初めまして、教えてください。 ホームページビルダー11で作成しています。 ＨＰを標準モードで作成しているのですが、画面がウインドーの大きさによって自動調節してしまいます。 色々調べてみたのですが、伸縮サイトと固定サイトがあることも知りました。参照http://www.hpseikou.com/junbi/reiaut.html 大体のサイトは固定レイアウトサイトが多いと思いますが、ビルダーの標準モードでレイアウトを固定するにはどうしたらいいでしょう。 ご指導お願い致します。

  • ローカルユーザでは正常動作なのに、ドメインユーザでは異常に動作が遅い

    困っています・・・。。 　職場でWindows2003ServerStandardを使っています。 　ドメイン上のIDを、ローカルのAdministratorsグループに入れて、ログインし、テキストファイル等を新規作成しようとすると、画面がフリーズしたかのように時計マークで止まってしまいます。例えば、ログイン後に画面上の何もない場所を右クリックして‘テキストドキュメント’‘フォルダ’‘ショートカット’等を選択して新規作成ができますが、選択表示のポップアップが表示される直前に時計マークのまま止まり、開くまで3,4分も掛かります。 　反面、なぜかローカルAdministratorや、他のローカルユーザは、この現象にならず、通常通りの操作が可能です。 分かっている範囲での事実を箇条書きにします。 ・ドメイン上のIDは、３つ試したが、一つは、今回新規で作成したユーザ。1つは、既存のドメインアドミニストレータ権限を持つユーザ。もう一つは通常のユーザ権限を持つユーザ。３つとも今回のサーバのローカルAdministratorsグループに所属している。（がどれも上記の現象） ・ローカルユーザで試したユーザは、（ローカルの）administrator,新規作成のユーザ1つ,既存ユーザ1つ。３つのユーザとも正常動作。 ・物理ディスクの障害はない ・イベントヴューア上、疑わしき項目はない ・リモートデスクトップ等のリモート操作ではなく、ローカル利用での状況 　このサーバは、仮想や、ストレージにＮＡＳ，ファイバチャネル等の特別なシステムは使っておらず、単体サーバの中でＣドライブや、Ｅドライブ等をパーティションで分けて使っています。 　対応方法について、推測でも構いませんので、よろしくお願いします。

  • レイアウトが崩れる・・・

    いつもお世話になってます。 wordpressでギャラリーを使った記事を書いたのですが、３枚以上写真を追加してしまうとレイアウトが崩れてしまいます。 参照ページ：http://blackartcard.com/?p=45 どうすれば何枚追加しても崩れずに追加できるでしょうか？ single.phpは以下です。 <?php get_header(); ?> <!-- Contents --> <div id="contents"> <div id="main"> <div class="breadcrumbs"> <?php if(function_exists('bcn_display')) bcn_display();?> </div> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post"> <h1 class="title"><?php the_title(); ?></h1> <div class="blog_info"> <ul> <li class="cal"><?php the_time('Y年m月d日') ?></li> </ul> <br class="clear" /> </div> <div class="kiji"><?php the_content(); ?></div> </div><!-- /.post --> <?php endwhile; ?> <?php else : ?> <h2 class="title">記事が見つかりませんでした。</h2> <p>検索で見つかるかもしれません。</p><br /> <?php get_search_form(); ?> <?php endif; ?> </div><!-- /#main --> </div></div> <?php get_footer(); ?> 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • MovableTypeについて初心者的な質問です。

    MovableTypeでブログを作って書いているのですが それとは別に新しくブログを作成しようとおもうのですが、 新しいウェブログの作成　を選ぶと、 ローカル・サイト・パスと ローカル・アーカイブ・パスと アーカイブのURL　が 今あるブログと同じパスを指しているのですが、このまま作成 しても良いのでしょうか？ 今あるブログのアーカイブと混ざってしまうといった事は、ないでしょうか？ 上記のように思ったので、あえてパスを変更して作成しようとしたところ、 ローカル・アーカイブ・パス　への書き込みに失敗しました。 ファイル　ローカル・アーカイブ・パス　を開けません　　とエラーが出ます。 ↓これ /usr/local/apache/htdocs/mt/****/archives.html.new への書き込みに失敗しました: ファイル「/usr/local/apache/htdocs/mt/****/archives.html.new」を開けません: No such file or directory ■設定では各設定パスに****をつけてみました。↓ ウェブログの名前　：　**** ローカル・サイト・パス: /usr/local/apache/htdocs/mt/****/ サイトのURL:　http://www.xxxxxxxxx.jp/****/ ローカル・アーカイブ・パス:/usr/local/apache/htdocs/mt/****/archives アーカイブのURL:http://www.xxxxxxxxx.jp/****/archives/ ■現在すでにあるブログの設定 ウェブログの名前　：　○○○○○○BLOG ローカル・サイト・パス: /usr/local/apache/htdocs/mt サイトのURL:　http://www.xxxxxxxxx.jp/○○○○/ ローカル・アーカイブ・パス:/usr/local/apache/htdocs/mt/archives アーカイブのURL:http://www.xxxxxxxxx.jp/archives/ です。 単純にパスに****をつけたらよいというものではないのでしょうか？ 教えてください！！

  • ブログのレイアウトを両サイドバー三段組にしたいのですが・・・

    こんばんはlivedoorブログのレイアウトに関して質問をさせてください。 現在自分のブログのレイアウトを両サイドバーの三段組にしようと思っております。毎日コミュニケーションズの『ポータル、ブロバイダ別　blogデザインカスタマイズ辞典』には document.write('</div><divide="links2">'); というタグを作成し、side2.jsの名でそれを保存し、アップロードするように書いてあります。しかしlivedoorブログでアップロード可能なファイルは GIF, JPG, PNG, BMP のみらしく、何度試みてもエラーが発生してしまうのです。それとも僕のやり方が間違っているのでしょうか？ ご回答はお時間がある時で結構です。よろしくお願いします。

  • レイアウト枠のせい？配置したとおりに反映されません。

    今回初めてビルダーの「標準モード」でレイアウト枠を使用してデザインしました。そもそもレイアウト枠はページのデザインの構成やら配置などを決定するものだと思っていますが、違うのでしょうか？ 作成したページをＵＰすると思うようにいきません。 レイアウト枠にいくつか画像を挿入したのですが、それも位置がバラバラに表示されてしまし、レイアウト枠内に入れた文字などはバツがついいてみれません。 これはどうしてでしょうか？ちなみにちなみに少々不規則に配置したデザインなんです。

  • ローカルナビゲーションのマークアップ

    ローカルナビゲーションについて質問です。 ローカルナビゲーションの部分を「ｈ２」としてマークアップすべく <div class="localNav"> <h2>ローカルナビゲーション</h2> <ul> <li>・・・・・</li> <li>＠＠＠＠＠</li> <li>ＮＮＮＮＮ</li> </ul></div> （http://bebow6.blogspot.com/2009/04/blog-post_09.htmlを参考にしました） としたのですが、<h2　～　/h2>の間にある「ローカルナビゲーション」というのが、ブラウザーに文字として表示されてしまいます。 これを非表示にするにはどうすればいいでしょうか？　スタイルシートをどのようにいじればよいでしょうか？　よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ホームページビルダーｖ11で作成したホームページをバージョン9で編集しようとするとレイアウトが崩れてしまいました。

    ホームページビルダーを使ってホームページを作成しています。先日、友人に頼まれ、ホームページを修正しようとしたところ、編集画面でレイアウトが崩れてしまっています。しかし、プレビュー画面では正常に見れています。私はバージョン９を使用していて、友人はバージョン１１を使用しています。なぜこんなことが起こるのでしょうか？ ※ちなみに、ページレイアウトはテーブルではなく、スタイルシートで構成しています。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する