WordPressでHTMLを中央寄せする方法｜CSSが効かない・表示が崩れる時の確認ポイント

WordPressでHTMLやCSSを入れたのに、思った通りに表示されないことがあります。

たとえば、「HTMLを入れたらそのまま文字として表示された」「CSSを書いたのに中央寄せできない」「カスタムHTMLブロックに入れたらレイアウトが崩れた」「追加CSSが効かない」といったケースです。

WordPressでは、記事本文、カスタムHTMLブロック、追加CSS、テーマ設定、ブロック設定など、HTMLやCSSに関係する場所がいくつかあります。

ウェルカ編集長

HTMLやCSSがうまく表示されないときは、「コードが間違っている」と決めつける前に、まず入れる場所と反映範囲を確認するのが近道です。

この記事では、WordPressでHTML・CSSがうまく表示されないときの原因と解決策を、初心者向けに整理します。

WordPressでHTML・CSSがうまく表示されない主な原因

WordPressでHTMLやCSSがうまく表示されない原因は、1つではありません。

コードの書き方が間違っている場合もありますが、そもそもHTMLやCSSを入れる場所が違っていることもあります。

特に、ブロックエディターでは、通常の段落ブロック、カスタムHTMLブロック、追加CSS、ブロックの追加CSSクラスなどを使い分ける必要があります。

ウェルカ編集長

WordPressでは「HTMLを書く場所」と「CSSを書く場所」が分かれています。ここを混同すると、コード自体は合っていても反映されません。

まずは、どこに何を書いたのかを整理しましょう。

HTMLは構造を作るもの、CSSは見た目を調整するものです。この役割を分けて考えると、原因を切り分けやすくなります。

原因1：HTMLを入れる場所を間違えている

WordPressでHTMLがうまく表示されない原因として多いのが、HTMLを入れる場所を間違えているケースです。

通常の段落ブロックにHTMLコードを貼ると、意図したHTMLとして処理されず、文字として表示されたり、ブロックエディター側で自動変換されたりすることがあります。

HTMLを直接書きたい場合は、基本的に「カスタムHTML」ブロックを使います。

ウェルカ編集長

HTMLを貼るなら、まずカスタムHTMLブロックです。段落ブロックに貼ると、HTMLとしてではなく文章として扱われることがあります。

たとえば、次のようなHTMLはカスタムHTMLブロックに入れます。

<div class="sample-box">
  <p>ここに文章を入れます。</p>
</div>

カスタムHTMLブロックでは、HTMLを直接書けます。ただし、テーマやWordPressの安全性の仕組みによって、一部のタグや属性が使えないこともあります。

原因2：CSSを書く場所を間違えている

HTMLは表示されているのに、デザインが変わらない場合は、CSSを書く場所を間違えている可能性があります。

CSSは、基本的には「追加CSS」やテーマ側のCSS欄に書きます。

ただし、特定のカスタムHTML内だけで使うデザインであれば、カスタムHTMLブロック内に <style> を書いて管理する方法もあります。

ウェルカ編集長

サイト全体に効かせたいCSSは追加CSS。特定のパーツだけならカスタムHTML内。使い分けると管理しやすいです。

カスタムHTML内にCSSを書く場合は、次のような形になります。

<style>
.sample-box {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
}
</style>

<div class="sample-box">
  <p>中央寄せしたい文章です。</p>
</div>

この方法は、特定ページ内だけで使う装飾には便利です。

一方で、複数ページで同じデザインを使う場合は、追加CSSにまとめた方が管理しやすくなります。

原因3：中央寄せの指定が間違っている

「HTMLを中央寄せしたいのにできない」という場合、CSSの指定方法が合っていない可能性があります。

中央寄せには、文字を中央にする方法、画像やボックスを中央にする方法、横並びの要素を中央にする方法があります。

すべてを同じ text-align: center; で解決できるわけではありません。

ウェルカ編集長

中央寄せは意外とつまずきます。文字を中央にしたいのか、ボックス自体を中央にしたいのかでCSSが変わります。

文字だけを中央寄せしたい場合は、次のように書きます。

.center-text {
  text-align: center;
}

幅のあるボックス自体を中央寄せしたい場合は、次のように書きます。

.center-box {
  width: 80%;
  margin: 0 auto;
}

横並びの要素を中央寄せしたい場合は、flexを使う方法もあります。

.center-flex {
  display: flex;
  justify-content: center;
}

中央寄せができないときは、中央寄せしたい対象が「文字」なのか「ボックス」なのか「横並び要素」なのかを分けて考えましょう。

原因4：ブロックに付けたクラス名とCSSが一致していない

WordPressでは、各ブロックに追加CSSクラスを設定できる場合があります。

ブロックにクラス名を付けて、そのクラスに対してCSSを書くことで、特定のブロックだけ見た目を変えることができます。

ただし、ブロック側に入力したクラス名と、追加CSS側のクラス名が一致していないと反映されません。

ウェルカ編集長

ブロックにクラスを入れる方法は便利です。ただし、CSS側ではクラス名の前にドットが必要です。ここでよくミスります。

たとえば、ブロック側の追加CSSクラスに次のように入力します。

my-center-area

追加CSS側には、次のように書きます。

.my-center-area {
  text-align: center;
}

ブロック側では my-center-area、CSS側では .my-center-area と書く点に注意しましょう。

原因5：CSSの基本的な書き間違いがある

CSSは、少しの書き間違いでも反映されないことがあります。

