WordPressのカスタマイズ画面でできること|サイトエディターとの違いも初心者向けに解説

WordPress

WordPressでサイトのロゴや色、メニュー、ヘッダーなどを整えようとすると、「外観」にある画面の名称や項目が解説記事と違い、戸惑うことがあります。「カスタマイズ」が見つかるサイトもあれば、「エディター」と表示されるサイトもあるためです。

これは不具合とは限りません。WordPressでは、使用中のテーマの種類によって外観を編集する主な画面が変わります。クラシックテーマでは主に「カスタマイザー」、ブロックテーマでは主に「サイトエディター」を使います。さらに、同じ種類のテーマでも、用意されている設定項目はテーマごとに異なります。

この記事では、WordPressのカスタマイズ画面でできることを初心者向けに整理します。カスタマイザーとサイトエディターの違い、変更できる代表的な項目、編集前に確認したいこと、失敗を避ける進め方まで順に解説します。

  1. WordPressの「カスタマイズ画面」は一つではない
  2. カスタマイザーとサイトエディターの違い
    1. カスタマイザーはクラシックテーマで使われる
    2. サイトエディターはブロックテーマで使われる
    3. テーマ独自の設定画面が併用されることもある
  3. 自分のサイトがどちらの方式か確認する方法
  4. カスタマイザーで変更できる代表的な項目
    1. サイト基本情報
    2. 色や背景
    3. ヘッダーや背景画像
    4. メニュー
    5. ウィジェット
    6. ホームページ設定
    7. 追加CSS
  5. サイトエディターで変更できる代表的な項目
    1. スタイル
    2. ナビゲーション
    3. テンプレート
    4. パターンとテンプレートパーツ
    5. ページ
  6. 変更したい内容から編集画面を選ぶ
  7. カスタマイズ前に確認したいこと
    1. 現在の状態を記録する
    2. バックアップを用意する
    3. スマートフォン表示を確認する
    4. 変更の影響範囲を把握する
  8. 安全にカスタマイズする基本の進め方
  9. よくある疑問
    1. 「外観」に「カスタマイズ」がありません
    2. 解説記事と項目名が違います
    3. 変更を保存したのに表示が変わりません
    4. 元に戻せますか
    5. カスタマイズ画面からテーマファイルを直接編集すべきですか
  10. カスタマイズで起こりやすい失敗
    1. 複数の設定を一度に変更する
    2. 一つのページだけを見て保存する
    3. テーマの標準機能と追加CSSを重ねすぎる
    4. デザインだけを見て読みやすさを落とす
  11. カスタマイザーとサイトエディターを使い分ける考え方
  12. 見た目の変更と機能追加を分けて考える
  13. 公開中のサイトで大きく変えるときの判断
  14. まとめ
  15. 参考にした公式情報

WordPressの「カスタマイズ画面」は一つではない

一般に「WordPressのカスタマイズ画面」と呼ばれるものには、いくつかの意味があります。よく使われるのは、管理画面の「外観」から開くカスタマイザーとサイトエディターです。投稿や固定ページの本文を編集するブロックエディターもデザインに関係しますが、役割は同じではありません。

まずは次のように分けると理解しやすくなります。

  • カスタマイザー:主にクラシックテーマの外観設定をプレビューしながら変更する画面
  • サイトエディター:ブロックテーマでサイト全体の構造やデザインをブロックで編集する画面
  • 投稿・固定ページのブロックエディター:個別の記事やページの本文を編集する画面
  • テーマ独自の設定画面:テーマが追加した配色、レイアウト、広告、装飾などの設定画面

「どの画面を使えばよいか」は、変更したい場所と使用中のテーマで決まります。最初に自分のサイトがどの方式かを確認すれば、古い解説や別テーマ向けの手順に迷わされにくくなります。

カスタマイザーとサイトエディターの違い

カスタマイザーとサイトエディターは、どちらもサイトの見た目を整えるための機能ですが、対象となるテーマと編集方法が異なります。名称だけでなく、変更が及ぶ範囲にも違いがあります。

カスタマイザーはクラシックテーマで使われる

カスタマイザーは、現在の表示をプレビューしながらテーマの設定を変更する仕組みです。WordPress公式ドキュメントでは、対応するテーマで色、背景、ヘッダー画像などを変更できると説明されています。一般的には管理画面の「外観」から「カスタマイズ」を選んで開きます。

