• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

管理画面/外観/テーマ設定

提供: WordPress Codex 日本語版
移動先: 案内検索

外観 → カスタマイズ

WordPress Version 3.4 では、テーマカスタマイザーが導入され、Version 3.6 では、外観 > カスタマイズ から直接カスタマイザーにリンクされました。また テーマオプション画面カスタマイズ画面 に名前が変更されました。カスタマイズ画面を使用してテーマの作成者は、テーマの色やレイアウトを動的にプレビュー付きで変更する機能を提供できます。

注意。カスタマイズ画面は、有効化されたテーマが カスタマイズ機能をサポートする場合のみ利用可能です。またこの画面の内容は、カスタマイズ機能を準備するテーマによって異なります。たとえば WordPress Twenty Sixteen テーマ のカスタマイズ画面では、色を変更し、背景画像を選択するオプションが提供されます。

カスタマイズ画面

管理画面へ戻る。

テーマカスタマイザー

テーマカスタマイザーでは、サイトの変化の様子を発行せずにプレビューできます。またプレビュー中に異なるページヘ移動することもできます。Version 4.5 ではコントロール末尾に「デバイスプレビューボタン」が追加されました。実際にテーマを適用し、画面の大きさを変えることなく、デスクトップ、タブレット、モバイルのそれぞれでどのように表示されるかをプレビューできます。

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

ヒント: Version 4.5 からは、プレビュー画面内の項目を Shift キーを押しながらクリックすると、対応するカスタマイザーペイン内のメニューが開きます。

「現在のテーマ」には、現在カスタマイズ中のテーマの名前が表示されています。このカスタマイザーからテーマを変更したり、新規にインストールすることはできません。管理画面 > 外観 > テーマ を選択してください。

サイト基本情報

このメニューでサイト全体の情報を設定できます。

カスタマイザーのサイト基本情報画面

  • ロゴ - サイトのロゴ画像を指定できます。
    「ロゴを選択」をクリックすると「メディアライブラリ」が表示されます。画像を選択するか、「ファイルをアップロード」タブでファイルをアップロードし、右下の「ロゴを選択」をクリックします。
    ロゴを削除するには「削除」ボタン、変更するには「ロゴを変更」をクリックします。
  • サイトのタイトル - サイトタイトル用のテキストボックス
  • キャッチフレーズ - キャッチフレーズ用のテキストボックス
  • サイト名とタグラインを表示 - サイトタイトルやキャッチフレーズを表示するか隠すかを示すチェックボックス
  • サイトアイコン - サイトのアプリとブラウザーのアイコンとして使用される画像を選択します。正方形で512ピクセル以上の画像が必要です。
    「画像を選択」をクリックすると「メディアライブラリ」が表示されます。画像を選択するか、「ファイルをアップロード」タブでファイルをアップロードし、右下の「選択」をクリックします。
    サイトアイコンを削除するには「削除」ボタン、変更するには「画像の変更」をクリックします。

「色」メニューでは、テーマで表示されるサイトの配色、タイトルのテキスト色や背景色をカスタマイズできます。

カスタマイザーの色画面

  • ベース配色 - ベース配色は、テーマのあらかじめ用意された配色です。ドロップダウンボックスから好みの配色を選択してください。選択後に、他の要素の色を個別に変更できます。
  • 背景色 - 「色を選択」ボタンをクリックしてください。テーマの背景に表示される色を表す16進数(例: d33131)を入力するか、カラーピッカーから希望の色をクリックして対応する16進数を「色」フィールドに入力するか、または「デフォルト」をクリックして初期状態に戻すことができます。テーマによっては幅広い画面での表示時のみに背景色を確認できます。
  • ヘッダー・サイドバーテキスト色 - 小さい画面上のヘッダーのテキスト色と、幅広い画面上のサイドバーのテキスト色を、上の背景色と同じ方法で選択します。
  • ヘッダー・サイドバー背景色 - ヘッダーとサイドバーの背景色を選択します。

ヘッダー画像

小さい画面上のヘッダーと、幅広い画面上のサイドバーに使用される、オプションのヘッダー画像を選択します。

カスタマイザーのヘッダー画像画面

  • 新規画像を追加 - クリックすると「画像の選択」ダイアログボックスが表示されます。メディアライブラリに存在する画像を選択するか、「ファイルをアップロード」タブ画面で、ローカルコンピュータから画像ファイルをアップロードできます。ヘッダー画像の選択後に「選択して切り抜く」ボタンをクリックすると、「画像切り抜き」ダイアログボックスが表示されます。

