「WordPress（ワードプレス）でCSSはどこに書くのかわからない」「編集しても反映されない原因がつかめない」と悩む方もいるでしょう。
CSSは複数の場所に記述できるため、正しい方法を理解していないと表示崩れや反映されない問題が発生します。一方で、用途に応じてCSSを書く場所を使い分ければ、意図したデザインを反映可能です。
本記事では、CSSの記述場所や反映されない原因・対処法、効率的な編集方法まで解説します。
WordPressのCSSとは？どこにある？
WordPressのCSSは、サイトデザインを制御する重要な要素です。本章では、CSSに関する基礎知識について解説します。
- CSSの定義
- CSSファイルが保存されている場所
- 親テーマと子テーマの関係性
基礎から構造まで把握することで、編集時のミスや反映されない原因も判断しやすくなります。順に確認して理解を深めていきましょう。
CSSの定義
CSSとはWebページの見た目や配置を制御するスタイル定義言語です。
HTMLが文章構造を担う一方で、CSSは文字サイズや色、余白、配置などの装飾を細かく指定し、ユーザーにとって見やすい画面を構築する役割を持ちます。
CSSの主な役割は、以下のとおりです。
- 文字色やフォントサイズの指定
- 余白や配置などレイアウトの調整
- 背景色や枠線など装飾の設定
WordPressではテーマごとにCSSが管理され、複数ページへ同一デザインを一括適用できる仕組みが採用されています。CSSの機能を理解しておくことで、CSS編集時の表示崩れや反映されない問題の原因特定が容易になるでしょう。
CSSファイルが保存されている場所
WordPressのCSSファイルはテーマ内のstyle.cssと管理画面の追加CSSに保存されます。
WordPressでは、外観デザインを制御するCSSがテーマ単位で管理され、style.cssと追加CSSという異なる場所に分けて扱われる仕組みが採用されています。保存先ごとに役割が異なるため、編集内容に応じた使い分けが重要でしょう。
CSSファイルの主な保存場所は、以下のとおりです。
- style.css：テーマフォルダ内に保存
- 追加CSS：管理画面から登録されデータベースに保存
保存場所の違いを理解することで、編集内容が反映されない原因や修正箇所の特定がスムーズに進みます。
親テーマと子テーマの関係性
親テーマと子テーマはアップデートによるCSS変更の消失を防ぐための仕組みです。
WordPressでは、親テーマがサイト全体のデザインや機能を担い、子テーマは差分のみを上書きしてカスタマイズを行う構造が採用されています。親テーマを直接編集すると更新時に変更が失われるため、運用では子テーマの活用が前提です。
親テーマと子テーマの役割の違いは、以下のとおりです。
- 親テーマ：更新により機能やデザインが変更される基盤
- 子テーマ：編集内容を保持しつつ安全にカスタマイズを継続
仕組みを理解して運用することで、テーマ更新後も意図したデザインを維持しながら安定した管理が可能になるでしょう。
WordPressのCSSを安全に追加・編集する方法
WordPressのCSSは、以下の方法により追加・編集が可能です。
- 子テーマを作成してstyle.cssを編集する
- 追加CSS機能を利用する
- 専用プラグインを追加して編集する
- FTPソフトを使って直接ファイルを編集する
目的やリスクに応じた最適な方法を理解し、環境に合った手段を選択できるよう順に確認していきましょう。
なお、WordPressの使い方について詳しく解説した記事もあるため、あわせてご覧ください。
WordPressを初めて開くと、なにから触ればいいのか分からず戸惑う方が多いものです。画面に見慣れない言葉が並び「自分に扱えるのだろうか」と不安を感じることもあるのではないでしょうか。ですが、WordPressは順番に覚えていけ[…]
子テーマを作成してstyle.cssを編集する
子テーマを作成してstyle.cssを編集すれば、親テーマ更新による上書きを防ぎながら安全にCSSを管理できます。
WordPressでは親テーマがサイトの基本構造とスタイルを担い、アップデート時にはファイル内容が自動的に更新される仕様です。親テーマのstyle.cssを直接編集すると変更が消えるため、カスタマイズ内容は子テーマに分離して管理する必要があります。
子テーマのstyle.cssは親テーマの設定を引き継ぎつつ、追加したCSSのみを上書きする仕組みで読み込まれます。読み込み順により、デザイン変更を維持したまま親テーマの最新機能も取り込み可能です。
仕組みを理解して運用することで、更新の影響を受けずに安定したカスタマイズ環境を維持できるでしょう。
追加CSS機能を利用する
追加CSS機能は、テーマ仕様に応じて管理画面から手軽にCSSを追加し反映を確認できる方法です。
WordPressでは、従来テーマを使用している場合、「外観」内のカスタマイズから追加CSSを入力でき、変更内容をプレビューで確認しながら調整できます。ブロックテーマを使用している場合は「外観」内の「エディター」から編集する仕組みに切り替わります。
追加CSS機能を利用する場所は、以下のとおりです。
- 従来テーマ：外観 → カスタマイズ → 追加CSSに入力
- ブロックテーマ：外観 → エディター → スタイルから調整
テーマによって操作画面が異なるため、現在の環境に応じた方法を選択しましょう。追加CSSの仕組みを理解しておくと、画面構成が変わっても迷わず対応できます。
専用プラグインを追加して編集する
専用プラグインを使えば、テーマファイルを直接触らずにCSSを追加・管理できます。
WordPressでは、管理画面上で編集できるプラグインを導入することで、コードの保存先や適用範囲を整理しやすくなります。ファイル操作に不慣れな場合でも扱いやすく、編集ミスによる影響を抑えやすい点もメリットです。
CSS編集に使える主なプラグインの種類は、以下のとおりです。
- サイト全体にCSSを適用するタイプ
- 固定ページなどページごとにCSSを設定するタイプ
全体の見た目をまとめて調整したい場面では前者が適しており、特定ページだけデザインを変えたい場面では後者が向いています。目的に合ったプラグインを選ぶことが、無駄のない運用につながります。
FTPソフトを使って直接ファイルを編集する
FTPソフトを使って直接ファイルを編集すればサーバー上のCSSを柔軟にカスタマイズできます。
WordPressでは、FTPソフトを用いてサーバーに接続し、テーマフォルダ内のstyle.cssなどを直接編集する方法が用意されています。ローカルのエディターで編集した内容をアップロードするため、細かな調整や大規模な変更にも対応しやすい点が特徴です。
FTPソフトを使ったファイル編集の主な流れは、以下のとおりです。
- FTPでサーバーへ接続
- テーマフォルダ内のCSSファイルをダウンロード
- エディターで編集後にアップロード
複数人での開発や高度なカスタマイズを行う場合に適しており、変更履歴を管理しながら作業できる点もメリットです。一方で操作ミスによる影響範囲が広がりやすいため、バックアップを前提とした運用が求められます。
WordPressブロックエディタの「追加CSSクラス」の活用法
ブロックエディタの追加CSSクラスを活用すれば柔軟なデザイン調整が可能です。本章では、追加CSSクラスの代表的な使い方を紹介します。
- 特定のブロックだけをピンポイントで装飾する
- よく使う装飾をクラス化して執筆作業を効率化する
ブロックエディタの特性を理解し、追加CSSクラスを適切に使い分けることで作業効率と表現の幅を同時に高められるでしょう。
特定のブロックだけをピンポイントで装飾する
特定のブロックだけをピンポイントで装飾するには追加CSSクラスを設定して対象を限定します。
ブロックエディタでは、編集画面で対象ブロックを選択し、右側の設定パネルから追加CSSクラスを入力することで、指定した要素のみにスタイルを適用できます。全体のデザインに影響を与えず、必要な箇所だけ見た目を変更できる点がポイントです。
追加CSSクラスの設定手順は、以下のとおりです。
1.装飾したいブロックを選択
2.右側の設定パネルを開く
3.ブロック＞高度な設定＞追加CSSクラス欄に任意のクラス名を入力
入力したクラス名に対してCSSを記述することで、対象ブロックのみ装飾が反映されます。細かい調整を行う際に有効な方法といえるでしょう。
よく使う装飾をクラス化して執筆作業を効率化する
よく使う装飾はCSSクラスとして事前に登録しておくことで執筆作業を効率化できます。
ブロックエディタでは、あらかじめCSSに装飾パターンを登録しておくことで、同じデザインを何度も簡単に再利用できます。style.cssや追加CSS欄にクラス名と装飾内容を記述しておくことが前提です。
CSSをクラス化して使用する基本的な流れは、以下のとおりです。
- style.cssまたは追加CSSにクラスを記述
- ブロックエディタの設定から追加CSSクラスを入力
- 同じクラス名を指定して装飾を再利用
一度クラスを用意すれば入力だけで装飾が適用されるため、固定ページや記事作成時の手間を減らしつつ、全体のデザイン統一も実現できます。
WordPressでCSSが反映されない原因と解決策
WordPressでCSSが読み込まれない原因は複数あり、切り分けが重要です。本章では、CSSが反映されない主な原因と解決策を解説します。
- 古いキャッシュが残っている
- CSSの優先順位が低い
- 全角スペースやスペルミスなどがある
- メディアクエリ（@media）の記述に誤りがある
原因ごとの対処法を把握することで、CSSが読み込まれない問題を効率よく解消できるでしょう。
古いキャッシュが残っている
古いキャッシュが残っていると、修正後のCSSが読み込まれず反映されない状態になります。
ブラウザやサーバーには表示を速くする一時保存機能があり、CSSを更新しても古い情報が優先される場合があります。コードに問題がないのに見た目が変わらない場合は、記述内容ではなくキャッシュの影響を疑うことが重要です。
古いキャッシュの対処方法は、以下のとおりです。
- WindowsはCtrl＋F5、またはCtrl＋Shift＋Rでスーパーリロード
- MacはCommand＋Shift＋Rで再読み込み
- 改善しない場合はブラウザやプラグインのキャッシュクリアを実施
スーパーリロードは保存済みの古い表示を使わず、最新データを強制的に読み込み直す方法です。最初に試すことで、反映されない原因がキャッシュであるかを切り分けやすくなります。
CSSの優先順位が低い
CSSの優先順位が低いと、指定したスタイルが他の設定に上書きされて反映されません。
WordPressでは複数のCSSが同時に読み込まれるため、より詳しく指定されたルールが優先されます。単純な指定では、テーマやプラグイン側のスタイルに負けてしまい、見た目が変わらない状態になるでしょう。
原因の確認は、デベロッパーツールを使うと効果的です。対象要素を検証すると、どのCSSが適用され、どれが打ち消されているかを視覚的に確認できます。
優先順位が原因で反映されない場合の対処方法は、以下のとおりです。
- 「.title」→「.content .title」のように親要素を追加して範囲を限定
- 「.btn」→「.post .btn.primary」のようにクラス名を増やして条件を細かく指定
指定条件を具体的に増やすことで優先順位が高まり、意図したスタイルが正しく適用されます。
全角スペースやスペルミスなどがある
全角スペースやスペルミスがあるとCSSは正しく解釈されず反映されない原因になります。
CSSは記述ルールが厳密に決まっており、わずかな入力ミスでもブラウザが正しく読み取れません。特に全角スペースの混入やプロパティ名のスペル違いは見落としやすく、原因に気づきにくい点です。
CSSの記述で陥りやすいミスは、以下のとおりです。
- 全角スペースを入力している
- プロパティ名のスペルミス
- セミコロン「;」の付け忘れ
- 波かっこ「{}」の閉じ忘れ
記述ミスがあると一部だけでなく、後続のCSSも無効になる場合があります。入力内容を一行ずつ確認し、ミスを修正することで反映されない問題を解消できるでしょう。
メディアクエリ（@media）の記述に誤りがある
メディアクエリの記述に誤りがあるとスマホ表示だけCSSが反映されない原因になります。
WordPressでは画面サイズごとにスタイルを切り替えるため@mediaを使いますが、条件の指定ミスや記述位置の誤りがあると、スマホ表示に適用されません。幅や単位の指定が一致しない場合、条件が成立せず読み込み対象から外れます。
スマホ表示でCSSが反映されない主な原因は、以下のとおりです。
- 「max-width」の数値や単位の誤り
- 波かっこの閉じ忘れによる記述崩れ
- @media内に記述する位置の誤り
パソコン表示では正常でもスマホ表示だけ崩れる場合は、条件式と記述範囲を見直す必要があります。デベロッパーツールで画面サイズを切り替えながら確認すると、原因特定がスムーズに進みます。
WordPressテーマのCSS編集でできること
WordPressテーマのCSS編集を行うことで、見た目と使いやすさを改善できます。本章では、CSS編集でできることを解説します。
- 見出しデザイン変更で視認性を向上させる
- フォントや文字色を調整してブランド感を出す
- スマホやPCなどに合わせてレイアウトを最適化する
ユーザー体験を高める方法として、確認していきましょう。
見出しデザイン変更で視認性を向上させる
見出しデザインをCSSで調整すると視認性が向上し、重要な情報を強調できます。
WordPressでは見出しタグに対して背景色やボーダー、余白などを指定することで、文章構造を視覚的にわかりやすく整理できます。単調な見た目から脱却できるため、読者が内容を把握しやすくなる点がメリットです。
見出しデザイン変更でできる具体的な調整内容は、以下のとおりです。
- 背景色を追加して見出しを目立たせる
- 下線や枠線を加えて区切りを明確にする
- 余白を調整して読みやすさを改善する
見出しごとにデザインを最適化することで、記事全体の流れが整理され、離脱防止や理解度向上につながります。
フォントや文字色を調整してブランド感を出す
フォントや文字色をCSSで調整するとサイト全体のブランド感を統一できます。
WordPressではフォントの種類や文字サイズなどを細かく指定できるため、サイトのコンセプトに合わせた見た目を構築できます。視認性と印象を同時に整えられる点がポイントです。
フォントや文字に関する具体的な変更内容は、以下のとおりです。
- フォントの種類や太さを変更
- 文字の色をブランドカラーに統一
- 行間や文字間隔を調整して読みやすさを改善
細部まで設定を揃えることで、記事全体に一貫性が生まれ、信頼感のあるデザインへと仕上がります。読者にとって好印象となるうえでも重要な要素といえるでしょう。
スマホやPCなどに合わせてレイアウトを最適化する
スマホやPCなどに合わせてレイアウトを最適化するとレスポンシブ対応で見やすさを維持できます。
WordPressでは画面サイズに応じてレイアウトを切り替えるレスポンシブ設計が可能であり、CSSを使って表示内容を柔軟に調整できます。端末ごとに見やすさを保つことで、ユーザー体験の向上につながるでしょう。
レイアウト調整で実現できる内容は、以下のとおりです。
- 画像の幅を画面サイズに応じて自動調整
- 要素の配置を縦並びや横並びに切り替え
- 余白を調整して読みやすさを維持
画面幅に合わせて表示を最適化することで、スマホでもPCでも情報が整理された状態で表示され、どの端末から閲覧しても快適なデザインを実現できます。
WordPressの表示速度を上げるCSSの最適化方法
WordPressの表示速度は、CSSの最適化によって改善できます。本章では、WordPressの表示速度を上げるCSSの最適化方法を解説します。
- 未使用のCSSを特定して削除する
- 最適化プラグインでCSSを縮小・軽量化
無駄な読み込みを減らすことで表示速度が向上するため、方法を確認していきましょう。
未使用のCSSを特定して削除する
未使用のCSSを特定して削除すると読み込み負荷が減り表示速度を改善できます。
WordPressではテーマやプラグインの影響で使われていないCSSが残りやすく、不要なコードが増えるほど読み込み時間が長くなります。表示に影響しない部分を整理することで、無駄な通信を減らし、表示速度の向上が可能です。
不要なCSSの特定と削除は、次の流れで進めます。
- デベロッパーツールで未使用スタイルを確認
- 該当するCSSファイルや記述箇所を特定
- 影響範囲を確認しながら段階的に削除
一度にまとめて削除するとレイアウト崩れが起きやすいため、変更後は表示確認を行いながら進めましょう。整理を進めることで安定した高速表示を実現できます。
最適化プラグインでCSSを縮小・軽量化
最適化プラグインを使えばCSSファイルを自動で縮小し軽量化できます。
WordPressでは最適化プラグインを導入することで、CSSファイル内の不要な記述を削除し、データ量を抑える処理を自動化できます。人手で調整する手間を省きながら、読み込み速度の改善を図れる点がメリットです。
最適化プラグインの主な処理内容は、以下のとおりです。
- 改行や空白を削除して容量を削減
- 複数のCSSファイルをまとめて読み込み回数を削減
- 不要なコードを圧縮して通信量を軽減
設定後はファイルが最適化された状態で配信されるため、ページ表示までの時間を短縮できます。導入後は表示崩れがないか確認しながら運用しましょう。
まとめ
WordPressのCSS編集で迷う方へ、本記事のポイントを整理します。
CSSは複数の場所に記述できるため、用途に応じた使い分けが重要です。
- 子テーマ：更新による上書きを防ぎながら安全に管理
- 追加CSS：管理画面から手軽に反映を確認
- プラグイン：適用範囲を整理しながら柔軟に編集
- FTP編集：高度なカスタマイズや複数人作業に対応
反映されない場合は原因の切り分けも欠かせません。
- キャッシュの影響を確認
- CSSの優先順位を見直す
- 記述ミスやスペルをチェック
- メディアクエリの条件を確認
CSSの仕組みと編集方法を理解し、適切な場所に書くことで、安全かつ狙いどおりのデザイン調整が可能になるでしょう。
なお、WordPressでCSSを活用した記事を書くなら、WordPressの簡単インストールに対応したロリポップ！レンタルサーバーが便利です。これからWordPressの利用を検討している方は、ロリポップ！レンタルサーバーを検討してみましょう。
