SWELLのエディタとプレビューで表示が崩れる原因と対処

2026年10月29日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

エディターではきれいに並んでいたのに、プレビューを開くとレイアウトが崩れている…そんな経験はありませんか。どちらが本当の見た目なのかわからず、どこを直せばいいのか迷ってしまいますよね。実はこのズレには、はっきりした原因があります。

この記事では、SWELLのエディターとプレビューで表示が崩れる原因を6つに分けてわかりやすく解説します。私が実際に何度も悩んだ経験をもとに、原因を知ってから対処法へ進む順番でお伝えしますね。仕組みがわかれば、もう慌てなくて大丈夫ですよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

エディターとプレビューで見た目が違うにゃ…

たいがブログ

戸惑いますよね。原因がわかれば、すっきり解決できますよ。

ニャフィ

どっちを信じて直せばいいのか、わからないにゃ…

たいがブログ

考えられる原因を、ひとつずつ順番にご案内しますね。

▼あわせて読みたい：プレビューの表示が遅いと感じるなら、サーバーの性能も見直す価値があります。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLのエディターとプレビューで表示が崩れる主な原因

まず知っておきたいのは、エディターの見た目と実際の記事の見た目は、もともと完全には一致しないということです。エディターは編集しやすさを優先した画面なので、細かな余白や幅に違いが出ることがあります。

そのうえで、明らかに崩れている場合はCSSやキャッシュが関係していることがほとんどです。見た目の基準は「プレビューや公開後のページ」と覚えておきましょう。

原因①：追加CSSがエディターには反映されていない

カスタマイザーの追加CSSは、基本的に公開ページ側にだけ効くため、エディターとプレビューで見た目がズレることがあります。私も見出しの装飾をCSSで変えていたせいで、エディターでは普通なのにプレビューでは別物になって混乱しました。

原因②：プレビューに古いキャッシュが残っている

キャッシュプラグインやブラウザの影響で、プレビューが古い状態のまま表示されることがあります。直したはずなのに崩れたままに見えるときは、まずキャッシュを疑うのが近道です。

見落としがちなそのほかの原因

CSSとキャッシュ以外にも、プラグインや記事内の書き方が崩れの原因になることがあります。ここからは、見落としやすい原因を紹介していきます。

以前使っていた別のテーマでは、エディターと公開ページの見た目がまったく違い、原因の見当もつきませんでした。SWELLはエディターでもかなり近い見た目を再現してくれるので、ズレがあれば原因を絞り込みやすいですよ。

原因③：プラグインのCSSが干渉している

装飾系や目次系のプラグインは、独自のCSSを公開ページに読み込むため、プレビューだけ崩れることがあります。私は目次プラグインを入れた直後に、見出しの余白がずれてしまった経験があります。

原因④：HTMLを編集した部分の閉じ忘れ

カスタムHTMLブロックや「HTMLとして編集」でタグを閉じ忘れると、その下のレイアウトがまとめて崩れます。崩れ始めた位置の直前に原因が隠れていることが多いですよ。

原因⑤：ブロックを何重にも入れ子にしている

カラムの中にさらにボックスやカラムを重ねるなど、ブロックの入れ子が深すぎると、表示がずれやすくなります。特にスマホ表示で崩れが目立つので注意しましょう。

原因⑥：パソコンの画面だけで確認している

エディターはパソコンの画面幅で見ているため、スマホだけ崩れていても気づけないことがあります。私も読者から指摘されて初めて、スマホ表示だけ崩れていたと知ったことがありました。

SWELLのエディターとプレビューのズレを直す対処法

原因がわかったら、いよいよ崩れを直す対処法に進みましょう。ここでは、前半で紹介した6つの原因に合わせた対処法を、手軽なものから順番にまとめています。

ポイントは、一度にいろいろ変えず、1つ試すたびにプレビューで確認することです。どの対処で直ったかがわかれば、次に同じことが起きても迷いませんよ。

対処①：キャッシュを削除してプレビューし直す

原因②への対処です。キャッシュプラグインのキャッシュを削除し、ブラウザを再読み込みしてからプレビューを開き直しましょう。私は崩れの原因を1時間探したあげく、キャッシュを消しただけで直ったことが何度もあります。

対処②：追加CSSとプラグインを一時的に外す

原因①③への対処です。関係しそうな追加CSSを「/* */」で囲んで無効化し、それでも直らなければ装飾系プラグインを1つずつ停止します。私も目次プラグインを止めたら、見出しのズレがすぐに直りました。

対処③：HTMLとブロックの構造をシンプルにする

原因④⑤への対処です。崩れ始めた位置の直前にあるHTMLの閉じタグを確認し、入れ子が深いブロックは1段減らしてみましょう。装飾はできるだけSWELLのブロックで行うと、エディターと公開ページの見た目がそろいやすくなります。

対処④：プレビューでモバイル表示を確認する

原因⑥への対処です。エディター上部の「プレビュー」から「モバイル」に切り替えると、スマホでの見え方を確認できます。以前使っていた別のテーマではこの確認がしにくく、公開後に崩れに気づくことがよくありました。

▼あわせて読みたい：表示のトラブルが解決したら、次は読まれる記事を増やしていきましょう。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLのエディターとプレビューのズレでよくある質問

プレビューと公開後の見た目も違います。: 公開後のページに古いキャッシュが残っている可能性があります。ログアウトした状態やシークレットウィンドウで、公開ページを確認してみましょう。
モバイルのプレビューとスマホ実機で見え方が違います。: プレビューの切り替えはあくまで目安です。端末やブラウザによって細かな差が出るので、大事な記事は実際のスマホでも開いて確かめておきましょう。
崩れの原因がどうしても絞り込めません。: 崩れているブロックを新しい下書きにコピーして、単体で表示してみましょう。単体で崩れなければ、周りのブロックやHTMLが原因だと絞り込めます。
同じ崩れを繰り返さないためのコツはありますか？: 公開前にモバイル表示でプレビューすることを習慣にしましょう。あわせて、CSSやプラグインを変えたらメモを残しておくと、原因探しがぐっと楽になります。