WordPressの追加CSSはどこ？場所と使い方を初心者向けに解説

WordPressで文字の色や余白、ボタンの見た目などを少し変えたいときに使うのが「追加CSS」です。

ただ、WordPressを触り始めたばかりだと、「追加CSSはどこにあるの？」「テーマ編集と何が違うの？」「CSSを入れたのに反映されないのはなぜ？」と迷うことがあります。

追加CSSは、テーマファイルを直接編集せずに見た目を調整できる便利な機能です。

ウェルカ編集長

追加CSSは、ちょっとした見た目調整にはかなり便利です。ただし、何でも追加CSSで直そうとすると、あとで管理しづらくなることもあります。

この記事では、WordPressの追加CSSがどこにあるのか、基本的な使い方、反映されないときの原因と解決策を初心者向けに解説します。

WordPressの追加CSSはどこにある？

WordPressの追加CSSは、基本的には管理画面の「外観」から開きます。

クラシックテーマを使っている場合は、次の場所から追加CSSを開けることが多いです。

WordPress公式でも、現在のテーマをカスタマイズするときに「追加CSS」タブを選べば、テーマファイルや子テーマを直接編集せずにCSSを追加できると説明されています。

公式：WordPress Advanced Administration Handbook：CSS

ウェルカ編集長

まず探す場所は「外観」→「カスタマイズ」→「追加CSS」です。テーマによって表示場所が少し違う場合もありますが、最初はここを確認しましょう。

ただし、使っているテーマやWordPressの編集画面によっては、「外観」→「カスタマイズ」が見当たらない場合もあります。

その場合は、ブロックテーマを使っている可能性があります。

ブロックテーマの場合は場所が違うことがある

WordPressには、大きく分けてクラシックテーマとブロックテーマがあります。

クラシックテーマでは「外観」→「カスタマイズ」→「追加CSS」からCSSを入れることが多いです。

一方、ブロックテーマでは、サイトエディターやスタイル設定からデザインを調整することがあります。

