WordPressテーマカスタマイザーをプロ並みに使いこなす方法（究極ガイド）

WordPressテーマカスタマイザーは、閲覧者が共感できる視覚的に魅力的なサイトを作成するための優れた機能を提供します。すべて、コードを一行も触る必要がありません。

しかし、カスタマイザーの設定に頭を悩ませることもある。

ブログの旅を通して、私たちはテーマのカスタマイゼーションをマスターしてきました。適切な調整と調整によって、標準的なサイトがいかに魅力的でユーザーフレンドリーな体験に変わるかを、私たちは身をもって体験してきました。

この投稿では、初期設定のパネルを案内し、WordPressテーマカスタマイザーをプロのように使う方法をお教えします。最後には、あなたのサイトをより洗練されたプロフェッショナルなものにすることができるでしょう。

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

テーマカスタマイザーはWordPressの初期設定機能であり、すべてのWordPressサイトの一部です。

WordPress管理画面にログインし、管理画面の左サイドバーから外観“カスタマイザーにアクセスします。現在のテーマでカスタマイザーのインターフェースが開きます。

また、WordPressテーマカスタマイザーは、現在有効化したテーマでなくても、インストーラされているテーマに対して使用することができます。この機能により、テーマのライブプレビューを確認し、有効化する前に変更を加えることができます。

そのためには、 外観“テーマページに移動する必要があります。次に、インストールされているテーマにマウスカーソルをオーバーし、ライブプレビューボタンをクリックしてWordPressテーマのカスタマイザーページを開きます。

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

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

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

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

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

特定のトピックに興味がある場合は、リンクをクリックして投稿をスキップすることができる：

準備はいいかい？始めよう

サイト・アイデンティティ・パネル：タイトル、ロゴ、ファビコンの追加

WordPressテーマカスタマイザーの「サイトアイデンティティ」パネルでは、サイトのタイトルやキャッチフレーズを追加・変更することができます。

WordPressの初期設定では、サイトのキャッチフレーズとして「Just Another WordPress Site」が追加されています。WordPressをサイトにインストールした後に変更することをお勧めしますが、空白のままでもかまいません。

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

あなたのサイトにファビコンを追加したいですか？サイトアイコンを選択’オプションをクリックすることで可能です。詳細な手順については、ファビコンを作成してサイトに追加する方法のガイドを参照してください。

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

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

例えば、Twenty Seventeenテーマでは、ヘッダーテキストの色を選択し、サイト全体の配色を選択することができます。

他のWordPressテーマでは、見出し、リンク、本文、サイトの背景などのサイト要素に異なるカラーオプションを提供している場合があります。

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

メニュー’パネルでは、ナビゲーションメニューを作成し、サイト上の位置をコントロールすることができます。

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

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

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

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

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

項目を並び替えるには、「並び替え」リンクをクリックし、矢印アイコンを使ってメニュー項目を調整することができる。

テーマカスタマイザーでサイトのウィジェットをコントロールする

ウィジェット’パネルでは、サイトのウィジェットを追加・管理することができます。これをクリックすると、ウィジェットを追加できるさまざまな場所が表示されます。また、これは使用しているテーマによって異なります。

例えば、Twenty Seventeenテーマは3つのウィジェットロケーションを提供しているのに対し、Twenty Nineteenテーマには1つのロケーションしかありません。

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

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

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

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

初期設定では、WordPressはトップページに最新のブログ投稿を表示します。

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

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

トップページ用のページとブログ投稿用のページを選択するドロップダウンメニューが表示されます。

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

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

サイトにカスタムCSSコードを追加したいですか？追加CSS’パネルでそれを行うことができます。

WordPress中級・上級ユーザーは、テーマのstyle.cssファイルに直接CSSコードを追加してサイトをカスタマイズすることが多い。この方法では、WordPressホスティングサービスにFTPアクセスし、テーマファイルを修正するなどの追加の手順が必要です。

初心者のための簡単な解決策は、WordPressテーマカスタマイザーのAdditional CSSパネルにカスタムCSSコードを追加することです。これにより、サイトに変更を加えることができ、画面の右側にライブで表示されます。

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

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

無料テーマやプレミアムテーマの中には、テーマカスタマイザーのオプションが充実しているものもあります。

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

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

例えば、Easy Google Fontsプラグインを使えば、WordPressにカスタムフォントを追加することができる。

異なる画面解像度でサイトをプレビューする

