ChatGPTを活用したオウンドメディアのペルソナ策定方法
angleinc0913
合同会社Angle Inc.
【2025年版】WordPressでCSSを編集する方法5選
angleinc0913
WordPressでWebサイトを運営していると、「もう少し文字の大きさを調整したい」「このボタンの色だけ変えたい」といった細かい見た目の調整をしたくなる場面は多いものです。
そんなときに役立つのが「CSS（スタイルシート）」の編集です。しかし、「どこでCSSを書けばいいの？」「テーマファイルを触るのはちょっと怖い…」と不安に感じる方も少なくないはず。
この記事では、CSS編集方法を“難易度別”に5つご紹介し、それぞれの特徴やおすすめの使い方をわかりやすく解説していきます。
自分のレベルや目的に合った方法を選んで、理想のデザインを実現しましょう。
目次
WordPressでCSSを編集する方法
はじめに、WordPressでCSSを編集する方法を表にまとめるとこうなります。
それぞれの具体的な方法を下記で説明します。
追加CSSから編集
難易度：★☆☆（初心者向け）
WordPressに標準搭載されている「追加CSS」機能は、もっとも手軽にCSSを追加できる方法です。
管理画面の「外観」→「カスタマイズ」→「追加CSS」に進むと、小さなエディターが表示され、そこにCSSコードを直接書き込むことができます。
この方法の魅力は、リアルタイムで変更がプレビューできる点。コードを入力するたびに、サイトの見た目がその場で反映されるため、「このスタイルで大丈夫かな？」という不安も軽減されます。また、PCの他に、タブレット、スマホと画面サイズを切り替えられるのも便利です。
ただし、編集画面がやや狭く、コードが増えてくるとスクロールが大変になるのがデメリットです。また、あくまで一時的なCSS追加向けで、大規模なカスタマイズには向いていません。
ちょっとした調整や特定のスタイル変更には、最適な入り口です。
Simple Custom CSS and JS
難易度：★★☆（初心者〜中級者向け）
「Simple Custom CSS and JS」は、CSSだけでなくJavaScriptも追加できる便利なプラグインです。
特に魅力的なのは、CSSを複数のファイル（スニペット）に分けて管理できる点です。
たとえば「グローバルナビ用」「ボタン用」「モバイル対応用」など、用途別にまとめておけるので、後から編集や削除がしやすくなります。
ページごとに適用するCSSを指定することも可能ですが、その場合は「ページID」などの指定が必要になるため、若干の知識が求められます。
また、記述ミスによるレイアウト崩れもプラグイン内で完結するため、テーマファイルには一切影響を与えないという安心感もあります。「追加CSSでは足りないけど、テーマファイルには触りたくない」という方には、非常におすすめです。
Simple Custom CSS and JSの使用方法
1. プラグインページからSimple Custom CSS and JSをインストール、有効化します。
2. ダッシュボード画面の「+カスタムCSS&JS」をクリックして一覧画面を表示し、「CSSコードの追加」をクリックします。
3. CSSコードの編集画面が開きます。変更箇所は下記の通りです。
- 見出し画面…一覧に表示される名前です。「ヘッダー」「見出し」など、わかりやすい名前をつけるのがおすすめです。
- スラッグ…デフォルトでは4桁の数字が入ります。数字のままでも問題ありませんが、サーバーから操作する可能性がある場合などは分かりやすい名前にしておきましょう。
- エディター…任意のCSSを記載してください。<style></style>タグはデフォルトで埋め込まれているので、記載は不要です。
- オプション…CSSの読み込み場所や表示場所を変更できます。基本はデフォルトのままで問題ありません。
- 編集が完了したら、公開をクリックします。フロントエンドのページを表示して、スタイルが反映されていることを確認してください。
CSSがうまく反映されていない場合は、以下の記事を参考にしてみてください。
あわせて読みたい
追加CSSが効かない？WordPressでカスタマイズが反映されないときの確認ポイント
Scripts n Styles
難易度：★★☆（中級者向け）
「Scripts n Styles」は、各投稿・固定ページの編集画面から、そのページだけにCSSやJavaScriptを追加できるプラグインです。
特定ページのデザインを微調整したい場合に便利で、ページごとの個別対応が簡単に行えます。
注意点としては、プラグインの最終更新日が2年以上前のため、WordPressのバージョンとの互換性に不安があることです。テーマによっては正常に動作しないこともあるため、他の方法と併用する形で検討しても良いでしょう。
Scripts n Stylesの使用方法
1. プラグインページからScripts n Stylesをインストール、有効化します。
2. プラグインを有効化するだけで、投稿、固定ページの編集画面の下部に「Script n Styles」という項目が追加されるので、StylesタブをクリックしてCSSを入力してください。入力したCSSはこの記事のみに適用されます。（JavaScriptの場合はScriptsタブから編集してください）
テーマ編集画面（外観 → テーマファイルエディター）
難易度：★★☆（中級者向け）
WordPressの管理画面から「外観」→「テーマファイルエディター」に進むと、テーマに含まれるCSSファイル（style.css）を直接編集することができます。
コードエディターに慣れている方であれば、構造を見ながらまとめて編集できるため非常に効率的です。
ただし、この方法には重大なリスクもあり、ひとつでもコードを誤って削除・追加すると、テーマが壊れて「画面が真っ白になる」「管理画面にすら入れなくなる」ということも起こり得ます。直接編集は最終手段と考え、バックアップを取るなど慎重に進めましょう。
また、親テーマを編集した場合、テーマのアップデートで変更内容がすべて上書きされて消えてしまうという落とし穴もあります。この方法を使う場合は、必ず“子テーマ”を編集するようにしましょう。最近は無料テーマでも、子テーマが配布されていたり同時インストールがされたりするテーマがあります。
子テーマを作成してCSSを編集
難易度：★★★（上級者向け）
本格的にサイトをカスタマイズしていくなら、子テーマを作成してCSSを編集するのが最も確実かつ推奨される方法です。
子テーマとは、親テーマ（既存テーマ）の機能やデザインを引き継ぎながら、自分用のカスタマイズを行うための“別のテーマファイル”です。
最大のメリットは、親テーマのアップデートで変更が上書きされないこと。
たとえば親テーマがバージョンアップしても、子テーマで行ったCSS変更はそのまま残るため、メンテナンス性が非常に高くなります。
子テーマの作成には、functions.phpやstyle.cssなどのファイルを自分で用意する必要がありますが、一度設定してしまえば安心して編集を続けられます。
プラグインや「追加CSS」に頼る必要もなくなるため、サイトを長期的に育てていきたい方には最もおすすめの方法です。
あわせて読みたい
WordPressの子テーマとは？作る理由と基本の作り方を解説！
まとめ
WordPressでCSSを編集する方法は、大きく分けて「簡単に始められる方法」と「しっかり管理できる本格的な方法」に分かれています。
まずは、追加CSSやプラグインなどで手軽に始め、徐々に子テーマなどにステップアップしていくのが無理のない進め方です。
CSSの力を使えば、見た目の自由度は一気に広がります！目的やスキルに応じて最適な方法を選び、WordPressサイトを“自分らしいデザイン”に育てていきましょう。
ABOUT ME
