The other way round

Welcome to my blog

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

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

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

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


レイアウト崩れの原因


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

・ テンプレートカスタマイズはしていない
・ 以前に 正常に表示されていた ことは確実
・ 正常な状態から障害が出るまでの間にプラグインの追加をしていない
・ 正常な状態から障害が出るまでの間に記事も書いていない
・ ともかく何にもしてない

FC2ブログ不具合情報を確認
原因① --- FC2不具合


「もしかして… アレのせい?」という心当たりが全く思い浮かばない場合、
リアルタイム検索を上手に利用すると良いと思います。
どこかで誰かがきっとつぶやいてる・:*:・ .
っちゅーことで、Twitterのつぶやきを検索します。
ところがこの「リアルタイム検索」ですが、GoogleはTwitterと再提携したものの。
日本語は今のところサービス対象外です。
そんなときにはYahoo!検索を利用します。
私がYahoo!検索を利用するのはこの時だけです(そういう方は多いハズ)

『FC2ブログ 不具合』

をキーワードにするといろいろ出てきますよ。
同時期に複数名による同じ要件のつぶやきがあった場合には大抵「FC2の不具合」という結論で合ってる。
その場合には何もできませんので、運営にサクっとメールを送って回復を待ちます。

FC2不具合が原因ではない場合は、その原因を突き止めないといけませんね。
つまり ②なのか③なのか④なのかの特定です。

・ カスタマイズをした覚えがある

とにかく一度デフォルトのテンプレートに戻る
原因② --- カスタマイズ or 原因③ --- プラグイン or 原因④ --- 記事


デフォルトに戻して正常化されるのであれば、②のカスタマイズが原因ですね (´・ω・`)
カスタマイズをやり直しましょう(鬼)

カスタマイズをする前にテンプレートの複製を取っていない方は、
カスタマイズ該当部分を修正するのではなく、いさぎよく該当テンプレートの再ダウンロードを行いましょう。
修正を加えた状態からデフォルトに戻すのはとっても大変ですし、そもそも覚えてるのか?って問題もあります。
さらにテンパイするのが目に見えてますので再DL。

再DLの仕方
まずお手元にあるテンプレートの名称を変更します。

例)
Belong → Belong1

名称が同じものは「ダウンロード済み」と表示され、手に入れることができません。
事前に名称を変更しておいてください。
その後改めてDL → 設定状態に
という手順を踏みます。
というか、カスタマイズ前には複製を取って置いたほうが良いですよ ( ̄∀ ̄;)

・ 再DLしても改善されない
プラグインを追加した覚えがある

プラグインを一旦全非表示に
原因③ --- プラグイン or 原因④ --- 記事


設定 > プラグインの設定 > プラグイン管理 (PC用)
の画面で、プラグイン横ラジオボタンのチェックを全て外して「更新」
右上に「プラグイン設定『有効 or 無効』」を選択するセレクトボックスがありますが、ここは使わない。

全非表示にしましたら一旦ブログの状態を確認します。
ここでやはり改善されない場合には原因は恐らく②でも③でもなく④ですので次に進みます。

改善が見られた場合には、プラグインの管理画面に戻り、上から順に表示させます。
面倒でもひとつづつ行います。
プラグインを表示 → ブログ画面を確認
を繰り返すと、いずれどこかで崩れますので、その直前に表示したプラグインに問題があります。


・ プラグイン全非表示でも改善されない
記事を書いた覚えがある

テンプレートのトップページ表示タイプ別に検証スタート
原因④ --- 記事


どの記事が悪さをしているのかを探り当てなければいけません。
そこで「FC2ブログのトップページのタイプ」ですが、

● 要約表示タイプ --- ユーザーが記事を書く際に利用したhtmlタグは無効化される




● 全文表示タイプ --- ユーザーが記事を書く際に利用したhtmlタグはそのまま反映される




要約タイプの場合には改行すらも取り除かれます。
ですから、記事に問題がある場合にはトップページは崩れていないはずです
言い換えると、要約表示タイプのテンプレートでトップページが崩れている場合には原因④の「記事」は消去法で消してオッケーです。
元凶は記事内で利用した htmlタグ ですので、htmlタグの反映されないトップページでは崩れるはずがありません。
(ただし一部のhtml5タグは有効化されます。でも使う人が居るとは思えないので今回はスルー)

全文表示タイプのテンプレでは、トップページには複数件の記事が並んでいますので、
その中のどれに問題があるのかを調べるには個別記事(パーマリンク)に移動してください。

トップページのページ送りを繰って、崩れているページを確認。

そのページ内にある記事を個別に開き、個別ページで崩れているかどうかを確認。
この段階で「個別ページでは崩れない」場合、その記事は消去法で消えます。




原因が特定できたら修正作業に移ります


プラグインに問題がある場合、もしかしたらhtml内容にミスがあるかもしれませんし、JSを利用している場合はそのコードかもしませんが、
原因がプラグインにあるにしろ、記事にあるにしろ、大抵の場合は
htmlを利用しており、その開始タグと終了タグの位置や数が正しくない
9割方これなんですねぇ (´・ω・`)
そしてタグとしては div である場合が大半です。

開始タグと終了タグが不整合だよ!
と言ってもですね、具体的にどうやって調べてどう直せば良いのかにオロオロ。
というわけで、見つけ方。

htmlエディターをお持ちの方はエディターの仕様に沿ってやってください(丸投げっぽくてすみません)
各人のエディターの仕様までは把握できないわ(笑)
ブラウザ上で作業される方(FC2ブログのページで作業される方)は以下のような手順で。
プラグインならば
プラグインの設定 > (該当プラグインの)詳細 > HTMLの編集 画面。
記事ならば記事の編集画面。

Ctrl+F(Windows)/ Command+F(Mac) キー検索

<div

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

</div>

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

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

数が合ってない場合には対象の周りをよく確認し、しかるべき修正を加えてください。
数が合致している場合には、位置の不整合です。

strong終了タグの位置が間違っている例
<div>あいうえお<strong>かきくけこ</div></strong>


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


いわゆる「入れ子」ですね。
ある要素の開始タグと終了タグの中にある別の要素は、必ずその中で完結していなければいけません。
この例ですと、strong終了タグがdiv終了タグの「外」に追い出されていて完結していません。

あとは、リンクを設定するための aタグ もレイアウトに影響を与えやすい要素です。
目に見えて「崩れている」というよりも、リンク範囲がなんかヘン… とかそういった感じで違和感を感じたり。
あるいはもちろん「崩れてるぅー!」な見た目になることもあります。
その場合も同様の手順で
<a
で開始タグ検索、
</a>
で終了タグ検索です。




まとめ


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

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

Comments 2

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

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

2017/02/28 (Tue) 09:56 | EDIT | REPLY |   
Akira  
To 彩羽さん

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

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

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

2017/02/28 (Tue) 20:33 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *