テンプレートのレイアウトが崩れる原因

などなど。
こういった時にまずテンプレートの構造を疑いたくなりますが、実際その多くはテンプレートソースに起因するものではなく 記事の書き方 あるいは サイドバーに設置したプラグイン に問題がある場合がほとんどです。
もとよりレイアウトがあきらかに崩れているものであればFC2の審査を通過しません(笑)

原因追求の手順

プラグインを全て非表示に設定する
テンプレートのソースコードも含め原因を調査するにはまずFC2プラグインを全て非表示にします。この作業により原因が「テンプレートにある」のか「記事内容」にあるのかを判定することができます。このいずれにも原因が見当たらない場合原因は「プラグインにある」ということになります。

原因の特定

崩れるページと崩れないページが混在している場合の原因は「記事内容」

FC2ブログにはいくつかのページ種がありますので、ページ種単位で調査を行います。トップページが崩れている場合、ページ送りを利用して同じトップページ種の別ページを複数件繰ってみてください。崩れないページがあるのならば恐らく原因は 記事内で利用したhtml にあります。

個別記事も同様にページ送りで同じページ種を複数件チェック。以下同文。

プラグインを非表示にしたらどのページ種でも崩れが解消される場合の原因は「プラグイン」

原因がテンプレートにも記事内容にも無い場合にはプラグインのhtml, CSS, JS内容に起因しています。非表示化したプラグインを1件づつ表示設定に変更し、どのプラグインで発生するかを突き止められます。

修正作業の手順

主な原因1位

最も多いのが 開始タグと終了タグの数が合っていない パターン。次いで多いのが 終了タグの位置が正しくない(ネスティングの不正) パターンです。

htmlタグの説明はここでは省きます。
聞き覚え・利用の心当たりが無くともFC2ブログで記事を書く際にエディターのツールを利用すればhtmlタグを必ず利用しています。

正しい例

<div style="text-align: center;">あいうえお<span style="color: red;">かきくけこ</span></div>

開始タグと終了タグの「数」の不整合(div終了タグ欠損)

<div style="text-align: center;">あいうえお<span style="color: red;">かきくけこ</span>

終了タグの「位置」の不整合(span終了タグの位置が不正)

<div style="text-align: center;">あいうえお<span style="color: red;">かきくけこ</div></span>

発生しやすい状況は「記事修正時」と「ランキングバナー等の貼り付け時」

FC2エディターの上部にあるツールバーを使いながら記事を書いている場合、テキスト修正時に消してはいけないものを消してしまったり、テキストを収めるべき場所に収めなかったり、などが起こります。また、外部サイトへのリンク・ランキンバナー掲載のソースコードにhtmlのミスがあることも。ランキングバナーを毎回記事末尾にコピペしている場合などはミスが有ると大量のページを修正することになります。

まとめ

開始・終了タグの数が合っていない場合はカウントすれば比較的簡単に修正できますが、位置が正しく無い場合には多少やっかいで、htmlの知識が無いと難しいかもしれません。

このように終了タグの位置によってレイアウトが大きく変わってしまいます。
にっちもさっちもいかなくなった場合には自身で検索した上、Q&Aサイトで有識者の知恵を借りるか、テンプレート製作者に指示を仰ぐか、という感じですね。
(もちろん製作者側が受け付けてくれるのならば、です)

htmlのシンタックスエラーはすぐにわかる場合もありますが、大抵は誰にとっても例え有識者であっても時間のかかる面倒な作業です。
質問時の注意点は以下の記事をご参考に。

FC2ブログ【テンプレート編集中に全く別のCSSと入れ替わる現象】

結局のところ キャッシュ (か何かそんな感じのモノ)が原因ですけどもね (´・ω・｀) 実際何度か(何度「も」？)目にしていますので、もしかしたら同じ現象に出くわしたことがある方もいらっしゃるかもしれません。 症状 Aテンプレート編集中に「更新」するとCSSだけが別のBテンプレートの内容と差し替わる。...

vanillaice000.blog.fc2.com