ブログのレイアウトが崩れる場合の対処方法

更新
2012年11月8日(木)

テンプレートをカスタマイズしたり、プラグインを複数表示したり、タグを複数使った記事を投稿したらレイアウトが崩れた場合の対処方法です。

概要

  1. ブログのレイアウトが崩れる原因を特定します。

複数もしくはすべてのページでレイアウトが崩れる場合

普段使用しているテンプレートを再度ダウンロード

  1. カスタム前のテンプレートでレイアウト崩れが改善すれば、カスタム後のテンプレートに問題があると判明します。

  2. レイアウトを確認しながら、再度ダウンロードしたテンプレートに同じカスタマイズを施していき、レイアウトが崩れればその直前に施したカスタマイズが原因だと判明します。

  3. 原因を特定すれば、レイアウトが崩れないようにカスタマイズしなおします。

プラグインをすべて非表示にする

  1. プラグインをすべて非表示にしてレイアウト崩れが改善すれば、プラグインのどれかに問題があると判明します。

  2. プラグインを1つずつ表示すると同時にブログのレイアウトを確認していき、レイアウトが崩れたらその直前に表示したプラグインが原因の1つだと判明します。

  3. この場合の対策は次のとおりです。

    1. プラグインの最新バージョンであるか確認し、最新でなかったのなら最新バージョンを試す。プラグインの改訂で問題を解決してくれているかもしれないからです。
    2. 最新バージョンでも問題があるようなら、作者に連絡し修正してもらう。作者やプラグインの他の使用者のためにもなります。
    3. 作者が諸事情で応対してくれない場合は、似たような他のプラグインを探す。
    4. 自力で修正する。似たようなプラグインがなかったり、作者に連絡できない場合や応対してくれない場合などの苦肉の策です。
    5. 自力では修正できなかった場合、OKwaveなどのQAサイトで質問してみる。状況を具体的に書いたほうが具体的な回答がされやすいと思います。
    6. 使用を諦める。

ブラウザの拡張機能を無効にする

  1. 特定のブラウザでレイアウト崩れが生じる場合、そのブラウザの拡張機能(エクステンション)をすべて無効にしてみます。

  2. その後、1つずつ有効にしていきます。その都度表示を確認し、レイアウト崩れが生じればその直前に有効化した拡張機能が原因の1つであると判明します。

  3. 上記プラグインの時の対策と同じ要領で、解決を図ります。

iPhoneでブログをPC表示すると全体が縮小表示

  1. 次のページで言及しています。

一部のページだけレイアウトが崩れる場合

  1. レイアウトが崩れるページと崩れないページがある場合、崩れるページの記事本文内でdivタグの閉じ忘れなどがないかを確認します。

  2. 長文を作成した場合、タグの閉じ忘れなどを特定するのに骨が折れます。その際はAnother HTML-lintが助けになるかもしれません。最初は戸惑うかもしれませんが、使い慣れるとかなり便利なツールです。

一部の文字が文字化けしている

  1. テンプレートの編集をしていないにもかかわらず文字化けが発生した場合、fc2ブログ側の設定に問題が発生している可能性があります。

  2. 特に、記事の公開日やコメントの投稿日などの日本語での曜日表示はときどき文字化けするようです。

  3. サーバー移設で文字コードが変わり、文字化けする場合もあるようです。

fc2側に何らかの障害が発生している

  1. レイアウト崩れではなく、ブログそのものが表示されなかったり、上述の文字化けが発生したりします。この場合、ブログ利用者側ではどうにもできません。

  2. fc2側の障害有無を確認するには大きく2つ方法があります。

当サイト作者の状況

  1. 当サイト作者の作成したテンプレートのカスタムでレイアウト崩れが生じ、上記対策を講じたが修正できなかった場合、連絡用ページから気軽にご連絡いただければと思います。可能な限り対応します。ご自身で原因を特定してください。ご連絡いただいても対応いたしかねます。

  2. Windows XPでしか確認できないので、Macやスマートフォンなどで表示した際のレイアウト崩れは確認しようがないです。ご自身で原因を特定してください。

  3. Windows XPでも使えるiPhoneなどスマートフォンでの表示を確認できるエミュレータをご存知であればご教示いただきたいです。複数あるようなら次の順番で希望します。ご自身で原因を特定してください。

    1. ブラウザで確認できるWebサービス(何もインストールする必要がない。英語でもOK。)
    2. Chromeの拡張機能のように、その他のソフトウェアをインストールする必要がないもの
    3. ポータブルアプリのように、Cドライブにインストールしなくても使えるもの

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)