WordPressのテーマカスタマイザーを開いて、たくさんのオプションを見て、完全に圧倒された経験はありますか?
色、フォント、レイアウトの設定は数十種類あり、サイトを良く見せようとしているだけなのに多すぎると感じるかもしれません。いくつか調整しても、なぜか開始時よりもサイトの見栄えが悪くなってしまいます。
多くの初心者がこの同じ問題に直面しているのを見てきましたが、良いニュースは、あなたが思うよりも簡単に修正できるということです。
このガイドでは、WordPressテーマカスタマイザーをステップバイステップで使用して、混乱なく洗練されたユーザーフレンドリーなウェブサイトを作成する方法を説明します。試行錯誤の時間を節約できるいくつかのヒントも共有します。🙌

📚 主なポイント: カスタマイザーでは変更をリアルタイムでプレビューでき、クラシックテーマではサイトのID、色、メニューに使用され、ブロックテーマでは代わりにサイト全体エディター(FSE)を使用します。
WordPressテーマカスタマイザーへのアクセス方法
テーマカスタマイザーは、サイトの外観を制御できるクラシックWordPressテーマのデフォルト機能です。すべてのクラシックテーマに含まれており、タイポグラフィ、ヘッダーデザインなどのサイト全体のコントロールの設定パネルが含まれています。
WordPress管理エリアにログインすることでアクセスできます。次に、管理パネルの左側サイドバーから外観 » カスタマイズに移動します。
これにより、現在のテーマのカスタマイザーインターフェイスが開きます。

🧐 注意: ブロックテーマを使用している場合、テーマカスタマイザーはデフォルトではWordPress管理画面に表示されません。ブロックテーマは代わりにサイト全体エディターに依存します。
それでもカスタマイザーにアクセスしたい場合は、このガイドでWordPress管理画面でテーマカスタマイザーが表示されない問題を修正する方法を示します。
WordPressテーマカスタマイザーは、非アクティブなテーマであっても、ウェブサイトにインストールされているすべてのテーマに使用できます。この機能を使用すると、テーマをアクティブ化する前にライブプレビューで確認し、変更を加えることができます。
これを行うには、外観 » テーマ ページに移動する必要があります。次に、インストールされているテーマのいずれかにマウスカーソルを合わせ、「ライブプレビュー」ボタンをクリックして、WordPressテーマカスタマイザーページを開きます。

WordPressテーマカスタマイザーの使用方法
WordPressテーマカスタマイザーを開くと、画面の左側にすべてのカスタマイズ設定が表示されます。サイトのライブプレビューは右側に表示されます。
WordPressのテーマカスタマイザーには、テーマに関係なくデフォルトのパネルセットが用意されています。
変更を加えるには、個々のパネルをクリックする必要があります。また、画面右側にある青い鉛筆アイコンのいずれかをクリックして、その特定の項目の設定を開くこともできます。

☝ 注意: 高度なWordPressテーマには、追加のカスタマイズオプションのための追加設定パネルがあります(これについては後述します)。
次のセクションでは、WordPressテーマカスタマイザーで利用可能なデフォルトオプションを紹介し、カスタマイズのヒントや代替案も共有します。
特定のトピックに興味がある場合は、リンクをクリックして記事の該当箇所にスキップできます。
- サイト基本情報パネル:タイトル、ロゴ、ファビコンを追加
- WordPressテーマカスタマイザー:ウェブサイトの配色を変更する
- テーマカスタマイザーでのナビゲーションメニューの追加
- テーマカスタマイザーでウェブサイトのウィジェットを管理する
- テーマカスタマイザーのホームページ設定パネル
- カスタムCSSを追加するための追加CSSパネル
- その他のテーマカスタマイザーオプション
- さまざまな画面解像度でウェブサイトをプレビューする
- カスタマイザー設定の公開、保存、またはスケジュール設定
- 公開せずに異なるテーマをプレビューする
- テーマカスタマイザー設定のインポートまたはエクスポート
- ボーナスのヒント:WordPressテーマカスタマイザーの代替
- WordPressテーマカスタマイザーの使用に関するよくある質問
- 探索を続ける:プロのようにデザインとカスタマイズ
準備はいいですか?始めましょう。
サイト基本情報パネル:タイトル、ロゴ、ファビコンを追加
WordPressテーマカスタマイザーの「サイトのID」パネルを使用すると、ウェブサイトのタイトルとキャッチフレーズを追加または変更できます。
デフォルトでは、WordPressはサイトのキャッチフレーズとして「Just Another WordPress Site」を追加します。サイトにWordPressをインストールした後で変更することをお勧めします。ただし、サイトのロゴにブランド名がすでに含まれている場合は、繰り返しを避けるためにキャッチフレーズを空白のままにすることができます。

