AIマーケティング・発信戦略

WordPressクラシックでボックスが反映されない時の直し方(CSS不要だった)

結論:原因はCSSじゃなく「貼る手順」だった

WordPressのクラシックエディタで、ボックスデザインのコードを貼ったのにプレビューで反映されない。
これ、僕もさっきハマった。

最初は「CSS足りないのか?」って疑ったんだけど、結論は違った。

CSSを追加しなくても、テキスト(コード)側に貼ってからビジュアルに戻したら反映された。
つまり原因は「CSS」じゃなくて「貼る場所」だった。

今回の状況(僕が詰まったやつ)

貼ったコード

今回貼ったのはこれ。

<div class=”simple-box7″><p>ここにテキストを入力</p></div>

起きたこと

ビジュアルで貼り付けてプレビューしても、思った通りに反映されない。
「なんで???」ってなるやつ。

解決方法:テキスト(コード)に貼ってビジュアルに戻す(これだけ)

ここからが本題。やることはシンプル。

手順1:テキスト(コード)タブに切り替える

クラシックエディタ上部の
「ビジュアル」→「コード」 に切り替える。

手順2:コードを貼る

貼りたい場所に、コードをそのまま貼る。

コード側に貼ると、文字列が変わる。でもこれでOK!

手順3:ビジュアルに戻して確認

「コード」→「ビジュアル」 に戻る。

すると、ボックスとして反映されている。

ここにテキストを入力

↑こんな感じ。

僕はこれで直った。CSS追加は不要だった。

なぜこれで直る?(クラシックの仕様っぽい挙動)

ビジュアルは勝手に整形することがある

ビジュアル編集は便利だけど、内部的には
「WordPressがHTMLをいい感じに直そうとする」挙動がある。

結果、貼ったはずのコードが微妙に変わって、表示が崩れることがある。

テキストは“確定保存”になりやすい

一方テキスト(コード)タブは、
貼ったタグがそのまま保存されやすい。

だから一度テキスト(コード)側で“確定”させて、
その後ビジュアルで見た目を確認するのが安定する。

それでも反映されない時のチェック(保険)

余計な文字(#など)が混ざってないか

#<div ...> みたいに、先頭に変な文字が付いてるとズレることがある。
貼るのはHTMLだけにするのが安全。

キャッシュを疑う

直したのに変わらない時は、

  • シークレットウィンドウで確認

  • キャッシュ系プラグインの削除

これも効く。
僕の場合は、キャッシュを削除しなくても反映されたけどね。

まとめ

WordPressクラシックでボックスが反映されない時は、まずこれ。

  • テキスト(コード)タブに貼る

  • ビジュアルに戻して確認する

CSS不足を疑う前に、この手順を踏むだけで直るケースがある。
僕はまさにこれで解決した。

※補足:僕の環境はWordPressクラシックエディタです。
貼ったのは simple-box7 のHTMLコードで、最初ビジュアル貼りだと反映が不安定でした。
テキスト(コード)タブに貼って保存→ビジュアルに戻す手順で反映確認できました(CSSは追加してません)。

内部リンク

“反映されない”って結局、キャッシュか設定場所ミスが多い。次の地雷をまとめて回避したいならこれ。

【トラブル解決記事って量産できるけど、伸びるのは“構造”が整ってる記事。AI時代のSEO設計、ここで一回掴める。

AIで書くと“それっぽいけど弱い”文章になりがち。バレるポイントと、SEO的に強くするコツを先に押さえると安心。

ABOUT ME
Pa_man
神奈川県生まれ神奈川県育ち。10年以上にわたり配送業界で現場を支えてきた経験を活かし、「日常に役立つヒント」や「働き方の工夫」などをお届けすべく、日々奮闘中です。趣味はゲーム・読書・筋トレ・映画鑑賞・散歩。人と接することが得意で、どんな相手とも自然に会話ができるのが強みです。 生成AIを活用した副業や、わかりやすい情報発信にも挑戦中!「めんどくさがりでも続けられること」をテーマに、継続と挑戦の記録を発信しています!