attention admin about comments trackbacks you may also like

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

2015年12月29日
カスタマイズ
0
Instruction HTML トラブル対処 初心者向け

テンプレートのレイアウトがおかしい時に何を疑いどう対処するか、というお話です。

  • サイドバーが何故か途中からメインコンテンツの下に回り込んでしまう。俗に言うカラム落ち。
  • コンテンツを分けるアウトライン(外罫)が複数の記事にまたがる(一記事単位にならない)

などなど。
こういった時にまずテンプレートの構造を疑いたくなりますが、実際その多くはテンプレートソースに起因するものではなく 記事の書き方 あるいは サイドバーに設置したプラグイン に問題がある場合がほとんどです。
もとよりレイアウトがあきらかに崩れているものであれば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テンプレートの内容と差し替わる。...

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(0)

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)