WordPressテーマカスタマイザーの「サイトのID」パネルでは、サイトのロゴを追加することもできます。ロゴを選択オプションをクリックして、ウェブサイトのロゴをアップロードするだけです。
サイトにファビコンを追加したいですか?「サイトアイコンを選択」オプションをクリックすることで追加できます。
詳細な手順については、サイトにファビコンを作成して追加する方法に関するガイドに従ってください。
WordPressテーマカスタマイザー:ウェブサイトの配色を変更する
「色」パネルのコントロールは、使用しているWordPressテーマによってほとんど異なります。
たとえば、Sydneyテーマでは、グローバルカラーオプションでウェブサイト全体のカラースキームを選択できます。また、背景、テキスト、リンク、見出し、フォームフィールド、サイドバーを変更することもできます。

他のWordPressテーマには、ヘッダーの色、ナビゲーションメニュー、ボタン、またはサイトの特定のセクションの個別のコントロールなど、異なるカラーオプションがある場合があります。
テーマカスタマイザーでのナビゲーションメニューの追加
「メニュー」パネルでは、ナビゲーションメニューを作成し、ウェブサイトでのその場所を制御できます。
このタブには、以前に作成したすべてのWordPressメニューが表示されます。「すべての場所を表示」ボタンをクリックすると、テーマがサポートする利用可能なメニューの場所を確認できます。

新しいメニューを作成するには、「新しいメニューを作成」ボタンをクリックする必要があります。
その後、メニューを後で簡単に管理できるように名前を付ける必要があります。メニューの場所を選択して、「次へ」をクリックして続行することもできます。

このメニューに項目を追加するには、「項目を追加」ボタンをクリックすることから始める必要があります。これにより、新しいパネルが開きます。
カスタムリンク、ページ、投稿、カテゴリー、タグをメニュー項目としてそれぞれのフィールドに追加できるようになりました。

アイテムの順序を変更するには、「並べ替え」リンクをクリックし、矢印アイコンを使用してメニューアイテムを調整します。
テーマカスタマイザーでウェブサイトのウィジェットを管理する
「ウィジェット」パネルでは、サイトのウィジェットを追加および管理できます。それをクリックすると、ウィジェットを追加できるさまざまな場所が表示されます。
そして、これも使用しているWordPressテーマによって異なります。
たとえば、Sydneyテーマは5つのウィジェット場所を提供していますが、デフォルトのクラシックテーマには1つの場所しか付属していない場合があります。

いずれかをクリックすると、その場所に以前に追加したウィジェットが表示されます。
新しいウィジェットを追加するには、「ウィジェットを追加」ボタンをクリックします。これにより新しいパネルが開き、これらのウィジェットエリアにブロック(段落、画像、リストなど)を追加できます。

次に、追加したいものをクリックする必要があります。新しく追加されたウィジェットを変更したり、ドラッグアンドドロップで位置を調整したりすることもできます。
テーマカスタマイザーのホームページ設定パネル
デフォルトでは、WordPressはホームページに最新のブログ投稿を表示します。
しかし、ほとんどのユーザーはビジネスウェブサイトにカスタムホームページを使用することを好みます。これにより、製品やサービスを表示する適切なランディングページを持つことができます。
カスタムホームページを使用するには、「ホームページ設定」パネルで「固定ページ」オプションを選択します。

これにより、ホームページのページとブログ投稿を表示する別のページを選択できる2つの新しいドロップダウンメニューが開きます。
サイトにページがない場合は、ドロップダウン メニューの下にある「+ 新規ページを追加」リンクをクリックして新しいページを作成できます。これにより、好きな名前の空白のページが作成されます。
カスタムCSSを追加するための追加CSSパネル
ウェブサイトをスタイル設定するためにカスタムCSSコードを追加したいですか?「追加CSS」パネルで追加できます。
中級および上級のWordPressユーザーは、CSSコードをテーマのstyle.cssファイルに直接追加することがあります。
テーマを更新するとこれらの変更が削除されるため、初心者にはこの方法は推奨しません。さらに、WordPressホスティングへのFTPアクセスやテーマファイルの変更など、追加の手順が必要になります。
初心者にとってより簡単な解決策は、WordPressテーマカスタマイザーの「追加CSS」パネルにカスタムCSSコードを追加することです。これにより、サイトの変更を行い、画面の右側にライブで確認できるようになります。

