ワードプレスサイトでレイアウトが突然崩れたらタグの閉じ忘れを調べ、もし閉じ忘れが合ったらそこを修正するのがレイアウト修正に有効です。その方法を解説いたします。
タグの閉じ忘れでレイアウトが崩れる理由
HTMLは基本的にはタグでコンテンツを挟んでその要素の意味やデザインを指定する記載方法です。
<div> 内容 </div> ←閉じタグが必要 <div> 内容２ </div> ←閉じタグが必要 <img src ="image.jpg" /> ←閉じタグを省略可能
よくあるのが省略できない閉じタグが閉じられていないという記載ミスです。この場合タグの閉じ忘れ以下のすべてのコンテンツ(サイドバー等も含め)がその要素の中に入っているとブラウザーが解釈してしまうため、レイアウトが大きく崩れることがございます。
<div> 内容 ←閉じタグが不足 <div> 内容２ </div> <img src ="image.jpg" />
タグの閉じ忘れを調べて修正
タグ閉じ忘れチェッカーという便利なツールを提供されているサイトがございます。
https://tool-place.net/tools/tagcheck/
このサイトでレイアウト崩れのあるページのURLもしくはHTMLコードを入力してチェックいたします。
こちらの事例のHTMLでは、136 行目divタグが閉じられていないのが分かります。
DIVタグの閉じ忘れの修正方法
<div> 内容 ←閉じタグが不足 <div> 内容２ </div> <img src ="image.jpg" />
上記のような閉じ忘れでは適切な位置にDIVの閉じタグを追加することで修正可能です。
<div> 内容 </div> <div> 内容２ </div> <img src ="image.jpg" />
しかし複雑な構造のHTMLではどこからどこまでをDIVで囲めばよいのかの範囲が分からない場合もございます。
この場合とりあえずすぐそばで閉じてみるという手もございます。
<div></div>←すぐそばに閉じタグを追加
もしくはその始まりのタグをとってみてHTML構造の閉じタグ忘れがなくなるかお試しください。
ただこの方法は場当たり的で、問題を解決できない場合もございます。
こういった場合は、HTMLの成形サイトでHTMLを成形してみて、一つ一つのタグをどこからどこまで囲むのが適切かを調べながら、手作業で地道にタグの閉じ忘れを修正していく形になります。
ご参考になりましたら幸いです。