よくあるのは、クラス名の前のドット忘れ、かっこの閉じ忘れ、セミコロン忘れ、全角文字の混入などです。

コードをコピペした場合でも、自分のサイトに合っていないセレクタだと効きません。

ウェルカ編集長

CSSは1文字違うだけで効かないことがあります。難しいコードを疑う前に、まず基本の書き間違いを見ましょう。

たとえば、正しいCSSの基本形は次のようになります。

.sample-box {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
}

CSSが効かないときは、まず小さなコードで試すのがおすすめです。

最初から複雑な装飾を入れると、どこが原因なのか分かりにくくなります。

原因6：テーマ側のCSSに上書きされている

CSSの書き方が合っていても、テーマ側のCSSに上書きされて反映されないことがあります。

テーマやブロックによっては、かなり具体的なCSSがすでに設定されています。

その場合、追加CSSに書いた指定が優先順位で負けてしまうことがあります。

ウェルカ編集長

CSSが合っているのに効かないときは、テーマ側の指定に負けている可能性があります。これはWordPressではよくあります。

たとえば、単純な指定で効かない場合は、親要素を含めて書く方法があります。

.entry-content .my-center-area {
  text-align: center;
}

ただし、強い指定を増やしすぎると、あとでCSSが管理しづらくなります。

!important を多用すると、別の調整をしたいときに困ることがあるため、必要な場面だけにしましょう。

原因7：キャッシュが残っている

HTMLやCSSを直したのに表示が変わらない場合、キャッシュが原因のこともあります。

WordPressのキャッシュ系プラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNなどによって、古い表示が残ることがあります。

CSSの修正は、キャッシュの影響を受けやすい部分です。

ウェルカ編集長

コードは合っているのに変わらないとき、実はキャッシュを見ていただけというケースもあります。確認前にキャッシュ削除は大事です。

管理画面のプレビューでは変わっているのに、公開ページで変わらない場合は、キャッシュが原因の可能性があります。

特に、高速化プラグインやサーバーキャッシュを使っている場合は、修正後にキャッシュ削除を行いましょう。

原因8：スマホ表示だけ崩れている

PCではきれいに表示されているのに、スマホだけ崩れることがあります。

これは、横幅を固定していたり、余白を大きく取りすぎていたり、スマホ用のCSSが不足していたりする場合に起こりやすいです。

特に、HTMLで作ったボックス、横並びのカード、表、ボタンなどはスマホで崩れやすい部分です。

ウェルカ編集長

WordPressの装飾は、PCだけで確認すると危ないです。スマホで崩れていると、読者にはかなり見づらくなります。

たとえば、PCでは横並び、スマホでは縦並びにしたい場合は、次のように書きます。

.card-list {
  display: flex;
  gap: 20px;
}

@media screen and (max-width: 767px) {
  .card-list {
    display: block;
  }
}

スマホ表示の崩れは、CSSを少し調整するだけで改善することもあります。

ただし、構造そのものが複雑な場合は、HTMLの組み方から見直した方がよいこともあります。

HTML・CSSを触る前に確認したいこと

HTMLやCSSを修正するときは、いきなりコードを追加するのではなく、現在の状態を確認してから進めましょう。

特に事業用サイトでは、見た目だけでなく、問い合わせボタンやフォーム、スマホ表示への影響も確認する必要があります。

ウェルカ編集長

HTMLやCSSは、少しの変更で広い範囲に影響することがあります。特に共通パーツを触るときは慎重に進めましょう。

一度に大きく変更すると、どのコードが原因で崩れたのか分かりにくくなります。

HTMLやCSSを調整するときは、1つずつ変更して、その都度表示を確認しましょう。

自分で触らない方がいいケース

HTMLやCSSは、軽微な調整であれば自分で対応できることもあります。

ただし、サイト全体のレイアウトやテーマファイル、問い合わせ導線に関わる部分は、自己判断で触ると崩れる可能性があります。

特に、会社サイトや店舗サイトなど、問い合わせ獲得に使っているサイトでは慎重に対応しましょう。

ウェルカ編集長

「中央寄せしたいだけ」のつもりでも、共通CSSを触ると他のページまで変わることがあります。分からない場合は無理に触らない方が安全です。

相談するときは、「どのページのどの部分をどう変えたいのか」をスクリーンショット付きで伝えるとスムーズです。

また、すでに入れたHTMLやCSSがある場合は、そのコードも一緒に共有すると原因を見つけやすくなります。

よくある質問

まとめ：HTML・CSSがうまく表示されないときは、場所と対象を確認しよう

WordPressでHTML・CSSがうまく表示されないときは、まずコードを入れる場所を確認しましょう。

HTMLはカスタムHTMLブロック、CSSは追加CSSやテーマ独自のCSS欄に書くのが基本です。

また、中央寄せのような見た目調整では、文字を中央にしたいのか、ボックス自体を中央にしたいのかでCSSが変わります。

ウェルカ編集長

HTML・CSSの不具合は、入れる場所・対象の指定・キャッシュ・スマホ表示を順番に見ると原因を切り分けやすいです。

HTMLやCSSは、慣れると細かいデザイン調整ができる便利な方法です。

ただし、事業用サイトで使う場合は、見た目だけでなく、スマホ表示や問い合わせ導線への影響も確認しながら慎重に進めましょう。

WELUCA

ウェルカ

大阪府でホームページ制作をしています。WordPress・SEO・Webマーケティングのコンテンツを発信中！