CSSコードを書き始めると、WordPressは入力した文字に基づいて自動的に属性を提案します。また、適切なCSSステートメントが記述されていない場合はエラーメッセージが表示されます。
詳細については、WordPressサイトにカスタムCSSコードを簡単に追加する方法に関するガイドを参照してください。
☝ 注意: コードを書かずにウェブサイトをカスタマイズしたい場合は、読み進めてください。テーマを簡単にカスタマイズしたり、カスタムWordPressテーマを作成したりできる、初心者向けの3つのオプションを共有します。
その他のテーマカスタマイザーオプション
一部の無料および有料テーマは、より多くのテーマカスタマイザーオプションを提供しています。
使用しているテーマによっては、フォントスタイルを変更したり、背景画像を追加したり、レイアウトを変更したり、色を調整したり、ランダムなヘッダー画像を追加したり、その他多くのことができます。

プラグインの助けを借りて、テーマカスタマイザーに特定の機能を追加することもできます。
例えば、Easy Google Fontsプラグインを使用して、WordPressにカスタムフォントを追加できます。
さまざまな画面解像度でウェブサイトをプレビューする
すべてのウェブサイト所有者にとって、ウェブサイトがモバイルフレンドリーであり、すべての画面サイズで見栄えが良いことを確認することが重要です。
WordPressテーマカスタマイザーのおかげで、ウェブサイトがさまざまな画面サイズでどのように見えるかを簡単に確認できます。
テーマカスタマイザーパネルの下部には、3つのアイコンと「コントロールを非表示」リンクがあります。

これらのアイコンを使用すると、サイトがデスクトップ、タブレット、モバイルデバイスでどのように表示されるかをシミュレートできます。これは素晴らしい出発点ですが、100%完璧に見えるように、実際の携帯電話でサイトを確認することを常にお勧めします。
「コントロールを非表示」リンクは、WordPress カスタマイザーパネルを非表示にするのに役立ちます。これにより、デスクトップでサイトを正しく表示できます。
カスタマイザー設定の公開、保存、またはスケジュール設定
必要な変更を加えたら、サイトに適用する必要があります。そうしないと、これまでのすべての努力が無駄になります。
「公開」ボタンをクリックして変更を適用します。プロセスが完了したら、画面の左上隅にある閉じるボタンをクリックしてテーマカスタマイザーを終了できます。

新しいWordPressデザインを最終決定するのに、もっと時間が必要な場合はどうすればよいでしょうか?その場合、新しいデザインを下書きとして保存し、管理画面へのアクセス権を与えずに誰かと共有することさえできます。
これを行うには、「公開」ボタンの横にある歯車アイコンをクリックする必要があります。これにより、「アクション」パネルが開きます。

ここには、「公開」、「下書き保存」、「予約投稿」の3つのオプションがあります。
「アクション」パネルで「下書きとして保存」オプションを選択するだけです。次に、「下書きとして保存」ボタンをクリックして変更を保存します。
プレビューリンクをコピーして、フィードバックを得るために他の人と共有できるようになりました。
「スケジュール」オプションを使用すると、特定の日時で変更を公開できます。たとえば、トラフィックが最も少ない時間にテーマの変更を公開するようにスケジュールできます。

最後に、公開されていない変更をリセットしたい場合は、アクションパネルの「変更を破棄」リンクをクリックできます。
公開せずに異なるテーマをプレビューする
サイトで新しいテーマがどのように見えるかを確認したい場合があります。しかし、ライブウェブサイトで有効にしたくはありません。
その場合、WordPressカスタマイザーを開いて、公開せずに新しいテーマをテストできます。
カスタマイザーパネルには、アクティブなテーマの名前と「変更」ボタンが表示されます。

そのボタンをクリックすると、WordPressはページ右側にインストールされているすべてのテーマを表示します。
特定のテーマを確認するには、「ライブプレビュー」ボタンをクリックする必要があります。

WordPressテーマリポジトリからテーマをプレビューすることもできます。
これを行うには、左側のパネルにある「WordPress.orgテーマ」チェックボックスを選択する必要があります。これにより、WordPress.orgディレクトリのテーマが表示されます。
気に入ったテーマを確認するには、「インストール&プレビュー」ボタンをクリックするだけです。

