WordPressテーマのカスタマイズ入門｜初心者が安全に進める4段階の手順

WordPressテーマのカスタマイズは、「①テーマ独自の設定画面→②カスタマイザー→③追加 CSS→④子テーマでファイル編集」の順に試すのが安全です。番号が小さいほど操作が簡単で、失敗したときも戻しやすくなります。

この記事では、各段階の開き方と手順、つまずきやすい点、やってはいけない編集方法を初心者向けに解説します。

※本記事の情報は2026年10月11日時点で各公式サイトの記載を確認したものです。管理画面の名称はWordPress 7.1系のものです。

カスタマイズの4段階マップ

カスタマイズの方法は4段階あり、①から順に「その方法でできないか」を確かめて、足りないときだけ次へ進みます。

段階	できること	難易度	テーマ更新で消えるか
①テーマ独自の設定画面	色・レイアウト・SNSボタン・広告など（テーマによる）	低	消えない（多くのテーマ）
②カスタマイザー	サイト名・ロゴ・メニューなど（項目はテーマにより異なる）	低	消えない
③追加 CSS	見出しの色など、ピンポイントのデザイン調整	中	消えない
④子テーマでファイル編集	機能の追加・HTML構造の変更など	高	子テーマなら消えない（親テーマの直接編集は消える）

②③の設定はWordPressのデータベースに保存されるので、テーマ本体を更新しても消えません。①のテーマ独自の設定も、多くのテーマではデータベースに保存されます。④はテーマのファイルそのものを書き換えるため、子テーマを使わないと更新のときに上書きされます。

テーマとプラグインの役割の違いは、テーマとプラグインの違いで解説しています。

段階1: テーマ独自の設定画面を使う

まず使いたいのは、テーマが独自に用意している設定画面です。CSSを書かなくても、クリック操作だけで色や装飾を変えられるように作られています。

テーマ	設定の場所	変えられるもの
Cocoon	管理画面の「Cocoon設定」	スキン（100種類以上）・ヘッダー・SNSシェアボタン・広告など、30以上のタブに設定がまとまっている
SWELL	管理画面の「SWELL設定」→「エディター設定」	ボタンやマーカーなど、記事の装飾の色（カラーパレットは「カラーセット」タブ）
SWELL	カスタマイザーの「投稿・固定ページ」→「コンテンツのデザイン」	見出しのデザイン（テーマがカスタマイザーに追加した独自の項目も①に含みます）

詳しい設定内容はCocoonレビューとSWELLレビューで紹介しています。ほかのテーマでも、「テーマ名＋やりたいこと」で公式マニュアルを探すと、設定画面だけで済む方法が見つかることがあります。

CSSを書き始める前に、同じことが設定画面でできないかを確認しましょう。この順番を守るほど、あとで管理する変更が少なくなります。

段階2: カスタマイザーで色・ロゴ・メニューを変更

カスタマイザーは、クラシックテーマで「外観」→「カスタマイズ」から開く、WordPress標準のデザイン設定画面です。変更を画面で確かめてから公開できます。

• 「外観」→「カスタマイズ」を開く：管理画面の左メニューから選びます
• 変えたい項目を選ぶ：サイト基本情報（サイト名・ロゴ）・色・メニュー・ウィジェットなどが並びます。項目はテーマにより異なります
• 右側のプレビューで確認する：この時点では、公開中のサイトにはまだ反映されません
• 上部の「公開」を押す：押した時点で公開中のサイトに反映されます

国内シェア上位のSWELL（9.7%）・Cocoon（5.8%）・Lightning（3.7%）は、いずれもカスタマイザーを使うクラシックテーマです（シェアはWP-Search 2026年1月調査、テーマの種類は2026年10月時点）。当サイトもSWELL（子テーマ「SWELL CHILD」）で運営しています。

一方、ブロックテーマ（Twenty Twenty-Fiveなど）では、「外観」に「カスタマイズ」が出ないことがあり、代わりに「外観」→「エディター」でデザインを編集します。見分け方はブロックテーマとクラシックテーマの違いで解説しています。

段階3: 追加 CSSでピンポイント調整

設定画面にない細かなデザイン変更は、「追加 CSS」に書くのが安全です。データベースに保存されるので、テーマを更新しても消えません。

テーマの種類	追加 CSSの場所
クラシックテーマ	「外観」→「カスタマイズ」→「追加 CSS」
ブロックテーマ	「外観」→「エディター」→「スタイル」

CSSを入力するとプレビューに反映されるので、見た目を確かめてから「公開」（保存）を押します。たとえばH2見出しの文字色を青系に変えたいなら、次のような1行を貼り付けます。