WordPress.comのサポート資料でも、サイトエディターを使わないテーマでは「外観」→「カスタマイズ」→「追加CSS」からCSSを追加する流れが案内されています。 [oai_citation:1‡WordPress.com](https://wordpress.com/support/editing-css/?utm_source=chatgpt.com)

ウェルカ編集長

ネット記事では「外観→カスタマイズ」と書かれていても、自分の画面に出てこないことがあります。これはWordPressが壊れているのではなく、テーマの種類が違うだけの場合があります。

追加CSSの場所が見つからない場合は、まず使用中のテーマ名を確認しましょう。

そのうえで、テーマの公式マニュアルや管理画面の「外観」メニューを見て、CSSを追加できる場所を探すのが安全です。

追加CSSの基本的な使い方

追加CSSでは、CSSコードを入力して、サイトの見た目を調整できます。

たとえば、見出しの色を変える、余白を調整する、ボタンの角丸を変える、特定の要素を非表示にする、といった調整ができます。

ただし、CSSは「どの部分に対して」「どんな見た目を適用するか」を正しく書く必要があります。

例として、本文内の特定の要素にクラス名を付けて、色を変更する場合は次のように書きます。

.sample-text {
  color: #e60033;
}

この場合、sample-text というクラスが付いた要素の文字色が変わります。

ウェルカ編集長

追加CSSは便利ですが、「とりあえずネットのコードを貼る」だけだと効かないことも多いです。自分のサイトのHTML構造に合った指定が必要です。

CSSを入れたら、必ず公開前にプレビューで確認しましょう。

PCではきれいに見えていても、スマホでは崩れることがあります。

カスタムHTMLブロックに直接CSSを書く方法

最近のWordPress運用では、追加CSSだけでなく、カスタムHTMLブロックの中に直接CSSを書く方法も使えます。

たとえば、特定の固定ページや記事の中だけで使うデザインであれば、サイト全体の追加CSSに書くよりも、そのページ内のカスタムHTMLブロックにまとめた方が分かりやすい場合があります。

ウェルカ編集長

サイト全体に効かせたいCSSは追加CSS。特定ページだけで使うCSSはカスタムHTML内。こう分けると、あとから管理しやすくなります。

たとえば、カスタムHTMLブロックに次のように書くと、そのブロック内でCSSとHTMLをまとめて管理できます。

<style>
.sample-box {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
}

.sample-box-title {
  font-weight: bold;
  margin-bottom: 10px;
}
</style>

<div class="sample-box">
  <div class="sample-box-title">見出しテキスト</div>
  <p>ここに本文を入れます。</p>
</div>

この方法は、LP風のページや、特定の案内ブロックだけデザインを変えたいときに便利です。

カスタムHTMLに直接CSSを書く方法は便利ですが、サイト全体で使う共通デザインまでページ内に書くと、後から修正しづらくなります。

そのページだけで完結する装飾なのか、サイト全体で使う共通デザインなのかを分けて考えるとよいでしょう。

各ブロックにクラスを入れて、そのブロックだけにCSSを効かせる方法

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

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

たとえば、特定のボタンだけ色を変えたい、特定のカラムだけ余白を広げたい、特定の文章ブロックだけ背景色を付けたい、といったときに便利です。

ウェルカ編集長

これはかなり使いやすい方法です。全体ではなく「このブロックだけ変えたい」というときは、ブロックにクラス名を付けてCSSを書くのが安全です。

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

my-point-box

そのうえで、追加CSSに次のように書きます。

.my-point-box {
  background-color: #fff7f7;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e6b8b8;
}

これで、my-point-box というクラスを入れたブロックだけにCSSが効きます。

クラス名は、たとえば my-point-box、service-card、top-cta-button のように、何のための装飾か分かる名前にすると管理しやすくなります。

逆に、red や box のような短すぎる名前は、あとから何に使っているのか分かりにくくなります。

原因1：追加CSSの場所を間違えている

追加CSSが反映されない原因として、そもそもCSSを入れる場所を間違えているケースがあります。

WordPressには、追加CSS以外にも、テーマ独自のCSS入力欄、ブロックの高度な設定、ページビルダーのカスタムCSS欄などがあります。

どこに入れたCSSが、どの範囲に効くのかを理解していないと、「入れたのに変わらない」と感じることがあります。

ウェルカ編集長

CSSを入れる場所が複数あるテーマだと、どこに入れたか分からなくなりがちです。まずは「サイト全体に効かせたいのか」「特定のページだけなのか」を分けて考えましょう。

基本的には、サイト全体の軽微な見た目調整であれば「追加CSS」を使うのが分かりやすいです。

ただし、テーマやページビルダーによっては、専用のCSS欄が用意されている場合もあります。

原因2：CSSの指定が間違っている

追加CSSにコードを入れても反映されない場合、CSSの指定そのものが間違っている可能性があります。

たとえば、クラス名の前にドットがない、かっこが閉じていない、セミコロンが抜けている、対象の要素名が違う、といったミスです。

CSSは少しの書き間違いで効かなくなることがあります。

ウェルカ編集長

CSSは地味にシビアです。1文字抜けているだけで効かないことがあります。コピペしたコードでも、サイトに合っているか確認が必要です。

たとえば、次のような書き方は基本形です。

.sample-button {
  background-color: #e60033;
  color: #ffffff;
  border-radius: 8px;
}

CSSが効かないときは、いきなり複雑なコードを疑うのではなく、まずは基本的な書き間違いを確認しましょう。

原因3：セレクタの優先順位で負けている

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

CSSには優先順位があります。テーマ側で強い指定が入っている場合、追加CSSに書いた内容が上書きされてしまうことがあります。

たとえば、同じボタンに対して、テーマ側がより具体的な指定をしていると、単純なクラス指定では効かない場合があります。

ウェルカ編集長

CSSが合っているのに効かないときは、「書いたCSSが間違っている」のではなく、「テーマのCSSに負けている」ことがあります。

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

.entry-content .sample-button {
  background-color: #e60033;
}

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

!important を多用すると、あとから別の調整をしたいときに困ることがあるため、使う場合は慎重にしましょう。

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

追加CSSを書いたのに見た目が変わらない場合、キャッシュが原因のこともあります。

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

CSSは表示に関わるファイルなので、キャッシュの影響を受けやすい部分です。

ウェルカ編集長

CSSが反映されないときは、かなりの確率でキャッシュも疑います。特に高速化プラグインを使っているサイトでは要チェックです。

キャッシュを削除しても変わらない場合は、CSSの指定ミスやテーマ側の上書きもあわせて確認しましょう。

「公開画面だけ変わらない」「管理画面のプレビューでは変わる」という場合は、キャッシュの可能性が高くなります。

原因5：テーマ変更で追加CSSが効かなくなった

WordPress公式では、追加CSSはテーマに紐づくため、テーマを変更すると、そのCSSは新しいテーマでは有効にならないと説明されています。

つまり、以前のテーマで追加したCSSが、新しいテーマでは効かなくなることがあります。

テーマ変更後に見た目が変わった、以前のCSSが効かない、ボタンや見出しのデザインが戻ったという場合は、この可能性があります。

ウェルカ編集長

追加CSSは便利ですが、テーマ変更時には注意が必要です。前のテーマでは効いていたCSSが、新しいテーマではそのまま使えないことがあります。

テーマを変えると、HTML構造やクラス名が変わることがあります。

そのため、以前のCSSをそのまま貼り直しても効かない場合があります。

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

追加CSSを入れたあと、PCでは問題ないのにスマホだけ崩れることがあります。

これは、PC画面だけを見てCSSを書いてしまい、スマホ幅での表示を確認していない場合に起きやすいです。

特に、横幅、余白、文字サイズ、画像サイズ、ボタン幅などは、スマホ表示に影響しやすいです。

ウェルカ編集長

ホームページはスマホで見られることが多いです。PCだけきれいでも、スマホで崩れていたらもったいないです。

スマホだけ文字サイズを調整したい場合は、次のようにメディアクエリを使う方法があります。

@media screen and (max-width: 767px) {
  .sample-title {
    font-size: 20px;
  }
}

この例では、画面幅が767px以下のときだけ、.sample-title の文字サイズを変更します。

追加CSSで触らない方がいいケース

追加CSSは便利ですが、すべての修正を追加CSSで解決するのはおすすめできません。

特に、サイト全体のレイアウト変更や、テーマの根本的なデザイン変更、複数ページにまたがる複雑な修正は、追加CSSだけで対応すると管理が難しくなります。

ウェルカ編集長

追加CSSは「ちょっと直す」には便利です。でも、無理やり直し続けると、あとでどのCSSが何に効いているのか分からなくなります。

このような場合は、追加CSSで無理に上書きするより、テーマ設定、ブロック設定、子テーマ、テンプレート修正などを含めて見直した方が安全です。

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

よくある質問

まとめ：追加CSSは場所と反映条件を確認して使おう

WordPressの追加CSSは、テーマファイルを直接編集せずに、サイトの見た目を調整できる便利な機能です。

クラシックテーマでは「外観」→「カスタマイズ」→「追加CSS」から開けることが多いですが、ブロックテーマやテーマ独自設定では場所が違うこともあります。

ウェルカ編集長

追加CSSは便利ですが、効かないときは「場所」「書き方」「優先順位」「キャッシュ」「テーマ変更」を順番に確認しましょう。

追加CSSは、軽微なデザイン調整には便利な機能です。

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

WELUCA

ウェルカ

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