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

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

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

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

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

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

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

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

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

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

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

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

編集する項目の選び方

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

テーマカスタマイザー編集画面

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

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

編集内容の確認

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

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

プレビュー画面内では、別のページに移動することもできます。

テーマカスタマイザー ページ遷移
ホームページ(トップページ)以外のページもプレビューできる

編集内容の保存

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

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

主な編集項目

テーマカスタマイザー 主な編集項目
サイト基本情報

サイトタイトルやキャッチフレーズ(サイトの説明文)、サイトアイコンを編集できます。

サイトアイコンを設定すると、ウェブブラウザのタブやブックマーク画面、スマートフォンのホーム画面などに表示されます。

サイトアイコンの例 ブラウザタブ
サイトアイコンの表示例(ブラウザのタブ)

背景色やソーシャルリンクのボタン色を変更することができます。

テーマカスタマイザー 配色の設定変更
ヘッダーメディア

ヘッダー画像を変更したり、動画を挿入することもできます。動画は、ファイルをアップロードする方法だけでなく、YouTubeの動画URLを入力する方法もあります。

メニュー

メニューの内容や位置を編集できます。「Twenty Seventeen」の場合、トップメニューとソーシャルリンクメニューの2つが用意されています。

また、トップメニューの初期状態には「会社概要」「ブログ」「お問い合わせ」があります。カスタマイザーの公開ボタンをクリックすると、これらの固定ページが自動的に作成される仕様となっています。

「Twenty Seventeen」のメニュー
固定ページが不要の場合は、削除することができます。

不要な固定ページを削除する
ウィジェット

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

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

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

管理画面の[設定]>[表示設定]をクリックしても、同様の設定変更をすることができます。関連するページとして、固定ページをトップページに指定する方法もあわせてご覧ください。
テーマオプション

「Twenty Seventeen」の場合、固定ページのレイアウトを1カラムにするか2カラムにするか選択することができます。また、フロントページに表示する内容を設定変更することができます。

追加CSS

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

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

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

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

関連ページ