ワードプレス(WordPress)で、
固定ページをトップ（ホームページ）に
表示するように設定した際、
トップページだけレイアウトが崩れ、
ヘッダー部とメインコンテンツの間が空いてしまって
困っている人いませんか？
私が悪戦苦闘した後、簡単に直せたので備忘録として残しておきます。
急にwebサイトのレイアウトが崩れ焦る
ブログのトップページを、投稿順ではなく、
固定ページで表示させたく、「表示設定」を
「投稿画面」から「固定ページ」に変更したところ、
ヘッダー部とコンテンツ部に、大きな余白が
できてしまい、直せなくなりました。
しかも、カテゴリや投稿ページは、何も問題なし。
エラー関係で検索したところ、ほとんど同じ答えが出てきてしまいます。
「表示崩れ」や「レイアウト崩れ」で検索して出てくるサイトは？
キャッシュのクリア
まず「topページ レイアウト崩れ」や、「固定ページ 表示崩れ」
などで検索して、出てくるサイトに書いてある答えで多いのが、
＜キャッシュが溜まっている＞という答え。
PCもスマホも、何度もクリアしてみましたが、どちらも直らず。
「ヘッダー body 間隔空いてしまう」などと検索すると、
カスタマイズ方法などのサイトが検索結果に出てきてしまいます。
HTMLタグのミス
そもそも、直接cssやphpなどをいじったわけではないので、これも違うと思うのですが、テーマファイルエディターを開いて、cssやphpファイルを全部チェックするなど、現実的には不可能です。
※
「HTMLチェッカー」という、choromeの拡張機能があることを知り、これを取り入れ、ページのソース（Ctrl+L）をコピーし、チェッカーにかけてみたところ、エラーなしとの回答。
コードが全角になっている
これは、全角チェッカーというサイトがあるので、これも試してみましたが、当たり前のことですが、日本語の部分が全角と表示されるので、無意味です。
プラグイン無効
これもどこにでも書いてありますが、そもそもプラグインはほとんど入れてないので、関係なし。
復元する
あれこれいじっていて、どこまで戻せばいいのかわからないし、何よりもめんどくさすぎます。
一応、トップページを、元の投稿画面表示に戻してみましたが、直りませんでした。
超凡ミスに気付く トップの表示崩れが1発で直った方法
他にも原因として、データベースのエラー、
サーバーの問題など、ややこしい操作が
必要になりそうなことばかり書いている
サイトもあって、
時間がかかりそうな方法ばかりなので、
もう放置しようかなとあきらめかけました。
というより、
やっと気づいたのですが、
トップのカスタマイズを
する際に、参考にした動画の関係で、
ある場所をいじってしまってました（汗。
それをまるっきり忘れてたのですけど、
そんなときに、ちょっとひらめいて、
↓ ↓ ↓
Cocoon設定のアピールエリアを見る
「Cocoon設定」をいろいろ見ていると、
「アピールエリア」という場所があります。
これの上部に、「アピールエリアの表示」という
場所があるのですが、これを「表示しない」に
変えてみたところ、なんと、見事に復活できました。
表示する設定にいつ変更したのかも忘れてました。
アピールエリアが必要になったときに、
表示するようにすればいいのに、参考動画の
通りに変更してしまったようです。
長い動画を参考にして、あれこれいじってたので、
これに気づくまでに、実に半日近くの時間がかかってしまいました。
デフォルト設定のまま
そもそも「アピールエリア」なる設定があること自体、元々知っている人も少ないのではないでしょうか？
知っていれば、「アピールエリア カスタマイズ」などと検索して、変更の仕方を探せると思いますが、あれこれいじってると、表示が崩れているのは、何かのエラーが原因と思ってしまう人が多いと思います。
デフォルトの設定で、アピールエリアは表示しない
ということにしていれば、なんの問題も無いので、
画像やテキストを入れこまない人は、ここをいじらないほうがいいです。
ひとつひとつの操作時にサイトを確認していれば
何も問題ないのかもしれませんが、手順が多いと
どうしても、いくつかの操作後に保存するので、
不具合が起きたときにあせりますね＾＾；
私の経験がどなたかのお役に立てれば幸いです。
コメント