画面右上にある「テーマをフィルタリング」ボタンをクリックして、テーマをフィルタリングすることもできます。
☝ 注意: ライブサイトでカスタマイザーを使用する代わりに、新しいテーマをテストするにはWordPressステージングサイトを使用することをお勧めします。
テーマカスタマイザー設定のインポートまたはエクスポート
テーマカスタマイザーの設定をインポートおよびエクスポートできることをご存知でしたか?
これは、ローカルサーバーまたはステージングサイトでテーマを変更している場合に非常に役立ちます。設定を手動でライブウェブサイトにコピーする代わりに、プラグインを使用してテーマカスタマイザー設定をエクスポートし、時間を節約できます。
詳細な手順については、WordPressでテーマカスタマイザーの設定をインポートおよびエクスポートする方法に関するガイドに従ってください。
ボーナスのヒント:WordPressテーマカスタマイザーの代替
WordPressカスタマイザーでサイトに変更を加えることができますが、コントロールの数は使用しているテーマによって異なります。
テーマは気に入っているけれど、追加のカスタマイズオプションがあればいいのにと思ったことはありませんか?
その場合、最善の解決策は、WordPressテーマカスタマイザーと連携する3つのカスタマイズプラグインのいずれかを使用することです。
SeedProd

SeedProdは、WordPress向けの最高のAIウェブサイトおよびページビルダーです。コードを一切編集せずに、わずか60秒未満でカスタムWordPressテーマやページレイアウトを簡単に作成できます。
当社のパートナーブランドの中には、SeedProdを使用してサイトを構築した企業もあります。当社の経験について興味がありますか?詳細については、SeedProdの詳細レビューをご覧ください。
SeedProdは、ランディングページ、セールスページ、ウェビナー登録ページ、近日公開ページ、メンテナンスモードページなどのための、何百もの既製のページレイアウトを提供しています。
オプトインフォーム、ソーシャルプロフィール、ボタン、カウントダウンタイマー、お問い合わせフォームなどの既製のブロックでカスタマイズは簡単です。
カラー スキームを設定したり、フォントの組み合わせを保存したり、ページやページ要素を再利用したりできるため、再度作成する必要がありません。
Thrive Theme Builder

Thrive Theme Builderは、WordPress向けのもう1つの優れたドラッグアンドドロップテーマビルダープラグインです。コーディング不要で、カスタムWordPressテーマを簡単に作成できます。
すぐに始められるように、4つの異なる既製のテーマテンプレートが同梱されています。各テーマテンプレートには、サイトに追加できるさまざまな既製のページが含まれています。
詳細な内訳については、Thrive Themes Suiteの完全レビューをご覧ください。
このプラグインを使用すると、ヘッダー、フッター、ブログ投稿、カテゴリページなど、テーマの各部分をポイントアンドクリックするだけで編集できます。
さらに、ドラッグ&ドロップでテーマに素早く追加できる100以上のデザインおよびサイト構築要素があります。
CSSヒーロー

CSS Heroは、CSSコードを1行も書かずにサイトをカスタマイズできるWordPressプラグインです。手間をかけずに、サイトのすべての要素を自由にスタイル設定できます。
WordPressサイトのログインページをカスタマイズしたいですか?CSS Heroを使用すると、数分でそれが可能です。
また、変更を編集してプレビューし、すべてのデバイスでデザインが完璧に見えることを確認することもできます。
Beaver Builder

Beaver Builderは、WordPress向けのトップページビルダーの1つです。ドラッグアンドドロップインターフェイスを使用して、サイトの見事なページを作成できます。
最も良い点は、Beaver BuilderがほぼすべてのWordPressテーマと連携することです。これにより、現在のテーマで使用できます。広範にテストしましたので、Beaver Builderの完全レビューですべてを確認できます。
Beaver Builderは、ショートコードとウィジェットの使用をサポートしています。また、ウェブサイトを簡単にスタイル設定するために使用できるさまざまな種類のモジュールも提供しています。詳細な手順については、WordPressでカスタムレイアウトを作成する方法に関するガイドをご覧ください。
WordPressテーマカスタマイザーの使用に関するよくある質問
テーマカスタマイザーを最大限に活用する方法について、まだ質問がありますか?WordPressユーザーからよく聞かれる質問をいくつかご紹介します。
WordPressテーマカスタマイザーですべてのテーマをカスタマイズできますか?
すべてのテーマではありません。多くのクラシックなWordPressテーマは、引き続きテーマカスタマイザーをサポートしており、さまざまなデザインオプションを提供しています。ただし、フルサイト編集(FSE)を使用するブロックベースのテーマは、代わりにサイトエディターに依存しており、これらのテーマではカスタマイザーは表示されません。
テーマを変更するとカスタム設定は削除されますか?
いいえ、削除されませんが、引き継がれません。カスタマイザーの設定は、使用している特定のテーマに関連付けられています。新しいテーマに切り替えると、そのテーマのデフォルト設定からやり直しになります。
ただし、以前の設定はデータベースに保存されています。以前のテーマに戻した場合、以前のデザイン設定は自動的に復元されます。
WordPressでテーマカスタマイザーが見つからない場合はどうすればよいですか?
ダッシュボードに外観 » カスタマイズオプションが表示されない場合は、ブロックベース(フルサイト編集)テーマを使用している可能性があります。これらのテーマはサイトエディターを使用しており、これは外観 » エディターの下にあります。
テーマにさらにカスタマイズオプションを追加するにはどうすればよいですか?
現在のテーマが制限が多すぎると感じる場合は、子テーマを作成するか、SeedProd、Thrive Theme Builder、またはCSS Heroのようなページビルダープラグインの使用を試すことができます。これらのツールは、コードに触れることなく、より多くのデザイン制御を提供します。
公開中のウェブサイトでテーマカスタマイザーの変更を行うのは安全ですか?
はい、テーマカスタマイザー内での変更は、「公開」をクリックするまで公開されないため、安全に変更できます。とはいえ、大幅な編集を計画している場合は、ライブサイトの中断を避けるために、まずステージング環境でテストすることをお勧めします。
探索を続ける:プロのようにデザインとカスタマイズ
このガイドが、WordPressテーマカスタマイザーをプロのように使用する方法を学ぶのに役立ったことを願っています。
これがお役に立ったなら、他のガイドもご覧になりたいかもしれません。
- WordPressテーマのカスタマイズ方法
- WordPress テーマにパララックス効果を追加する方法
- 翻訳準備完了のWordPressテーマを見つけて翻訳する方法
- 最新の標準に対してWordPressテーマをテストする方法
- 試すべき最高のシンプルなWordPressテーマ
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

