プロのようにWordPressテーマカスタマイザーを使用する方法（究極ガイド）

WordPressのテーマカスタマイザーを開いて、たくさんのオプションを見て、完全に圧倒された経験はありますか？

色、フォント、レイアウトの設定は数十種類あり、サイトを良く見せようとしているだけなのに多すぎると感じるかもしれません。いくつか調整しても、なぜか開始時よりもサイトの見栄えが悪くなってしまいます。

多くの初心者がこの同じ問題に直面しているのを見てきましたが、良いニュースは、あなたが思うよりも簡単に修正できるということです。

このガイドでは、WordPressテーマカスタマイザーをステップバイステップで使用して、混乱なく洗練されたユーザーフレンドリーなウェブサイトを作成する方法を説明します。試行錯誤の時間を節約できるいくつかのヒントも共有します。🙌

WordPressテーマカスタマイザーへのアクセス方法

テーマカスタマイザーは、テーマの外観を制御できるWordPressの標準機能です。すべてのクラシックテーマに含まれており、タイポグラフィ、ヘッダーデザインなど、サイト全体を制御するための設定パネルが付属しています。

WordPress管理画面にログインしてアクセスできます。次に、管理パネルの左側サイドバーから外観 » カスタマイズに移動してください。

これにより、現在のテーマのカスタマイザーインターフェイスが開きます。

WordPressテーマカスタマイザーは、非アクティブなテーマであっても、ウェブサイトにインストールされているすべてのテーマに使用できます。この機能を使用すると、テーマをアクティブ化する前にライブプレビューで確認し、変更を加えることができます。

これを行うには、外観 » テーマ ページに移動する必要があります。次に、インストールされているテーマのいずれかにマウスカーソルを合わせ、「ライブプレビュー」ボタンをクリックして、WordPressテーマカスタマイザーページを開きます。

WordPressテーマカスタマイザーの使用方法

WordPressテーマカスタマイザーを開くと、画面の左側にすべてのカスタマイズ設定が表示されます。ウェブサイトのライブプレビューは右側に表示されます。

WordPressのテーマカスタマイザーには、テーマに関係なくデフォルトのパネルセットが用意されています。

変更を加えるには、個々のパネルをクリックする必要があります。また、画面右側にある青い鉛筆アイコンのいずれかをクリックして、その特定の項目の設定を開くこともできます。

次のセクションでは、WordPressテーマカスタマイザーで利用可能なデフォルトオプションを紹介し、カスタマイズのヒントや代替案も共有します。

特定のトピックに興味がある場合は、リンクをクリックして記事の該当箇所にスキップできます。

• サイト基本情報パネル：タイトル、ロゴ、ファビコンを追加
• WordPressテーマカスタマイザー：ウェブサイトの配色を変更する
• テーマカスタマイザーでのナビゲーションメニューの追加
• テーマカスタマイザーでウェブサイトのウィジェットを管理する
• テーマカスタマイザーのホームページ設定パネル
• カスタムCSSを追加するための追加CSSパネル
• その他のテーマカスタマイザーオプション
• さまざまな画面解像度でウェブサイトをプレビューする
• カスタマイザー設定の公開、保存、またはスケジュール設定
• 公開せずに異なるテーマをプレビューする
• テーマカスタマイザー設定のインポートまたはエクスポート
• Bonus Tip: WordPress Theme Customizer Alternatives
• WordPressテーマカスタマイザーの使用に関するよくある質問
• 探索を続ける：プロのようにデザインとカスタマイズ

準備はいいですか？始めましょう。

サイト基本情報パネル：タイトル、ロゴ、ファビコンを追加

WordPressテーマカスタマイザーの「サイトのID」パネルを使用すると、ウェブサイトのタイトルとキャッチフレーズを追加または変更できます。

デフォルトでは、WordPressはサイトのタグラインとして「Just Another WordPress Site」を追加します。WordPressをサイトにインストールした後に変更することをお勧めしますが、空白のままにしておくこともできます。

WordPressテーマカスタマイザーの「サイトのID」パネルでは、サイトのロゴを追加することもできます。ロゴを選択オプションをクリックして、ウェブサイトのロゴをアップロードするだけです。

サイトにファビコンを追加したいですか？「サイトアイコンを選択」オプションをクリックすることで追加できます。

詳細な手順については、サイトにファビコンを作成して追加する方法に関するガイドに従ってください。

WordPressテーマカスタマイザー：ウェブサイトの配色を変更する

「色」パネルのコントロールは、使用しているWordPressテーマによってほとんど異なります。