カスタマイザーに表示される項目はテーマによって変わります。あるテーマではロゴや色だけを設定でき、別のテーマではレイアウト、見出し、ボタン、SNSリンクなど多くの項目が追加されることがあります。そのため、他サイトの画面と完全に同じでなくても問題とは限りません。

カスタマイザーでは、設定を変更しただけでは通常すぐに公開されず、プレビューを確認してから「公開」などの保存操作を行います。この流れは、変更後の見た目を確認してから反映したい初心者に分かりやすい仕組みです。

サイトエディターはブロックテーマで使われる

サイトエディターは、ブロックテーマを有効にしているときに利用できる編集画面です。管理画面の「外観」から「エディター」を開き、ヘッダー、フッター、ナビゲーション、テンプレート、サイト全体のスタイルなどをブロックを使って編集します。

ブロックテーマでは、投稿本文だけでなく、サイトの共通部分もブロックで構成されます。ロゴ、サイトタイトル、ナビゲーション、投稿一覧、検索フォームなどを選択し、配置や見た目を変更できます。カスタマイザーよりも編集できる範囲が広い一方、テンプレートや共通パーツを変更すると複数のページへ影響する点に注意が必要です。

WordPress公式ドキュメントによると、ブロックテーマでは通常カスタマイザーを必要としないため、「カスタマイズ」が非表示になることがあります。プラグインなどが必要とする場合を除き、「外観」に「カスタマイズ」がなくても、それだけで異常とは判断できません。

テーマ独自の設定画面が併用されることもある

クラシックテーマでもブロックテーマでも、テーマが独自の設定画面を追加する場合があります。管理画面の左メニューや「外観」の中にテーマ名のメニューが表示され、ヘッダー、記事一覧、吹き出し、広告、アクセス解析コードなどを設定できることがあります。

独自設定の項目や保存方法はテーマによって異なります。WordPress本体の標準機能と混同せず、使用中のテーマの公式マニュアルを確認してください。別テーマ向けの記事をそのまま真似すると、該当項目が見つからないだけでなく、同じ名前でも働きが異なる場合があります。

自分のサイトがどちらの方式か確認する方法

管理画面にログインし、「外観」のサブメニューを確認するのが簡単です。「カスタマイズ」が表示されていれば、カスタマイザーを利用できる可能性が高くなります。「エディター」が表示されていれば、ブロックテーマのサイトエディターを利用している可能性が高いでしょう。

ただし、プラグインやテーマの機能により、例外的な表示になることがあります。確実に確認したいときは、「外観」の「テーマ」で現在有効なテーマ名を確認し、そのテーマの公式情報を調べます。テーマの説明に「ブロックテーマ」「サイトエディター対応」「フルサイト編集」などと書かれている場合は、サイトエディターを中心に使う設計です。

画面の違いを確認するときは、次の三点をメモしておくと情報を探しやすくなります。

  • 現在有効なテーマの正式名称とバージョン
  • WordPress本体のバージョン
  • 「外観」に表示されているメニュー名

検索するときは「WordPress カスタマイズ」だけでなく、「テーマ名 ロゴ 変更」「テーマ名 ヘッダー 設定」のようにテーマ名を含めます。公式マニュアルがある場合は、一般的な解説より先に確認すると迷いにくくなります。

カスタマイザーで変更できる代表的な項目

カスタマイザーの内容はテーマごとに異なりますが、多くのテーマで見かける代表的な項目があります。ここでは、それぞれが何を変える設定なのかを整理します。

サイト基本情報

「サイト基本情報」や「サイトアイデンティティ」では、サイトタイトル、キャッチフレーズ、ロゴ、サイトアイコンなどを設定します。サイトアイコンはブラウザーのタブやブックマークなどで使われる小さな画像です。

ロゴ画像を設定したとき、サイトタイトルの文字を同時に表示するかどうかはテーマによって異なります。ロゴを入れたのにタイトルが二重に見える場合は、タイトル表示に関する項目がないか確認します。また、サイトタイトルやキャッチフレーズは検索結果やSNS共有の表示と関係することがあるため、見た目だけでなくサイト全体の設定も意識して変更しましょう。

