WordPressテーマカスタマイザー機能の使い方を紹介します。テーマカスタマイザーは、サイトのデザインや表示内容を管理画面上でかんたんに編集できる機能です。

テーマカスタマイザーとは

テーマカスタマイザーは、サイトのデザインや表示内容をWordPressの管理画面上で変更・修正できる機能です。サイト制作に必要な専門知識がなくても、直感的な操作が可能です。

テーマカスタマイザーでできること

テーマカスタマイザーを使うと、主に次の項目についてカスタマイズすることができます。

  • サイトタイトル・キャッチフレーズ
  • 色調
  • ロゴ・サイトアイコン
  • ナビゲーションメニュー
  • ウィジェット
使用するテーマによって、カスタマイズできる内容が異なります。また、テーマカスタマイザー機能そのものを備えていない場合もあります。

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

複数のテーマをインストールしている場合、カスタマイズしたいテーマを有効化しておきましょう。くわしくは、WordPressのテーマを変更する方法をご覧ください。

テーマカスタマイザーは、WordPress管理画面の[外観]>[カスタマイズ]から開くことができます。

WordPress管理画面の[外観]>[カスタマイズ]

テーマカスタマイザーの大まかな利用手順は、次のとおりです。

  1. 編集したい項目を選択する
  2. プレビューを確認する
  3. 編集内容を保存する

ここでは、WordPressの標準テーマ「Twenty Nineteen」のテーマカスタマイザーを例として、使い方を紹介します。

2019/3/27 追記
これまでは「Twenty Seventeen」のテーマカスタマイザーを例として使い方を紹介していましたが、最新の標準テーマ「Twenty Nineteen」に変更し、加筆修正しました。
なお、これから紹介する画像は、WordPress(バージョン 5.1.1)インストール直後の状態で撮影したものです。ご利用環境によっては、実際のものと異なる場合があります。

編集する項目の選び方

テーマカスタマイザーで編集する項目を選ぶには、画面左側のコントロールをクリックする方法と、画面右側のプレビュー上のアイコンをクリックする方法があります。

「Twenty Nineteen」テーマカスタマイザー編集画面

例えば、サイトタイトルを編集するには、コントロールの「サイト基本情報」をクリックするか、もしくはプレビューに表示されているサイトタイトル左側のアイコンをクリックします。

テーマカスタマイザーで編集する項目の選び方

編集内容の確認

編集をすると、プレビュー画面にリアルタイムで反映されます。

テーマカスタマイザー 編集内容の確認
この時点では、実際のサイトには編集内容が反映されていません。反映させるには、次項の「編集内容の保存」を行ないます。

編集内容の保存

カスタマイズ完了後に公開をクリックすると、実際のサイト上で編集内容が反映されます。

テーマカスタマイザー 公開ボタン

編集できる項目

くわしく知りたい項目(青文字)をクリックしてください。
「Twenty Nineteen」テーマカスタマイザー 編集できる項目
サイト基本情報

サイト基本情報では、ロゴサイトのタイトルキャッチフレーズ(サイトの説明文)、サイトアイコンを編集できます。
サイトアイコンを設定すると、ウェブブラウザのタブやブックマーク画面、スマートフォンのホーム画面などに表示されます。

「Twenty Nineteen」テーマカスタマイザー サイト基本情報

メインカラーで[カスタム]を選択すると、ボタンやリンクなどの色を変更することができます。

「Twenty Nineteen」テーマカスタマイザー 色
アイキャッチ画像の色加工を解除したいときは、「アイキャッチ画像にメインカラーのフィルターを適用する」のチェックを外します。
メニュー

メニューの新規作成や編集、表示位置の変更などができます。実際にメニューを作成し、表示位置を指定する様子を紹介します。

WordPress のメニューについてよくわからない場合は、下記ページをあわせてご覧ください。

メニュー 設定手順1

まず、メニューを新規作成をクリックします。

「Twenty Nineteen」テーマカスタマイザー メニュー編集手順1

メニュー 設定手順2

メニュー名を入力し、
メニューの位置を選択して、
次へをクリックします。

「メニューの位置」は、複数の位置を同時に選択することもできます。
「Twenty Nineteen」テーマカスタマイザー メニュー編集手順2

メニュー 設定手順3

メニューに表示するリンクを追加するため、+ 項目を追加をクリックします。

「Twenty Nineteen」テーマカスタマイザー メニュー編集手順3

メニュー 設定手順4

ここで、メニューに追加したいページなどをクリックします。今回は、固定ページから「ホーム」「サンプルページ」を選択しました。
追加した項目は、ドラッグ&ドロップで並べ替えることもできます。

「Twenty Nineteen」テーマカスタマイザー メニュー編集手順4

今回は「メイン」の位置を選択したので、画面上部にメニューが表示されています。

「Twenty Nineteen」テーマカスタマイザー メニュー編集手順5
ウィジェット

ウィジェットの内容を編集することができます。

管理画面の[外観]>[ウィジェット]をクリックしても、同様のカスタマイズをすることができます。くわしくは、下記ページをご覧ください。
ホームページ設定

ホームページ(サイトのトップページ)の設定を変更することができます。

管理画面の[設定]>[表示設定]をクリックしても、同様の設定変更をすることができます。くわしくは、下記ページをご覧ください。
追加CSS

独自のCSSコードを追加し、レイアウトや配色などの細かい設定変更をすることができます。上級者向けの設定項目です。

デバイスプレビューボタン

コントロールの下部には、デバイスプレビューボタンがあります。各ボタンをクリックすると、デスクトップ(パソコン)、タブレット、モバイル(スマートフォン)それぞれの端末でどのように表示されるかを確認することができます。

デバイスプレビューボタンは、プレビュー画面のサイズ(幅)が小さいと表示されないことがあります。
「Twenty Nineteen」テーマカスタマイザー デバイスプレビューボタン