WordPressにHTMLを貼るとデザインが崩れる原因と対処法

別の場所ではきれいに表示できたHTMLをWordPressへ貼ると、文字サイズや余白、ボタンの位置が変わることがあります。

多くの場合、HTMLの故障ではなく、ページ用CSSの不足やWordPressテーマのCSSとの重なりが原因です。

WordPressでデザインが崩れる主な原因

• HTMLだけを貼り、元ページのCSSを入れていない
• ビジュアル表示へ貼ったため、コードが変換された
• テーマと同じクラス名を使っている
• テーマ側の見出し・ボタン・画像の指定が上書きしている
• 固定幅のため、本文エリアやスマホ画面に収まらない
• 古いCSSがキャッシュに残っている

1．Classic Editorの「コード」へ貼る

Classic Editorには、見た目を編集する表示とHTMLを編集する表示があります。HTMLを貼るときは「コード」へ切り替えます。

見た目を編集する側へ直接貼ると、タグが文字として表示されたり、WordPressがコードを整形したりすることがあります。

2．ページ全体のタグは貼らない

通常のWordPress本文へは、本文に必要な部分だけを入れます。

次のタグを含む完全なHTMLファイルを、そのまま本文へ貼る必要はありません。

• <!doctype html>
• <html>
• <head>
• <body>

WordPressテーマがすでにページ全体を作っているため、これらを重ねると正しい構造になりません。

3．専用の親クラスで囲む

ページの内容全体を、固有のクラス名を付けた要素で囲みます。

<div class="kotoha-tools-page">
  ページの内容
</div>

CSSも、この親クラスから始めます。

.kotoha-tools-page .button {
  background: #a85e63;
}

.buttonだけを指定すると、テーマやほかのページのボタンまで変わる可能性があります。親クラスを付ければ、影響範囲を限定できます。

4．固定幅を見直す

width: 1200pxのような固定幅は、WordPressの本文欄やスマホ画面からはみ出す原因になります。

基本は、横幅を画面に合わせて縮められる指定にします。

.kotoha-tools-page {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

.kotoha-tools-page img,
.kotoha-tools-page iframe {
  max-width: 100%;
}

5．テーマのCSSとぶつかっている場所を探す

特に影響を受けやすいのは、見出し、リンク、ボタン、画像、リスト、フォームです。

ページ全体が崩れているように見えても、一つの共通クラスへテーマの余白が付いているだけの場合があります。まず、崩れている要素に共通点がないか確認します。

この解決ノートを書くきっかけ

私も、単体ではきれいに表示できていたページをWordPressへ入れたところ、文字の大きさや余白、ボタンの配置が変わってしまったことがあります。

最初はHTMLの貼り付けに失敗したと思いましたが、調べてみると、ページ専用のCSSとWordPressテーマのCSSが同じ要素へ効いていました。

!importantを増やしすぎない

!importantを付けると、特定の指定を強くできます。ただし、あちこちに追加すると、あとから通常のCSSで変更しにくくなります。

先に専用クラスで範囲を限定し、CSSの読み込み順や指定対象を確認します。どうしても上書きできない一部にだけ使う方が管理しやすくなります。

WordPressから独立させた方がよいページ

LPなど、ヘッダーから最下部までデザインを厳密に保ちたいページは、WordPressテーマの外に独立したHTMLとして設置する方が向くこともあります。

ブログと同じ管理画面で更新したいならWordPress、デザインの独立性を優先するなら別ページというように、目的で選びます。

公開前のチェックリスト

• コード表示へ本文部分だけを貼った
• ページ専用の親クラスがある
• 一般的すぎるクラス名を避けた
• 画像とiframeに最大幅を設定した
• パソコンとスマホの両方で確認した
• キャッシュを削除して再読み込みした
• 変更前の本文をバックアップした

まとめ

WordPressへHTMLを貼ってデザインが崩れたら、HTMLを作り直す前に、貼り付ける表示、CSSの有無、クラス名、固定幅を確認します。

ページ専用の親クラスで影響範囲を分けると、テーマとの衝突やほかのページへの副作用を減らせます。