色や背景

テーマが対応していれば、背景色、リンク色、見出し色、ヘッダー色などを変更できます。色を選べる範囲はテーマによって大きく異なります。一つのアクセントカラーを変えるだけで複数のボタンやリンクへ反映されるテーマもあります。

色を決めるときは好みだけでなく、文字の読みやすさを優先します。背景と文字の明るさが近いと、本文やボタンが読みにくくなります。パソコンだけでなくスマートフォンのプレビューでも確認し、リンクが通常の文字と区別できるか、ボタンの文字が読めるかを見ます。

ヘッダーや背景画像

テーマによっては、ヘッダー画像や背景画像を指定できます。画像が表示領域に合わせて切り抜かれたり、画面幅によって見える範囲が変わったりするため、設定画面の推奨サイズやプレビューを確認することが大切です。

画像の中に重要な文章を直接入れると、スマートフォン表示で切れたり、小さくなって読めなくなったりします。見出しや説明文は可能ならWordPress上の文字として配置し、画像は雰囲気を補う役割にすると調整しやすくなります。

メニュー

クラシックテーマでは、カスタマイザーからナビゲーションメニューを作成または割り当てられる場合があります。固定ページ、投稿、カテゴリー、カスタムリンクなどをメニュー項目として追加し、テーマが用意した表示位置へ割り当てます。

「メニューを作ったのに表示されない」ときは、メニュー項目だけでなく「表示位置」の指定を確認します。テーマによって「メインメニュー」「ヘッダーメニュー」「フッターメニュー」などの名称が異なり、複数の場所へ別々のメニューを割り当てられることがあります。

ウィジェット

クラシックテーマでは、サイドバーやフッターなどのウィジェットエリアをカスタマイザーから編集できる場合があります。検索、最新の投稿、カテゴリー、画像、文章などを配置できます。

ウィジェットエリアの数と場所はテーマ側で決まります。同じウィジェットを追加しても、サイドバーがないページテンプレートでは表示されない場合があります。表示されないときは、編集中のページだけでなく、別の投稿やアーカイブページも確認してください。

ホームページ設定

トップページに最新の投稿一覧を表示するか、特定の固定ページを表示するかを設定できることがあります。固定ページをトップページとして使う場合は、先に表示用の固定ページを作成し、必要に応じて投稿一覧用のページも用意します。

この設定を変えるとサイトの入口が大きく変わります。既存サイトで変更するときは、現在のトップページ、メニュー、投稿一覧への導線を確認してから保存しましょう。

追加CSS

テーマが対応している場合、「追加CSS」からCSSを入力して見た目を調整できます。CSSは細かな変更に便利ですが、入力内容によっては文字が消える、余白が崩れる、スマートフォンだけ表示が乱れるといった問題が起こります。

初心者は、まずテーマの標準設定で実現できないか確認してください。CSSを追加するときは、一度に多く書かず、変更の目的が分かるコメントや控えを残します。テーマ変更後は同じ指定が効かなくなる可能性もあります。

サイトエディターで変更できる代表的な項目

サイトエディターは、ブロックを使ってサイト全体を編集します。WordPress公式ドキュメントでは、ナビゲーション、スタイル、ページ、テンプレート、パターンなどを扱えると説明されています。画面構成はWordPressのバージョンやテーマによって変わることがありますが、役割を知っていれば項目名が少し違っても判断しやすくなります。

スタイル

「スタイル」では、サイト全体の配色、文字、レイアウト、ブロックごとの見た目などを調整します。テーマにスタイルバリエーションが用意されていれば、まとまったデザインを切り替え、その後に色やタイポグラフィを細かく整えられます。

サイト全体へ反映される設定と、選択中の一つのブロックだけに反映される設定を区別することが重要です。「この見出しだけ変えるつもりだったのに、全ページの見出しが変わった」ということがないよう、保存前に変更対象を確認します。

ナビゲーション

ブロックテーマでは、ナビゲーションブロックを使ってメニューを管理します。従来のメニュー画面と操作感が異なり、ヘッダーなどのテンプレートパーツ内でナビゲーションを選択して編集する場合があります。