h2.wp-block-heading { color: #1a6dbf; }

このクラス名は、ブロックエディターで作った見出しに付くものです（WordPress 6.2から）。テーマ側のCSSが強い場合は、これだけでは色が変わらないことがあります。

変えたい場所のクラス名を調べる

クラス名は、ブラウザの開発者ツールで調べられます。Chromeなら変えたい部分を右クリックして「検証」を選ぶと、その部分のHTMLとクラス名が表示されます。表示されたclass名を「.クラス名」の形で使えば、狙った場所だけを装飾できます。

追加 CSSの注意点

• 何を変えたかメモを残す：テーマ独自のクラス名は大型更新で変わることがあり、書いた理由が分からなくなると直せません
• テーマごとに保存される：別のテーマに切り替えると、それまでの追加 CSSは新しいテーマには反映されません
• 先に設定画面を確認する：段階1・2で同じことができるなら、そちらを使います

段階4: 子テーマでファイル編集（本格カスタマイズ）

PHPでの機能追加やHTML構造の変更など、①〜③でできないことは、子テーマを作ってファイルを編集します。

子テーマは、親テーマの機能を引き継ぎながら、変更部分だけを別のファイルで管理する仕組みです。子テーマ側を編集していれば、親テーマを更新してもカスタマイズは残ります。

SWELLやCocoonは公式の子テーマを配布しているので、自作せずにダウンロードして使えます。仕組みは子テーマとは何かの解説、作り方と編集手順は子テーマの作り方ガイドをご覧ください。

やってはいけないカスタマイズ3つ

次の3つは、サイトが表示されなくなったり、カスタマイズが消えたりする原因になりやすい操作です。

• 親テーマのファイルを直接編集する：その場ではうまくいっても、テーマを更新すると上書きされて消えます。ファイル編集は子テーマで行います
• テーマファイルエディターでいきなり編集する：PHPを書き間違えると、サイトが表示されなくなることがあります。詳しくはテーマファイルエディターの解説をご覧ください
• 出典の分からないコードを丸ごと貼る：古い記事のコードは今のWordPressで動かないことがあり、エラーの原因になります。意味が分かる範囲で使いましょう

テーマファイルエディターは、クラシックテーマでは「外観」、ブロックテーマでは「ツール」の中にあります（wp-config.phpでDISALLOW_FILE_EDITを設定していると表示されません）。

WordPress 4.9.0からは、有効なテーマのPHPを保存したときに致命的なエラーを検出して元に戻す仕組みがあります。ただし確実ではなく、FTPでの復旧が必要になることもあります。段階3以降の作業の前には、バックアップを取っておきましょう。

目的別：どの段階で変えればいい？

やりたいことが決まっているなら、下の表で最初に試す段階を確認してください。

やりたいこと	最初に試す段階
サイト名・ロゴ・メニューを変えたい	②カスタマイザー（ブロックテーマは「外観」→「エディター」）
ボタンや見出しなど、記事の装飾を変えたい	①テーマ独自の設定画面
特定の場所の色や余白だけ変えたい	③追加 CSS
PHPで機能を足したい・HTMLの構造を変えたい	④子テーマでファイル編集

①②で足りない場面が多いなら、テーマ自体が目的に合っていないのかもしれません。テーマの選び方はWordPressテーマの選び方で解説しています。

よくある質問

CSSの知識がなくてもカスタマイズできますか？

できます。SWELLやCocoonなどは、テーマの設定画面とカスタマイザーで色や装飾を変えられるように作られています。CSSが必要になるのは、設定画面にない細部を調整したいときです。

カスタマイズした内容は、テーマを変えても残りますか？

テーマ独自の設定・カスタマイザーの多くの設定・追加 CSSはテーマごとに保存されるため、切り替えると新しいテーマには反映されません（サイト名やメニュー自体は残ります）。全体像はテーマ変更のリスクと対策で解説しています。

追加 CSSを書いたのに反映されないときは？

まずブラウザとキャッシュ系プラグインのキャッシュを削除して確認します。それでも変わらなければ、クラス名の書き間違いか、テーマ側のCSSが優先されていることが考えられます。開発者ツールでクラス名を確かめ直してください。

カスタマイズに失敗したら元に戻せますか？

段階1〜3は、元の設定に戻せば復旧できます。段階4のファイル編集はサイトが表示されなくなるおそれがあるので、事前のバックアップが欠かせません。

まとめ: ①→④の順に試し、必要な段階まででやめる

WordPressテーマのカスタマイズは、「①テーマ独自の設定画面→②カスタマイザー→③追加 CSS→④子テーマ」の順に検討し、目的を達成できた段階でやめるのが安全です。

段階	押さえること
①設定画面	まず開いて、何ができるかを把握する
②カスタマイザー	プレビューで確認してから「公開」
③追加 CSS	変更内容のメモを残す
④子テーマ	バックアップを取ってから編集する

まずは今のテーマの設定画面をひととおり開いてみましょう。カスタマイズしやすいテーマへの乗り換えも考えるなら、下の無料診断で自分に合うテーマを確認してみてください。

テーマの導入から有効化までの基本の流れは、WordPressテーマのインストール方法で解説しています。