ヘッダー画像の切り抜き機能を用いると、画像の領域を選択し、選択した領域以外を削除することができます。初期表示では、WordPress は最大のトリミング領域を明るい影で表示します。WordPress Twenty Fifteen テーマ でヘッダー画像は 954 x 1300 ピクセルが期待されるため、表示される領域もこの大きさです。明るい部分をクリック、ホールド、ドラッグすることで、好みの領域を選択できます。また、8つのトリミングサイズ変更ボックス (角と辺にある小さな四角) のいずれかをクリックして、トリミング選択領域を動かすことができます。

カスタマイザーの画像切り抜き画面

「画像切り抜き」ボタンをクリックすると、画像の切り取った領域がヘッダー画像として保存されます。カスタマイザーは更新したヘッダーを使用してサイトのプレビューを表示します。

ヘッダー画像を追加すると、さらにいくつかのオプションが表示されます:

  • 画像を非表示 - このボタンをクリックすると、ヘッダー画像が削除されます。
  • アップロード済み - アップロードした画像から選択してください。画像を削除するには、画像の上にマウスを移動し、右上角に表示される閉じるボタンをクリックします。
  • アップロード済みヘッダーをランダム表示 - このボタンをクリックすると、ページがロードされるたびにランダムにヘッダー画像を表示します。

背景画像

上の「色」メニューで指定した背景色に代わるオプションの背景画像を選択します。

カスタマイザーの背景画像画面

  • 画像を選択 - このボタンをクリックすると「画像を選択」ダイアログボックスが表示されます。メディアライブラリに存在する画像を選択するか、「ファイルをアップロード」タブ画面で、ローカルコンピュータから画像ファイルをアップロードできます。画像を選択し、「画像の選択」ボタンをクリックしてください。カスタマイザーは更新した背景画像を使用してサイトのプレビューを表示します。

背景画像を追加すると、さらにいくつかのオプションが表示されます:

  • 削除 - 画像をアップロード後に、不要になった場合はこのボタンを使用して画像を削除してください。カスタマイズした内容は失われ、もとに戻すことはできません。
  • 画像の変更 - 背景画像を変更します。
  • 背景の繰り返し - 画像を繰り返すかどうかを次の中から選択してください。繰り返し、繰り返しなし、タイル、水平方向に繰り返し、垂直方向に繰り返し
  • 背景の位置 - 画像を配置する位置を次の中から選択してください。左、中央、右
  • 背景スクロール - 背景をスクロールするか、固定して表示するかを選択してください。

ナビゲーション

この「ナビゲーション」でメニューの配置を定義できます。テーマ内にどのメニューを配置するか選択してください。

WordPress Twenty Fifteen テーマでは、2個のメニュー位置「メインメニュー」と「ソーシャルリンクメニュー」をサポートしています。ドロップダウンボックスから、メニュー位置で使用するメニューを選択してください。テーマ内に複数のナビゲーションメニュー がある場合、その数だけのメニュー位置のドロップダウンボックスが表示されます。

注意: このカスタマイザーでメニューを作成することはできません。メニューを作成するには、管理画面 > 外観 > メニュー を選択してください。

ウィジェット

テーマには通常、少なくとも1個、または2個のサイドバーがあります。サイドバーはブログ記事の左または右にある細長い列のことです。 サイドバーの部品は「ウィジェット」と呼ばれ、追加、削除、上下に移動できます。

この「ウィジェット」メニューでサイドバー内のウィジェットを構成できます。管理画面 > 外観 > ウィジェット メニューでも同じ操作は可能ですが、テーマカスタマイザーであれば変更をすぐにプレビューできます。

カスタマイザーのウィジェット画面

ウィジェットの構成

  1. テーマカスタマイザーで ウィジェット をクリックします。ウィジェットカスタマイズ用画面に移動します。
  2. ウィジェットエリア 右側の下向き矢印をクリックします。登録済みのウィジェット一覧が表示されます。
  3. サイドバー下部の「ウィジェットを追加」ボタンをクリックしてください。利用可能なウィジェットの一覧が表示されます。
  4. 追加するウィジェットをクリックしてください。ウィジェットがサイドバーに追加されます。
  5. プレビューで確認します。新しいウィジェットでコンテンツが表示されます。
  6. サイドバー内でウィジェットを並べ替えるには、ウィジェットをドラッグアンドドロップして希望の順番に並べるか、「並べ替え」リンクをクリックして、各ウィジェットの上向き矢印、下向き矢印をクリックし、最後に「完了」をクリックします。
  7. ウィジェットの機能をカスタマイズするには、右側の 下向き矢印 をクリックし、ウィジェットインターフェースを開きます。
  8. ウィジェットを削除するには、上の手順のウィジェットインターフェースで 削除 をクリックします。

各ウィジェットの説明