例えば、Sydneyテーマでは、グローバルカラーオプションでウェブサイト全体のカラースキームを選択できます。また、背景、テキスト、リンク、見出し、フォームフィールド、サイドバーを変更することもできます。

他のWordPressテーマでは、ヘッダーの色、ナビゲーションメニュー、ボタン、またはサイトの特定のセクションに対して個別のコントロールなど、異なる色のオプションがある場合があります。

テーマカスタマイザーでのナビゲーションメニューの追加

「メニュー」パネルを使用すると、ナビゲーションメニューを作成し、ウェブサイトでのその場所を制御できます。

このタブには、以前に作成したすべてのWordPressメニューが表示されます。「すべての場所を表示」ボタンをクリックすると、テーマがサポートする利用可能なメニューの場所を確認できます。

新しいメニューを作成するには、「新しいメニューを作成」ボタンをクリックする必要があります。

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

このメニューに項目を追加するには、「項目を追加」ボタンをクリックすることから始める必要があります。これにより、新しいパネルが開きます。

カスタムリンク、ページ、投稿、カテゴリー、タグをメニュー項目としてそれぞれのフィールドに追加できるようになりました。

アイテムの順序を変更するには、「並べ替え」リンクをクリックし、矢印アイコンを使用してメニューアイテムを調整します。

テーマカスタマイザーでウェブサイトのウィジェットを管理する

「ウィジェット」パネルを使用すると、サイトにウィジェットを追加および管理できます。それをクリックすると、ウィジェットを追加できるさまざまな場所が表示されます。

そして、これも使用しているWordPressテーマによって異なります。

例えば、Sydneyテーマは5つのウィジェット場所を提供しますが、Twenty Nineteenテーマは1つの場所しかありません。

いずれかをクリックすると、その場所に以前に追加したウィジェットが表示されます。

新しいウィジェットを追加するには、「ウィジェットを追加」ボタンをクリックできます。これにより新しいパネルが開き、利用可能なすべてのウィジェットのリストが表示されます。

次に、追加したいものをクリックする必要があります。新しく追加されたウィジェットを変更したり、ドラッグアンドドロップで位置を調整したりすることもできます。

テーマカスタマイザーのホームページ設定パネル

デフォルトでは、WordPressはホームページに最新のブログ投稿を表示します。

しかし、ほとんどのユーザーはビジネスウェブサイトにカスタムホームページを使用することを好みます。これにより、製品やサービスを表示する適切なランディングページを持つことができます。

カスタムホームページを使用するには、「ホームページ設定」パネルの「固定ページ」ラジオボタンを選択します。

これにより、ホームページ用のページとブログ投稿を表示するための別のページを選択できる2つの新しいドロップダウンメニューが開きます。

サイトにページがない場合は、ドロップダウン メニューの下にある「+ 新規ページを追加」リンクをクリックして新しいページを作成できます。これにより、好きな名前の空白のページが作成されます。

カスタムCSSを追加するための追加CSSパネル

ウェブサイトをスタイル設定するためにカスタムCSSコードを追加したいですか？「追加CSS」パネルで追加できます。

中級および上級のWordPressユーザーは、テーマのstyle.cssファイルにCSSコードを追加することで、サイトをカスタマイズすることがよくあります。この方法では、WordPressホスティングへのFTPアクセス、テーマファイルの変更など、追加の手順が必要です。

初心者にとってより簡単な解決策は、WordPressテーマカスタマイザーの追加CSSパネルにカスタムCSSコードを追加することです。これにより、サイトの変更を行い、画面の右側でライブプレビューを確認できます。

CSSコードを書き始めると、WordPressは入力した文字に基づいて自動的に属性を提案します。また、適切なCSSステートメントが記述されていない場合はエラーメッセージが表示されます。

その他のテーマカスタマイザーオプション

いくつかの無料および有料テーマでは、より多くのテーマカスタマイザーオプションが提供されています。

使用しているテーマによっては、フォントスタイルを変更したり、背景画像を追加したり、レイアウトを変更したり、色を編集したり、ランダムなヘッダー画像を追加したり、その他多くのことができます。

プラグインの助けを借りて、テーマカスタマイザーに特定の機能を追加することもできます。

たとえば、Easy Google Fonts プラグインを使用して、WordPress にカスタム フォントを追加できます。

さまざまな画面解像度でウェブサイトをプレビューする

すべてのウェブサイトの所有者にとって、ウェブサイトがモバイルフレンドリーであり、すべての画面サイズで見栄えが良いことを確認することが重要です。

WordPressテーマカスタマイザーのおかげで、ウェブサイトがさまざまな画面サイズでどのように見えるかを簡単に確認できます。

テーマカスタマイザーパネルの下部には、3つのアイコンと「コントロールを非表示」リンクがあります。

