表示レイアウトが崩れる - WaniTen|ワニ天|わにてん

走るワニ上
WebSiteX5でHP制作!
コンテンツに移動します
【最終更新:2023年6月8日】
【初回公開:2023年6月8日】
表示レイアウトが崩れる - WebSite X5 Evo

  • サイト更新の為、コンテンツを弄っていたら、いつの間にか表示レイアウトが崩れていた
  • 試した対応
  • 今回の(お粗末な)原因
  • 対応策

結局、
 原因は、HTMLコードの修正漏れ(削除漏れ)
『HTMLコード反映不具合』記事
HTMLコード表示反映不具合記事リンク
『フォント不明エラー』記事
フォント不明エラー記事リンク
『検索時間超過エラー』記事
検索時間超過エラー記事リンク

予期せぬ表示レイアウトの崩れ

 WebSite X5 Evoでコンテンツ修正を繰り返しているうちに、
 (気づくと)
 下から2行目のオブジェクトの表示レイアウトが崩れ
 拡張したような表示に成っていました。ひどく驚く男アイコン

 基本的に、変更後はプレビューで確認することは多いのですが、
 画面一番下だったので見落としていました。がっくりする男アイコン


 レイアウト崩れのイメージ:

  【正常なレイアウト】
  正常なレイアウト画像

  【崩れたレイアウト】
  崩れたレイアウト画像

試みた解決策

 1. 3つのオブジェクト(上・自分・下)の『マージン』を疑う

  2つのオブジェクト間の空白が広くなっていることから、
  知らぬ間に、『マージン』の設定が異常値になった可能性を考え
  設定し直してみました。
  (『Step 4:ページ』-『ページの作成』のマージン設定)

  ⇒ 問題解決せず 


 2. 該当オブジェクトの『拡張設定』を疑う

  左右に拡張されたレイアウトから、
  知らぬ間に、オブジェクトの『拡張設定』の設定が異常値になった可能性を考え
  設定し直してみました。
  (『Step 4:ページ』-『ページの作成』のオブジェクトの拡張設定)


 3. 該当ページの『行フォーマット』の『拡張設定』を疑う

  左右に拡張されたレイアウトから、
  知らぬ間に、『行フォーマット』の『拡張設定』設定が異常値になった可能性を考え
  設定し直してみました。
  (『Step 4:ページ』-『ページの作成』の行フォーマットの拡張設定)

  ⇒ 問題解決せず 


 4. 該当ページの『内部データ破損』を疑う

  該当ページのデータ自体が破損した可能性を考え、
  まず、該当ページの複製を作成後、
  該当ページから全てのオブジェクトを削除し、
  削除可能な全ての行・列を削除してから、
  複製したページから対応するオブジェクトをコピーしてみました。

  ⇒ 問題解決せず 


 4. プロジェクトファイル自体の破損を疑う

  プロジェクトのファイル自体の破損の可能性を考え、
  原因究明に一定の時間を使ったので、
  潔く、数時間前に作成したバックアップデータから、
  編集し直すことにしました。

  そして、愚かにも、最新のデータは潔く削除しました。張り切る男アイコン

  ⇒ (原因究明ならず)作業再開 

③今回の原因

 その後は、プレビューで一番下に異常がないかしっかり見ながら
 バックアップデータから編集し直しを行っていたところ、
 程なくして、同じ状況になりました。

 しかし、『正常な状態』~『異常発生』までに行った作業が少なかったので、
 今回は、直ぐに、原因に気付きました!唖然とする男アイコン

 原因は:

  HTMLコードの修正漏れ(削除漏れ)
  要は、行の最後部の『</div>』の削除漏れ

 でした。

 オブジェクト内にアンカーを設置する為のHTMLコードが不要に成ったので
 先頭の『<div id="●●●●">』の部分を削除した時に、
 最後部の『</div>』を削除し忘れていたという
 なんとも、お粗末な原因でした。

 最新のデータ削除しちゃったんですけど!!がっくりする男アイコン中サイズ

④今後の対応策

 テキストオブジェクト(テキストオブジェクトアイコンで、HTMLコードを有効にして、
 HTMLコードを記入する(記入してある)時は、

 追加・修正・削除の都度、プレビューによる確認を徹底する。

 そして、勢いに任せて、ファイルを削除しない様にする。
 (ファイルを削除してしまったショックでこの記事が書けたわけですが)

『HTMLコード反映不具合』記事
HTMLコード表示反映不具合記事リンク
『検索時間超過エラー』記事
検索時間超過エラー記事リンク
『フォント不明エラー』記事
フォント不明エラー記事リンク
コンテンツに戻る