FC2ブログのレイアウトが崩れた時に試すこと

なんか知らんがレイアウト崩れてしもたがな

となった時にですね、テンパっちゃって何したら良いかわかんない!な状態に陥る方が多いわけなんですよ。何から手をつけたら良いかさえわからん、というやつ。そういう時は慌てず騒がず、とりまコーヒーでも飲んで一息入れまして、そのまま忘却の彼方へ…

となってはいけませんが、落ち着いた頃に以下のような対処法を試されてはいかがでしょうか。

レイアウト崩れの主な原因

  1. FC2ブログの不具合
  2. テンプレートカスタマイズでミス
  3. プラグインのソースコードにミス
  4. 記事単位のソースコードにミス

FC2ブログの不具合

以下の全てに当てはまる場合の原因は FC2ブログのシステム不具合 の可能性があります。

  • テンプレートカスタマイズをしていない(デフォルト内容に一文字も手を入れていない)
  • 以前に 正常に表示されていた ことが確実である
  • 正常な状態から障害が出るまでの間にプラグインの追加をしていない
  • 正常な状態から障害が出るまでの間に記事を書いていない
  • ともかく 何にもしてない

正常な状態から突如表示不具合が発生した、という場合はFC2ブログのシステムに一時的な障害が起こっているのかもしれません。

どこかで誰かがきっとつぶやいてる・:*:・ .
ということで、Yahoo!検索 を利用し『FC2ブログ 不具合』などをキーワードに検索するとX(旧 Twitter)のポスト(旧 ツイート)から情報を得られるかもしれません。

FC2のシステム障害に起因している場合にはテンプレート制作者を含むユーザー側では何もできませんので、運営にサクっとメールを送って回復を待ちます。

テンプレートカスタマイズでミス

  • テンプレートHTMLに何かを追加、あるいは変更、あるいは削除した
  • テンプレートスタイルシートに何かを追加、あるいは変更、あるいは削除した

『カスタマイズ』と言うとなんとなく『ソースコードを書いた』という印象があるかもしれませんが、デフォルトの内容に一文字でも変化があれば『カスタマイズを行った』ことになります

例えば以下のようなものもカスタマイズと言えます。

  • アクセス解析などのコードを追加した
  • メモ的に コメントアウト を利用した

心当たりがある場合は複製を利用するか再DLするか、ともかく一旦デフォルトに戻し、それで改善されれば『個人カスタマイズが原因』でほぼ間違いありませんので、カスタマイズを慎重にやり直しましょう。よくあるミスは以下の通りです。

  • 追加するHTMLの開始タグと終了タグの数が不一致
    • 特定の要素を除き、開始タグと終了タグの数は必ず一致していなければいけません
  • CSSの記号に注意
    • ブレイス記号の書き忘れ、セミコロンの書き忘れまたはコロンとの混同 等が少なくありません
  • 追加HTMLの記載箇所が正しくない
    • アクセス解析コードなどの記載は必ず指示された位置へ
  • 巻き込み削除に注意
    • 某かの要素を取り除く際、前後の無関係な要素・文字列等を巻き込んで削除しない
  • コメントアウトはルールに則って正しく行う
    • HTML, CSS, JS それぞれコメントアウトの仕方が異なります。各ルールを調べてから使用するようにしましょう

プラグインのソースコードにミス

以下に当てはまる場合は プラグイン で確定です。

  • プラグインを非表示化すると改善される

設定 > プラグインの設定 > プラグイン管理 (PC用) の画面右上に「プラグイン設定『有効 or 無効』」を選択するセレクトボックスがありますので、無効にチェックを入れると全てのプラグインが表示されなくなります。この状態(プラグイン表示が無い状態)で確認して崩れが改善されれば登録プラグインのいずれか(または複数)のHTML, CSS, JS構文等が原因です。

原因となるプラグインを特定するには、各プラグインを全て非表示設定にした上で「プラグイン設定『有効』」に再度切り替え、
一つづつプラグインを表示 → ブログ画面を確認
という手順を繰り返すといずれどこかで崩れますので、その直前に表示したプラグインに問題があります。

多くの場合は以下に当てはまります

  • 『フリーエリア』プラグインを利用し、自身でソースコードを書いている
    • HTML構文にエラーが存在しているかもしれません
  • リリース時期の古いプラグイン、旧仕様のプラグイン を利用している
    • HTMLは2014年に大規模な改正が為されているため、それ以前にリリースされたプラグインには注意が必要です