各種ウィジェットについて、構成オプションと共に紹介します。

「アーカイブ」 - 記事が投稿されている月へのアーカイブリンクを表示。
  • タイトル — アーカイブリンクのリストの上に表示される説明。
  • ドロップダウンで表示 — チェックされている場合、アーカイブリンクがドロップダウンボックスで表示される。
  • 投稿数を表示 — チェックされている場合、各期間の投稿数を表示する。
「カレンダー」 - 現在の月のカレンダーを表示。投稿のある日は、日付がリンクになる。
  • タイトル — カレンダーの上に表示される説明。
「カテゴリー」 - カテゴリーのリストを、そのカテゴリーの記事へのリンクとして表示。
  • タイトル — カテゴリーリストの上に表示される説明。
  • ドロップダウン表示 — チェックされている場合、カテゴリーリンクがドロップダウンボックスで表示される。
  • 投稿数を表示 — チェックされている場合、各カテゴリーの投稿数を表示する。
  • 階層を表示 — チェックされている場合、カテゴリーの親子関係を階層で表示する。
「カスタムメニュー」 - カスタムメニューを表示。
  • タイトル — メニューの上に表示される説明
  • メニューを選択 — 表示する作成済みのメニューを選択する。
「メタ情報」 - ユーザー登録、サイト管理、ログイン/ログアウト、エントリー RSS、コメント RSS、WordPress.org へのリンクなどの情報を表示。
  • タイトル — メタ情報の上に表示される説明。
「ページ」 - ページ へのリンクを表示。
  • タイトル — ページリストの上に表示される説明。
  • 並び順 — ページの並べ方を選択する。 ページタイトル、ページ順序、ページ ID から選択
  • 除外ページ — ページ ID を入力する。複数の場合は各 ID をコンマで区切る。
「最近のコメント」 - 最近承認されたコメントのリストを表示。
  • タイトル — 最近のコメントの上に表示される説明。
  • 表示するコメント数 表示するコメント数を入力 (最大 15)
「最近の投稿」 - 最近の投稿のリストを表示。
  • タイトル — 最近の投稿の上に表示される説明。
  • 表示する投稿数 表示する投稿数を入力 (最大 15)
  • 投稿日を表示しますか ? — チェックされている場合、投稿が公開された日付を表示。
「RSS」 - RSS フィードを表示。このウィジェットは、現在のウィジェットに複数追加できる。RSS ウィジェットの使用/en は、このウィジェットを使用して表示するフィードの例を紹介している。
  • RSS フィードの URL — フィード URL を入力する。例えば http://wordpress.org/development/feed/ のようにする。
  • このフィードにタイトルをつける (オプション) — フィードの上に表示される説明。
  • フィード内の項目をいくつ表示しますか? — 表示したフィード数を入力。
  • 項目の内容を表示しますか? — チェックされている場合、項目の内容を表示。
  • もしあれば項目の作成者を表示しますか? — チェックされている場合、項目の作成者を表示。
  • 項目の日付を表示しますか? — チェックされている場合、公開された日付を表示。
「検索」 - ブログを検索するテキストを入力する検索ボックスを表示。 検索ボタンも表示される。
  • タイトル — 検索ボックスの上に表示される説明。
「タグクラウド」 - 上位45個のタグをタグクラウドで表示。
  • タイトル — タグクラウドの上に表示される説明。
  • タクソノミー - 登録済みのタクソノミー(タグ、カテゴリーなど)を選択できる。
「テキスト」 - 任意のテキスト、HTML、JavaScript を入力。 このウィジェットは、現在のウィジェットに複数追加できる。 テキストウィジェットの使用/en で使い方を解説している。
  • タイトル — テキストウィジェットの説明。
  • テキストエリア — この領域にテキスト、妥当な HTML、あるいは妥当な JavaScript を入力することができる。
  • 自動的に段落追加する — チェックされている場合、自動的にテキストを囲むように HTML の段落を追加 (テキストで推奨)

固定フロントページ

サイトの先頭のページに最新の投稿を含めたり、固定のページや投稿を表示できます。

  • 最新の投稿 - サイトの先頭ページに最新の投稿を表示する場合に選択します。
  • 固定ページ - フロントページ、または投稿ページの場合に選択します。詳細、および選択可能な組み合わせについては静的フロントページの作成 を参照してください。

保存して公開

「保存して公開」ボタンをクリックすると、変更したオプションがデータベース内に保存されます。ボタンがクリックされると表示は "保存しました" に変わり保存されたことを通知します。


あわせて管理画面およびネットワーク管理 もご覧ください。


最新英語版: WordPress Codex » Appearance_Customize_Screen最新版との差分