外観カスタマイズ画面

トピック

基本的な使い方
- カスタマイザーの開始方法
- カスタマイザーの使い方
メニュー設定

管理画面から、「外観」 → 「カスタマイズ」メニューを選択すると、テーマのカスタマイザーが起動します。カスタマイザーを使用すると、サイトに加えた変更を公開する前にプレビューできます。テーマファイルを直接変更し、それらを更新すると、変更内容が失われる可能性があります。カスタマイザーを使用することで、変更が保存されることを確認できるでしょう。

注: カスタマイザーは、アクティブテーマがカスタマイズ機能をサポートしている場合にのみ使用できます。この画面は、作成されたテーマごとに異なる可能性があります。例えば、 WordPress Twenty Twenty-One テーマには、背景色の変更、背景画像の選択、ダークモード有効化などのオプションがあります。

Twenty Twenty-One Customizer — Twenty Twenty-One テーマのカスタマイザー

基本的な使い方

トップ ↑

カスタマイザーの開始方法

カスタマイザーを開始するには、次のいずれかの手順を実行します。

管理画面から、「外観」 → 「カスタマイズ」を選択。
ツールバーから、「カスタマイズ」を選択。

トップ ↑

カスタマイザーの使い方

左側のメニューからオプションのカテゴリーを開き、オプションの値を指定します。値の変更中には、プレビュー画面も変更されることに注目してください。カスタマイズが完了したら「公開」ボタンをクリックし、サイトに変更を反映します。

いくつかヒントをご紹介します。

プレビュー画面では内部リンクをクリックできます。クリックすることでクリックされたページを現在のカスタマイズのオプション値とともにプレビューで表示します。
左側のメニューの下部にある各端末のプレビューボタンは、モバイル、タブレット、およびデスクトップ端末でのサイトの外観をプレビューで表示します。

端末プレビューアイコン

プレビュー画面で青い鉛筆のアイコンをクリックすると、左サイドバーに対応する制御メニューが表示されます。

トップ ↑

メニュー設定

トップ ↑

サイト基本情報

このメニューでは、基本的なサイト情報を指定できます。

Customizer Site Identity screen — カスタマイザーのサイト基本情報画面

ロゴ – 企業シンボルなどのサイトロゴ画像
「ロゴを選択」をクリックして、「メディアライブラリ」を開きます。次に画像を選択するか、タブから「ファイルをアップロード」を選択し、新しい画像をアップロードします。画像を特定の領域から切り抜く場合は、切り抜きたい領域を選び、「画像切り抜き」ボタンをクリックします。切り抜かない場合は「切り抜かない」ボタンをクリックします。
「削除」をクリックしてロゴを削除、または「ロゴを変更」をクリックして、ロゴ画像を変更します。
サイトのタイトル – サイトタイトルのテキストボックス
キャッチフレーズ – キャッチフレーズのテキストボックス
Display Site title and tagline – Checkbox to enable or hide the display of title and tag line
サイトアイコン – サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。サイトアイコンは 512 × 512 ピクセル以上の正方形にしてください。
「画像を選択」をクリックすると、メディアライブラリが表示されます。その中から画像を選択するか、「ファイルのアップロード」タブ画面から新規に画像をアップロードし、右下の「選択」ボタンをクリックします。

トップ ↑

色とダークモード

「色とダークモード」メニューでは、テーマの表示する背景色をカスタマイズできます。また、テーマのダークモードのサポートを有効化することもできます。

背景色 – 「色を選択」ボタンをクリックします。テーマの背景として表示される色を表す16進数 (例: d33131) を入力するか、カラーピッカーから希望の色をクリックすると、その色の16進数が「色」フィールドに配置され、「デフォルト」をクリックすると初期状態に戻ります。この背景は、ワイドディスプレイでのみ表示される場合があります。
ダークモード対応 – Click the checkbox to activate the Dark Mode support. If the Dark Mode support is enabled, your site will be shown with a dark background and light text. Learn more about Dark Mode.

トップ ↑

背景画像

Select an optional background image to use in place of the solid background color specified in Colors & Dark Mode above.

Select image – Click this button to open Select Image dialog box. You can choose an image that is already in your Media Library, or upload image file from your local computer in Upload Files tab screen. Select the image and click Choose Image button. The Customizer will preview your site with updated background.

Once you add a background image you will get some more options:

Remove – Once an image is uploaded, if the image is no longer desired, use this button to remove the image. You will not be able to restore any customizations.
Change Image – Click this button to change the background image.
Preset dropdown – Under Preset, you can select how you want the background image to be displayed: default, fill screen, fit to screen, repeat, or custom.
Image Position – You can also select the background image position by clicking on the arrows under Image Position, to be positioned Left, Center, or Right . Clicking on center will align the image to the center of the screen.
Image Size – You can change the Image Size from the drop down menu to Fit to Screen, Fill Screen or keep it Original.
Repeat Background Image – Click the checkbox to repeat the background image across the page.
Scroll with Page – Click the checkbox to enable the background image to scroll with the page or display as fixed.

トップ ↑

メニュー

この画面は、サイトで公開済みのコンテンツのナビゲーションメニューを管理するためのものです。固定ページ、投稿、カテゴリー、タグ、投稿フォーマット、カスタムリンクなど、既存のコンテンツに対してメニューを作成したり、項目を追加したりすることができます。

Customizer Add Menu screen — カスタマイザーのメニュー追加画面

WordPress の Twenty Twenty-One テーマは、は、メインとサブの2つのメニュー位置に対応しています。プルダウンボックスから、その場所に表示するメニューを選択してください。お使いのテーマがさらに多くのナビゲーションメニューをサポートしている場合は、位置オプションのプルダウンがさらに表示されます。