項目の追加だけでなく、階層、並び順、リンク先、モバイル表示も確認します。共通のナビゲーションを編集すると、そのナビゲーションを使用する複数のテンプレートへ反映されます。

テンプレート

テンプレートは、投稿、固定ページ、トップページ、検索結果、404ページなど、ページ種類ごとの大枠を決めるものです。サイトエディターでは、投稿本文そのものではなく、その前後に表示するタイトル、アイキャッチ、投稿日、本文領域、関連記事などの構造を編集できます。

テンプレートを変えると、そのテンプレートを使う複数のページに影響します。特定の一記事だけを直したいときにテンプレートを編集すると、他の記事まで変わることがあります。編集画面の上部や一覧で、現在選んでいる対象が「ページ」なのか「テンプレート」なのかを確認しましょう。

パターンとテンプレートパーツ

ヘッダーやフッターなど、複数の場所で繰り返し使うまとまりは、テンプレートパーツやパターンとして管理されます。ロゴ、ナビゲーション、検索、ボタンなどを組み合わせ、共通部品として再利用できます。

共通部品を編集すると、その部品を使っている場所へ広く反映される場合があります。ヘッダーの変更はサイト全体に及びやすいため、保存前の変更一覧を確認し、意図しないテンプレートやパーツまで選ばれていないか見ます。

ページ

サイトエディター内から固定ページを確認・編集できる構成もあります。ただし、ページ本文の編集と、そのページを表示するテンプレートの編集は別です。文章や画像を変えたいのか、全ページ共通の幅やヘッダーを変えたいのかを先に決めると、編集対象を間違えにくくなります。

変更したい内容から編集画面を選ぶ

画面名を覚えるより、「何をどこまで変えたいか」で選ぶ方が実用的です。次の目安を使うと判断しやすくなります。

  • 一つの記事の文章や画像を変える:投稿のブロックエディター
  • 一つの固定ページの内容を変える:固定ページのブロックエディター
  • クラシックテーマのロゴや色を変える:カスタマイザーまたはテーマ独自設定
  • ブロックテーマの全体配色や文字を変える:サイトエディターのスタイル
  • 全ページ共通のヘッダーやフッターを変える:サイトエディターのテンプレートパーツ、またはテーマ独自設定
  • ページ種類ごとの構造を変える:サイトエディターのテンプレート
  • PHPやテーマファイルを変更する:子テーマや検証環境を使う上級者向け作業

迷ったときは、最も影響範囲が狭い編集方法から試します。一つのページだけを直せるなら、サイト全体のテンプレートを変更する必要はありません。逆に、全ページで同じ修正が必要なら、各ページを一つずつ編集するより共通スタイルやテンプレートを使う方が管理しやすくなります。

カスタマイズ前に確認したいこと

外観設定は便利ですが、変更範囲が広いため、編集前の準備が重要です。特に運営中のサイトでは、少しの変更でもヘッダー、メニュー、記事一覧、スマートフォン表示へ影響することがあります。

現在の状態を記録する

変更前の画面をスクリーンショットで残し、設定値や使用中のテンプレート名をメモします。複数の項目を同時に変えると原因を切り分けにくいため、一つずつ変更して確認するのが基本です。

追加CSSやテーマ独自設定に長いコードや文章が入っている場合は、安全な場所へコピーしておきます。単にブラウザーの「戻る」だけでは元に戻せない設定もあります。

バックアップを用意する

色やロゴの小さな変更でも、重要なサイトでは事前にバックアップを確認します。特にテーマ変更、テンプレート編集、プラグイン追加、CSSやコード変更を伴う場合は、ファイルとデータベースの両方を戻せる状態が安心です。

バックアップは「作成した」だけでなく、保存場所と復元方法も確認します。外観の編集前に、現在のテーマ名、子テーマの有無、主要プラグインも記録しておくと復旧に役立ちます。

スマートフォン表示を確認する

管理画面のプレビューは便利ですが、実際の端末表示と完全に同じとは限りません。保存後は、パソコンとスマートフォンの両方で公開側を確認します。ヘッダーの高さ、メニューの開閉、文字の折り返し、ボタンの押しやすさ、画像の切り抜きなどを見ます。

ログイン中はキャッシュや管理者向け表示の影響を受けることがあります。可能であれば、ログアウト状態やシークレットウィンドウでも確認してください。

