WordPressブログのレイアウトが崩た!そんな時は<div>タグを確認!!




HTMLタグの対応が間違っている

ブログ記事を投稿後、サイト全体のレイアウトがえらいことになってパニックになった場合、
まずはdivタグを確認しましょう。divタグはdivisionの略で「分割」「区切り」って意味なんです。
つまり、サイト内で分割されるべき場所が間違っている為レイアウトが崩れるわけです。
大体の原因はdivタグの対応の間違いでレイアウトが崩れます。
まず先に疑うところです。

CSSの調整がおかしい

divタグは確認したけど問題なかった場合、CSSの横幅やpadding、margin、borderの幅がはみ出ている可能性があります。レイアウトが崩れる直前にCSSの編集をしていた場合は疑ってみて下さい。

簡単な検証方法として試しにWordPressのstyle.cssの一番下に以下のソースをコピペして加えてみて下さい。

*{
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
*はすべての要素(タグ)に対して適用させるという意味です。
その為、もしかしたら予想外の箇所でレイアウトが変わってしまう可能性がありますが、とりあえず崩れている箇所が直ったように見えたら、padding、border、widthのどれかがレイアウトが崩れている原因となっている可能性があります。

box-sizing: border-boxについてはこちらの記事が参考になります。
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

挿入した画像が大きすぎる!

挿入した画像が大きすぎる場合もレイアウト崩れの原因になります。
試しに以下のCSSをコピペして直ったら画像の大きさが原因です。

img{
max-width:100% !important;
}

プラグインを停止してみる

プラグインが出力したHTMLなどでレイアウトが崩れている可能性もあります。
直前になにかプラグインをインストールしたのなら一回停止して、表示が直らないか確認します。

サイトのレイアウトが崩れた場合、その崩れ方がでかいほど焦ると思います。
僕も仕事などでレイアウトが崩れた!って時は相当焦りますw

そういう時は一つ一つ調査して原因を切り分けていきましょう。
経験上だいたいdivタグの対応がおかしくて崩れたり、動かなくなったりすることが多いのでまずはそこを疑うことをおすすめします。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です