Dayo Olobayo
思っていたよりもずっと簡単でした。カスタム機能でウェブサイトの色を変更しただけで、すでにずっと良くなりました。他のオプションを試して、他に何ができるかを見るのが楽しみです。本当にありがとうございます!
モイヌディン・ワヒード
カスタム機能で多くの機能を提供するプレミアムテーマを数多く見てきました。
カスタム機能自体でウェブサイトのあらゆるものを制御できるような感覚です。
例えばAstraを見ると、カスタム機能自体から見た目や雰囲気を大きく制御できます。
カスタム機能で多くの機能を提供するプレミアムテーマには、そのような制御を提供しないテーマと比較して、ウェブサイトの速度の点で何か利点があるのでしょうか?
WPBeginnerサポート
利点は、プレミアムテーマにはそれらのコントロールが含まれている場合があるのに対し、すべての無料テーマが完全なカスタマイズオプションを持っているわけではないことです。速度に関しては、どちらのテーマがより高速かを判断するために、デザイン自体に依存します。
管理者
モイヌディン・ワヒード
多くのプレミアムテーマを使用してきましたが、カスタマイズパネル自体にさらに多くのオプションがあります。
時々、これらのオプションをカスタマイズできることは、テーマが効率的で軽量であることの証のように感じられます。
例えば、Astraはカスタマイザーに多くのオプションがあります。
しかし、質問があります。カスタマイザーに追加のCSSを追加すると、メインのstyle.cssに追加されますか?もしそうなら、前述のように、テーマを更新すると上書きされますか?
WPBeginnerサポート
カスタマイザーの追加CSSはstyle.cssに保存されないため、テーマを更新する際に心配する必要はありません。
管理者
シェリー
なぜ「サイトのタイトルとキャッチフレーズを表示」チェックボックスが私のウェブサイトに表示されないのですか?
WPBeginnerサポート
現在、お使いの特定のテーマにはそのためのスタイリングがないため、デフォルトではタイトルとタグラインを非表示にする機能は提供されません。
管理者
クレイグ
この情報を提供していただきありがとうございます。私はウェブサイト開発初心者で、初期の調査でElementorのドラッグ&ドロップページビルダーを知りましたが、これらのテーマのカスタマイズにはかなりの学習曲線があることも発見しました。カスタマイズを適用できる場所が3つあるように見え、どこで何をカスタマイズすべきか迷ってしまうことがありました。そのため、どのカスタマイズがどのカスタマイザーフィールドで最も効果的に処理されるかを理解することは、非常に役立つトピックです!
WPBeginnerサポート
Thank you, glad you like our article
管理者
レスリー
テーマのニーズにはすでにDiviがありますが(まだあまり使っていませんが、私は完全な初心者で、まだウェブサイトを構築中です)。上記の情報は私にも役立ちますか、それともすべてDiviを通じて行うことになりますか?よろしくお願いします!
WPBeginnerサポート
Using a theme like Divi you would likely want to follow their documentation for customizing but knowing the customizer is still helpful
管理者