変更の影響範囲を把握する

サイトエディターのスタイル、テンプレート、テンプレートパーツは、多数のページへ反映される可能性があります。保存画面に変更対象の一覧が表示されたら、内容を読まずに一括保存しないことが大切です。

「現在見ているページのプレビューが問題ない」だけでは十分ではありません。トップページ、投稿、固定ページ、カテゴリー一覧、検索結果、404ページなど、代表的なページ種類を確認しましょう。

安全にカスタマイズする基本の進め方

初心者が外観を整えるときは、次の順番で進めると失敗を減らせます。

  • 変更したい目的を一つに絞る
  • 使用中のテーマと編集方式を確認する
  • 変更前の状態を記録し、必要なバックアップを確認する
  • テーマ標準の設定で実現できるか探す
  • 一項目だけ変更してプレビューする
  • 保存対象と影響範囲を確認して保存する
  • 公開側を複数の画面幅で確認する
  • 問題があれば直前の変更を戻す

最初からCSSやPHPを編集するのではなく、標準機能、テーマ独自設定、追加CSS、子テーマによるコード変更の順に検討すると安全です。後ろへ進むほど自由度は上がりますが、保守や復旧に必要な知識も増えます。

よくある疑問

「外観」に「カスタマイズ」がありません

ブロックテーマを使用している場合、カスタマイザーが表示されず、「外観」の「エディター」からサイトエディターを使うのが通常です。使用中のテーマを確認し、ブロックテーマならサイトエディターの「スタイル」「ナビゲーション」「テンプレート」「パターン」を探してください。

クラシックテーマなのに見つからない場合は、テーマやプラグインの仕様、ユーザー権限も確認します。管理者以外の権限では外観設定を変更できない場合があります。

解説記事と項目名が違います

WordPress本体のバージョン、テーマ、プラグイン、言語設定によって画面は変わります。解説記事の公開日だけでなく、対象テーマと対象バージョンを確認してください。テーマ独自の設定は、そのテーマの公式マニュアルを優先します。

変更を保存したのに表示が変わりません

まず保存が完了したか確認し、次にキャッシュを疑います。ブラウザー、キャッシュプラグイン、サーバー、CDNなど複数の場所に古い表示が残ることがあります。ただし、原因を確認せずすべてのキャッシュを同時に削除すると切り分けにくくなるため、ブラウザーの再読み込みや別ウィンドウでの確認から始めます。

また、編集したテンプレートやメニューが、確認中のページで使用されていない場合もあります。表示中ページのテンプレートと、編集対象の割り当てを確認してください。

元に戻せますか

変更内容によって戻し方が異なります。カスタマイザーなら直前の設定値へ戻して再公開します。サイトエディターでは、スタイルのリビジョンや変更のリセットを利用できる場合があります。個別ブロックは編集直後なら取り消し操作も使えます。

ただし、すべての変更に完全な履歴があるとは限りません。確実に戻したい重要な作業では、変更前の記録とバックアップを用意してください。

カスタマイズ画面からテーマファイルを直接編集すべきですか

初心者にはおすすめできません。テーマ本体のファイルを直接変更すると、記述ミスで表示できなくなったり、テーマ更新で変更が消えたりする可能性があります。必要な場合は子テーマと検証環境を用意し、戻し方を確認してから作業します。

カスタマイズで起こりやすい失敗

複数の設定を一度に変更する

色、幅、メニュー、CSSをまとめて変えると、問題が起きたときに原因が分かりません。一つ変更して確認し、問題がなければ次へ進む方が結果的に早くなります。

一つのページだけを見て保存する

共通スタイルやテンプレートの変更は、別のページ種類で崩れを起こすことがあります。特に長いタイトル、画像がない投稿、階層メニュー、検索結果、スマートフォン表示は見落としやすい部分です。

テーマの標準機能と追加CSSを重ねすぎる

同じ場所をテーマ設定とCSSの両方で調整すると、後からどちらが効いているか分かりにくくなります。標準設定でできることは標準設定に任せ、CSSは不足部分に限定します。

デザインだけを見て読みやすさを落とす

