関連機器

ブログデザインが予期せず崩れた時の対処法

スポンサードリンク





 

実は先日私がコンサルに入っているクライアントさんから

「ブログのデザインが急に崩れてどうしても直せない。」

ということで、助けを求められました。

N912_atamawokakimushiru500-thumb-500xauto-1846 (1)
 

 

 

 

 

正直詳しく中身のソースなどを見てみて、

原因を調査しないとなんとも言えない状況でした。

 

それで実際に見てみると、

予想外のところに原因がありました。

 

ブログをやっている人なら誰でも起こりうることなので、

どんな原因だったのかシェアしようと思います。

 

アメブロのデザインが予期せず崩れた時の対処法
今回はアメブロのデザインが崩れたわけですが、

下記のような感じで崩れていました。

 

・3カラムデザインの両サイドバーが下に落ちてしまう

・グローバルナビが画面左上にいってしまいほぼ見えない状態になっている

・よくわからない枠線が記事上に出てしまっている

 

ざっと言うとこのようなかんじでした。

かなりぐちゃぐちゃと言っていいくらいの崩れ方でした。

実は見る前にある程度原因を予測はしていました。

アメブロが崩れる原因は通常考えられるのは

 

・メッセージボード

・フリープラグイン

 

このあたりに、余計なタグが入っているとか、

閉じタグが足りないといったことです。

 

なので、まずはこの編から調査開始をしたわけですが、

どうも見たところ問題がなさそうでした。

 

決定的だったのは、

「デザインをアメブロが用意しているデフォルトに変えても治らない」

ということです。

 

アメブロのデザイン側のソースをまるっきり変えても治らないということは、

これは原因が別だな〜、とこの当たりで確信しました。

 

そして結局原因は「記事」にありました。

デザインなどのソースではなく「記事」に余計なタグが入っていたということです。

 

具体的には”div”タグです。

HTMLを多少知っている方ならわかると思いますが、

このようなタグには必ず「始まり」と「終わり」を示すタグが必要です。

「<div>」ではじまったら「</div>」で閉じてあげる必要があります。

 

これがどっちか一方が抜けてしまうと、

デザイン崩れが起きてしまう原因になります。

 

今回は始まりのタグがないのに、

終わりのタグがなぜかあったことが原因でした。

 

なので修正方法としては、

記事ごとにHTML表示させて、

余計な「div」タグを削除するという地味な作業です。

 

記事を書いていても気づきにくいところなので、

もしもデザインをいじっていないのに

突然デザインが崩れたら「記事の中のタグ」にも原因があるかも!

と疑ってみるといいかもしれないですね。

 

特にブログなどはタグを自動で挿入してくれる機能があるので、

かえってそれが原因にもなりかねないので注意が必要です。

 

人気記事:サイト制作に役立つフリー素材集まとめ

 
WordPress実践型メール講座で楽しみながら稼げるサイトを構築しませんか?

TOPICS用バナーのコピー


 

“ブログデザインが予期せず崩れた時の対処法” への2件のフィードバック

  1. タケダ より:

    こちらの記事を読んで、思い当たる方が何人かいらっしゃいました。

    アメブロなどでも崩れることがあるのですよね。

    あと、変にリロードばかり何回も起こってしまったりと。

    細工するのはよいと思いますが、
    細工した後、きちんと表示されているかどうかは確認したほうがよい、
    ということですね。

    あと、間違いを起こしても大丈夫なように、
    バックアップは取っておく、とw

    • kaz815 より:

      アメブロだと、通常投稿するときに余計なタグが入っているだけでブログ全体が崩れることがあるので注意が必要ですね。

      バックアップはおっしゃる通り必須ですね。

コメントを残す

サブコンテンツ

このページの先頭へ