記事単位のソースコードにミス

これまで記した内容のいずれにも当てはまらない場合は 記事内容 が原因かもしれません。以下に当てはまる場合は確定です。

  • 個別記事の、特定のページでは崩れ、崩れていないページもある

崩れが生じているページで記事を書いた最に利用したHTMLに注目し、ミスを特定しましょう。

原因特定後の修正作業

原因の特定について、その目星の付け方を述べてきましたが、原因がプラグインかテンプレートHTML, CSSか、あるいは記事か、いずれにしろ大抵の場合は HTML構文が正しくない 、さらに絞り込んで言うと 終了タグの書き忘れ、または逆に多く書きすぎ です。もっと言うとそのほとんどは div span a というタグが対象です。これが構文エラーのワースト3タグ。

崩れの原因がHTMLにあるとは限りませんけれども、この章では最も多い原因として『HTMLの基本整合性』に焦点を当ててミスの部位特定をする簡易的な方法を記しておきます。

テキストエディター(HTMLエディター)をお持ちの方はエディターの仕様に沿ってやってください。丸投げっぽくて申し訳ないですが、それが最も効率が良いと思います。

ブラウザ上で作業される方(FC2ブログのページで作業される方)は以下のような手順で。テンプレートなら『テンプレート編集』ページで、プラグインならば
プラグインの設定 > (該当プラグインの)詳細 > HTMLの編集 画面で。
記事ならば記事の編集画面で。

Windows
Ctrl + F

Mac
Command + F

キーボードのショートカットキーによる ページ内検索 を行います。例えとしてまずはdiv要素を用います。

<div で検索。> の記号を付けずに検索するのがコツです。もしかしたら <div style<div class などの属性が後ろに付いていると検索対象から外れてしまいますので漏らさないよう右ブラケットは付けないのがコツ。今行っているのは「開始タグ」の数の確認です。まずは場所よりも数をしっかり覚えておきます。

続いて
</div> を検索します。こちらは終了タグです。先に調べた開始タグと数が合致しているかどうかを確認します。

開始タグの数と終了タグの数は必ず一致していなければいけません

同様に <span</span><a</a>、など疑わしいタグを調べてみましょう。

数が合ってない場合には対象の周りをよく確認し、しかるべき修正を加えてください。数が合致している場合には、位置の不整合です。数でなく位置の不整合の場合一概に「こうすれば良い」といった解決法はありませんので、今回は割愛します。

例1) strongタグ不整合の例 終了タグ欠損

<div>あいうえお<strong>かきくけこ</div>

正しい例

<div>あいうえお<strong>かきくけこ</strong></div>

例2) spanタグ不整合の例 終了タグ重複

<div><span style="color: red;">あいうえお</span><span style="font-weight: bold;">かきくけこ</span><span style="text-decoration: underline;">さしすせそ</span></span></div>

正しい例

<div><span style="color: red;">あいうえお</span><span style="font-weight: bold;">かきくけこ</span><span style="text-decoration: underline;">さしすせそ</span></div>

まとめ

「記事の中でhtmlタグなんて書いてねーよ
と思われる方もいらっしゃるかもしれませんが、仮にFC2エディター(新旧投稿画面)のツールを利用したのならば、それ即ちhtmlタグの利用です。手打ちしなくともエディター上部に並んだツールバーのいずれかを使ったならばhtmlタグを利用しています。

ともかく「対処対処。修正! 」などとうろたえたところで、原因を特定しないと話しにならんもんですからね (´・ω・`)
具体的にどう調査を進めれば良いか、というフローチャートとして活用して頂ければ幸いです。

彩羽
2017/02/28 (Tue) 09:56

テンプレート編集について

初めまして、「Promise me」のテンプレートをお借りしています。
about me のページを書きたいのですが、編集の仕方がわからず困っております。
Akiraさんの過去の記事を遡りましたが、どうしても自分で見つけられませんでした。
恐縮なのですが編集方法を教えて頂けませんでしょうか?
大変初歩的な質問だとは思いますが、最近始めた初心者なので…(汗)
お手数おかけしますが、どうぞよろしくお願いいたします。

Akira
2017/02/28 (Tue) 20:33

To 彩羽さん

ありがとうございます (●'0'●)/

まずはPromise-Meの専用ページへ移動をお願いします。
お返事もそちらでさせて頂きますね。
よろしくお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-352.html

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)