薄い文字色、小さすぎる文字、狭い行間、派手すぎる背景は、見た目の印象を変えても読みやすさを損ねます。本文、見出し、リンク、ボタンの役割が区別できるかを基準に調整してください。

カスタマイザーとサイトエディターを使い分ける考え方

カスタマイザーとサイトエディターは、どちらが優れているかを単純に比べるものではありません。使用中のテーマに合った仕組みを使うことが基本です。

クラシックテーマでは、カスタマイザーやテーマ独自設定から用意された選択肢を調整します。ブロックテーマでは、サイトエディターでスタイル、テンプレート、パターンなどを編集します。テーマを変えずに使っている間は、無理に別方式へ移行する必要はありません。

新しいテーマを選ぶときは、見た目だけでなく編集方式も確認します。細かく自由に組み替えたいならブロックテーマが合う可能性があります。一方、テーマが用意した完成度の高い設定を選びながら運用したい場合は、使い慣れたクラシックテーマが扱いやすいこともあります。必要な機能、更新体制、公式サポート、既存コンテンツとの相性を含めて判断しましょう。

見た目の変更と機能追加を分けて考える

外観を整えていると、カスタマイズ画面だけでは実現できないことも出てきます。そのときは、目的が「見た目の変更」なのか「新しい機能の追加」なのかを分けて考えます。文字色や余白、ロゴ、ヘッダー配置は主に外観の課題です。一方、お問い合わせフォーム、予約、会員機能、決済などは機能の課題であり、テーマ設定だけで解決しようとすると管理が複雑になります。

一般には、サイトの見た目はテーマやサイトエディター、必要な機能は目的に合うプラグインで担当させると役割が明確です。ただし、似た機能を持つプラグインを複数入れたり、テーマ機能とプラグイン機能を重ねたりすると、設定が競合することがあります。追加前に、現在のテーマやプラグインですでに実現できないか確認してください。

テーマ変更を予定している場合は、テーマ独自の装飾やショートコードへ依存しすぎないことも大切です。テーマを変えると、独自のボタンや囲み枠が表示されなくなる場合があります。長く残したい本文はWordPress標準のブロックを中心に作り、テーマ固有の機能はサイト共通のデザインなど必要な場所へ絞ると移行しやすくなります。

公開中のサイトで大きく変えるときの判断

ロゴや一色の変更と、テーマ変更やテンプレート全面編集では、必要な準備が違います。公開中サイトの構造を大きく変える場合は、本番画面で直接試すのではなく、ステージング環境やローカル環境で確認する方法があります。そこでトップページ、投稿、固定ページ、フォーム、メニュー、スマートフォン表示を確認してから本番へ反映します。

特にテーマ変更では、ウィジェットの配置、メニューの表示位置、アイキャッチの切り抜き、見出しや表のデザインが変わることがあります。変更前後でページの内容自体が消えていなくても、読みにくさや導線の欠落が起こる可能性があります。アクセスの多いページや問い合わせにつながるページを優先して確認しましょう。

大きな変更を一度に公開する必要がなければ、目的を分けて段階的に進めます。最初にロゴと基本色、次にヘッダーとメニュー、その後に記事テンプレートというように区切ると、問題が起きた場所を判断しやすくなります。変更内容と確認結果を簡単に記録しておくと、後日の更新や担当者交代にも役立ちます。

まとめ

WordPressのカスタマイズ画面は、使用中のテーマによって異なります。クラシックテーマでは主にカスタマイザー、ブロックテーマでは主にサイトエディターを使います。「カスタマイズ」が表示されない場合でも、ブロックテーマなら「エディター」が外観編集の入口です。

カスタマイザーでは、サイト基本情報、色、背景、メニュー、ウィジェット、ホームページ設定などを変更できます。サイトエディターでは、サイト全体のスタイル、ナビゲーション、テンプレート、ヘッダーやフッターなどをブロックで編集できます。ただし、実際に表示される項目はテーマごとに異なります。

安全に進めるには、使用中のテーマと変更対象を確認し、変更前の状態を記録して、一項目ずつ編集します。保存後は一つのページだけでなく、代表的なページとスマートフォン表示も確認してください。編集画面の名称ではなく、「何を、どの範囲で変えたいか」を基準に選ぶことが、迷わずカスタマイズするためのポイントです。

参考にした公式情報