これらのアイコンを使用すると、デスクトップ、タブレット、モバイルデバイスなどのさまざまな画面解像度でサイトをテストできます。

「コントロールを非表示」リンクは、WordPress カスタマイザーパネルを非表示にするのに役立ちます。これにより、デスクトップでサイトを正しく表示できます。

カスタマイザー設定の公開、保存、またはスケジュール設定

必要な変更を加えたら、サイトに適用する必要があります。そうしないと、これまでのすべての努力が無駄になります。

変更を適用するには、「公開」ボタンをクリックしてください。プロセスが完了したら、画面左上隅にある閉じるボタンをクリックしてテーマカスタマイザーを終了できます。

新しい WordPress デザイン の最終決定にもっと時間が必要な場合はどうなりますか？その場合、新しいデザインを下書きとして保存したり、管理エリアへのアクセス権を与えずに誰かと共有したりすることもできます。

これを行うには、「公開」ボタンの横にある歯車アイコンをクリックする必要があります。これにより、「アクション」パネルが開きます。

ここには、「公開」、「下書き保存」、「予約投稿」の3つのオプションがあります。

「アクション」パネルで「下書きとして保存」ラジオボタンを選択するだけです。次に、「下書きとして保存」ボタンをクリックして変更を保存します。

これでプレビューリンクをコピーし、他の人と共有して、フィードバックを得ることができます。

「スケジュール」オプションを使用すると、特定の日時で変更を公開できます。たとえば、トラフィックが最も少ない時間にテーマの変更を公開するようにスケジュールできます。

最後に、公開されていない変更をリセットしたい場合は、アクションパネルの「変更を破棄」リンクをクリックできます。

公開せずに異なるテーマをプレビューする

新しいテーマがサイトでどのように見えるかを確認したい場合があります。ただし、公開中のウェブサイトでそれらを有効にしたくはありません。

その場合、WordPressカスタマイザーを開いて、公開せずに新しいテーマをテストできます。

カスタマイザーパネルには、アクティブなテーマの名前と「変更」ボタンが表示されます。

そのボタンをクリックすると、WordPressはページ右側にインストールされているすべてのテーマを表示します。

特定のテーマを確認するには、「ライブプレビュー」ボタンをクリックする必要があります。

WordPressテーマリポジトリからテーマをプレビューすることもできます。

これを行うには、左側のパネルにある「WordPress.orgテーマ」チェックボックスを選択する必要があります。これにより、WordPress.orgディレクトリのテーマが表示されます。

気に入ったテーマを確認するには、「インストール＆プレビュー」ボタンをクリックするだけです。

画面右上にある「テーマをフィルタリング」ボタンをクリックして、テーマをフィルタリングすることもできます。

テーマカスタマイザー設定のインポートまたはエクスポート

テーマカスタマイザーの設定をインポートおよびエクスポートできることをご存知でしたか？

ローカルサーバーやステージングサイトでテーマを変更する際に非常に役立ちます。設定を手動でライブウェブサイトにコピーする代わりに、テーマカスタマイザーの設定をエクスポートするだけで時間を節約できます。

詳細な手順については、WordPressでテーマカスタマイザー設定をインポートおよびエクスポートする方法に関するガイドに従ってください。

ボーナスのヒント：WordPressテーマカスタマイザーの代替

WordPressカスタマイザーでサイトに変更を加えることができますが、コントロールの数は使用しているテーマによって異なります。

テーマは気に入っているけれど、追加のカスタマイズオプションがあればいいのにと思ったことはありませんか？

その場合、最善の解決策は、WordPressテーマカスタマイザーと連携する3つのカスタマイズプラグインのいずれかを使用することです。

SeedProd

SeedProdは、WordPress向けの最高のドラッグ＆ドロップページビルダーです。SeedProdを使用すると、コードを編集せずにカスタムWordPressテーマやページレイアウトを簡単に作成できます。

一部のパートナーブランドは、SeedProdを使用してサイトを構築しています。私たちの経験について知りたいですか？詳細については、SeedProdの詳細レビューをご覧ください。

SeedProd は、ランディングページ、セールスページ、ウェビナー登録ページ、近日公開ページ、メンテナンスモードページなどに利用できる、何百もの既製のページレイアウトを提供しています。

オプトインフォーム、ソーシャルプロフィール、ボタン、カウントダウンタイマー、お問い合わせフォームなどの既製のブロックでカスタマイズは簡単です。

カラー スキームを設定したり、フォントの組み合わせを保存したり、ページやページ要素を再利用したりできるため、再度作成する必要がありません。

Thrive Theme Builder