すべてのサイトオーナーにとって、ウェブサイトがモバイル・レスポンシブであり、すべての画面サイズで美しく見えることを確認することは重要です。

WordPressテーマカスタマイザーのおかげで、あなたのサイトが異なる画面サイズでどのように見えるかを簡単にチェックすることができます。

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

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

Hide Controls」リンクは、WordPressカスタマイザーパネルを非表示にして、デスクトップモードでサイトを正しく表示できるようにするのに便利です。

カスタマイザー設定を公開する、保存する、スケジュールする

必要な変更を行ったら、それをサイトに適用する必要がある。そうしないと、せっかくの苦労がすべて水の泡になってしまいます。

先に進み、「公開する」ボタンをクリックして変更を適用します。プロセスが完了したら、画面左上の閉じるボタンをクリックしてテーマカスタマイザーを終了します。

新規デザインを完成させるのに時間が必要な場合はどうすればいいでしょうか？その場合、新しいデザインを下書きとして保存し、管理エリアにアクセスすることなく誰かと共有することができます。

そのためには、『公開する』ボタンの右隣にある歯車のアイコンをクリックする必要があります。これで「アクション」パネルが開きます。

ここには3つのオプションがあります：公開する」、「下書きを保存する」、「スケジュールする」。

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

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

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

最後に、未公開の変更をリセットしたい場合は、アクションパネルの「変更を破棄」リンクをクリックしてください。

さまざまなテーマを本番なしでプレビューする

新しいテーマがあなたのサイトでどのように見えるかをチェックしたい場合があります。しかし、ライブサイトで有効化したくはないでしょう。

その場合、WordPressカスタマイザーを開くことで、本番稼働せずに新しいテーマをテストすることができます。

カスタマイザーパネルに、有効化したテーマの名前と「変更」ボタンがあります。

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

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

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

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

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

画面右上の「テーマをフィルター」ボタンをクリックすれば、テーマをフィルターすることもできる。

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

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

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

詳しい手順については、WordPressでテーマカスタマイザーの設定をインポートおよびエクスポートする方法をご覧ください。

WordPressテーマカスタマイザーの代替案

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

気に入ったテーマがあるけれど、もっとカスタマイズのオプションがあればいいのにと思ったら？

その場合、WordPressテーマカスタマイザーと一緒に動作する3つのカスタマイズプラグインのいずれかを使用するのが最善の解決策です。

SeedProd

SeedProdはWordPressのための最高のドラッグアンドドロップウェブサイトビルダーです。あなたは簡単に任意のコードを編集せずにカスタムのWordPressテーマやページレイアウトを作成するためにSeedProdを使用することができます。

SeedProdは、ランディングページ、セールスページ、ウェビナー登録ページ、近日公開ページ、メンテナンスモードページなど、何百ものページレイアウトをあらかじめ用意しています。

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

また、配色を設定したり、フォントの組み合わせを保存したり、ページやページ要素を再利用して、再度作成する必要がないようにすることもできます。

Thrive Theme Builder

Thrive Theme BuilderもWordPress用の人気のドラッグ＆ドロップテーマビルダープラグインです。コーディングの必要なく、カスタマイザーのWordPressテーマを簡単に作成することができます。

すぐに始められるように、4種類の既製テーマテンプレートがパッケージされています。各テーマテンプレートには、サイトに追加できる様々なページがあらかじめ用意されています。

ヘッダー、フッター、ブログ投稿、カテゴリーページなど、テーマの各パーツをポイント＆クリックするだけで編集できます。

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

CSSヒーロー

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

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

また、フロントエンドで変更を編集してプレビューし、どの端末でもデザインが完璧に見えるようにすることもできます。

ビーバービルダー

Beaver BuilderもWordPressのトップページビルダーの一つです。ドラッグアンドドロップのインターフェースを使用して、サイトに魅力的なページを作成することができます。

Beaver BuilderはほとんどすべてのWordPressテーマで動作します。そのため、現在使っているテーマと一緒に使うことができます。

Beaver Builderはショートコードとウィジェットの使用をサポートしています。また、あなたのサイトを簡単にスタイリングするために使用できるさまざまなタイプのモジュールも提供しています。WordPressでカスタマイザーレイアウトを作成する方法については、こちらのガイドをご覧ください。

このガイドがWordPressテーマカスタマイザーをプロ並みに使いこなす方法の一助となれば幸いです。また、WordPressテーマを最新の標準に照らし合わせてテストする方法や、専門家が選んだ試してみたい最高のシンプルなWordPressテーマもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.