Thrive Theme Builder は、WordPress向けのもう一つの優れたドラッグ＆ドロップテーマビルダープラグインです。これを使用すると、コーディングなしで簡単にカスタムWordPressテーマを作成できます。

すぐに始められるように、4つの異なる既製のテーマテンプレートが同梱されています。各テーマテンプレートには、サイトに追加できるさまざまな既製のページが含まれています。

詳細については、Thrive Themes Suite のレビューをご覧ください。

このプラグインを使用すると、ヘッダー、フッター、ブログ投稿、カテゴリページなど、テーマの各部分をポイント＆クリックで編集できます。

さらに、ドラッグ＆ドロップでテーマに素早く追加できる100以上のデザインおよびサイト構築要素があります。

CSS Hero

CSS Heroは、CSSコードを一行も書かずにサイトをカスタマイズできるWordPressプラグインです。あらゆる要素を手間なく自由にスタイル設定できます。

WordPressサイトのログインページをカスタマイズしたいですか？CSS Heroを使えば、数分でそれが可能です。

また、変更を編集してプレビューし、すべてのデバイスでデザインが完璧に見えることを確認することもできます。

Beaver Builder

Beaver Builder は、WordPress のトップページビルダーの1つです。ドラッグ＆ドロップインターフェースを使用して、サイトの見事なページを作成できます。

最も良い点は、Beaver BuilderがほぼすべてのWordPressテーマで動作することです。これにより、現在のテーマで使用できます。私たちはこれを徹底的にテストしました。詳細については、Beaver Builderの完全なレビューをご覧ください。

Beaver Builderは、ショートコードとウィジェットの使用をサポートしています。また、ウェブサイトを簡単にスタイル設定するために使用できるさまざまな種類のモジュールも提供しています。WordPressでカスタムレイアウトを作成する方法の詳細については、ガイドをご覧ください。

WordPressテーマカスタマイザーの使用に関するよくある質問

テーマカスタマイザーを最大限に活用する方法について、まだ質問がありますか？WordPressユーザーからよく聞かれる質問をいくつかご紹介します。

WordPressテーマカスタマイザーですべてのテーマをカスタマイズできますか？

すべてのテーマではありません。ほとんどのWordPressテーマは引き続きテーマカスタマイザーをサポートしており、さまざまなデザインオプションを提供しています。ただし、フルサイト編集（FSE）を使用するブロックベースのテーマは代わりにサイトエディターに依存しており、これらのテーマではカスタマイザーは表示されません。

テーマを変更するとカスタム設定は削除されますか？

はい、可能です。カスタマイザーの設定は通常テーマ固有であるため、新しいテーマに切り替えると、それらの変更がリセットまたは削除される可能性があります。安全のために、設定をメモしておくか、テーマがサポートしている場合はインポート/エクスポートツールを使用してください。

WordPressでテーマカスタマイザーが見つからない場合はどうすればよいですか？

ダッシュボードに 外観 » カスタマイズ オプションが表示されない場合は、ブロックベース（フルサイト編集）テーマを使用している可能性があります。これらのテーマは サイトエディター を使用しており、これは 外観 » エディター の下にあります。詳細については、WordPressダッシュボードでテーマカスタマイザーが見つからない場合の修正方法に関するガイドをご覧ください。

テーマにさらにカスタマイズオプションを追加するにはどうすればよいですか？

現在のテーマが制限的すぎると感じる場合は、子テーマを作成したり、SeedProd、Thrive Theme Builder、CSS Heroのようなページビルダープラグインを使用したりすることを検討できます。これらのツールは、コードに触れることなく、より多くのデザインコントロールを提供します。

公開中のウェブサイトでテーマカスタマイザーの変更を行うのは安全ですか？

はい、テーマカスタマイザー内で変更を行っても、「公開」をクリックするまで公開されないため安全です。ただし、大規模な編集を計画している場合は、ライブサイトを中断しないように、ステージング環境で最初にテストすることをお勧めします。

探索を続ける：プロのようにデザインとカスタマイズ

このガイドが、WordPressテーマカスタマイザーをプロのように使う方法を学ぶのに役立ったことを願っています。

これがお役に立ったなら、他のガイドもご覧になりたいかもしれません。

• WordPressテーマのカスタマイズ方法
• WordPress テーマにパララックス効果を追加する方法
• WordPressで次/前のリンクを追加する方法 
• モバイルフレンドリーなWordPressサイトを作成する方法
• 翻訳準備完了のWordPressテーマを見つけて翻訳する方法
• 無料 vs 有料WordPressテーマ
• 試すべき最高のシンプルなWordPressテーマ
• 最新の標準に対してWordPressテーマをテストする方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。