サポートに戻る サイトをデザインする サイトエディター サイトエディターを使用する

サイトエディターを使用する

サイトエディターでは、ブロックを使用して、ヘッダーからフッターまでサイトのあらゆる要素をデザインできます。このガイドではこのエディターについて説明します。

サイトエディターにアクセスする

サイトエディターにアクセスするには、次の手順に従います。

  1. サイトのダッシュボードから開始します。
  2. 左側の「外観」を見つけます。
  3. 「エディター」をクリックします。

ここで「エディター」が表示されない場合は、お使いのテーマはサイトエディターをサポートしていません。WordPress の最新の編集機能を利用するには、サポートされているテーマに切り替えることをお勧めします。

「外観」→「エディター」メニューからサイトエディターを開く方法を示したスクリーンショット。
ダッシュボード「外観」からサイトエディターにアクセスする

サイトエディターにアクセスすると、次が表示されます。

左側のサイドバー

左側のサイドバーには次のオプションがあります。

  • ナビゲーション: サイトのナビゲーションメニューを管理します。
  • スタイル: サイトの色、フォント、その他のデザインの側面をカスタマイズします。
  • ページ: サイトの個々のページのコンテンツを編集します。
  • テンプレート: サイトのコンテンツの構造レイアウトを編集します。
  • パターン: テンプレートの小さな部分 (ヘッダーやフッターなど) と作成したパターンを編集します。

ホームページはこれらのオプションの右側に表示されます。このエリアの任意の場所をクリックすると左側のサイドバーが閉じ、エディターにホームページが開きます。

「ナビゲーション」、「スタイル」、「ページ」、「テンプレート」、「パターン」オプションが表示された、サイトエディターのデザインページ。

トップメニュー

サイトエディターの上部には、以下に説明する多数のオプションがあります。

  1. ナビゲーションを開く: ファビコンが表示されます。設定していない場合はデフォルトアイコンが表示されます。これを1回クリックすると、前のセクションで説明したオプションに戻ります。もう一度クリックするとダッシュボードに戻ります。
  2. ブロック挿入ツールを切り替える: これをクリックすると新しいブロックを追加します。
  3. ツール: ブロックの編集またはブロックの選択から選択します。選択ツールを選択し、個々のブロックを選択します。ブロックを選択したら、キーボードの Enter キーを押して編集に戻ります。
  4. 取り消し: 最後に行ったアクションを取り消します。
  5. やり直し: やり直しボタンを使用して、取り消したアクションを元に戻します。
  6. リスト表示: ページに含まれるすべてのブロックのリストを表示します。ページの構造を表示し、ブロックを編集、移動、削除する場合に便利です。リスト表示の詳細をご覧ください。
  7. コマンドセンター: こちらに編集中のテンプレートの名前が表示されます。これをクリックするとサイトのテンプレートを検索できます。テンプレートの編集の詳細については、こちらをご覧ください。
  8. プレビュー: 変更が適用されたサイトの外観のプレビューを表示します。
  9. 保存: 変更を保存します。保存の詳細については、こちらをご覧ください
  10. AI 実験: Jetpack AI を使用した実験の進化するセクション。
  11. ヘルプセンター: 便利なガイドを検索するか、対象プランについてサポートに問い合わせます。
  12. 設定: 右側の設定サイドバーを表示または非表示にします。
  13. スタイル: 色やフォントなどをカスタマイズします。スタイルの詳細については、こちらをご覧ください。
  14. 追加オプション: 追加の設定とツールを開きます。

変更を保存する

「保存」ボタンをクリックしてサイトエディターで行った変更を保存すると、変更を加えた場所が表示されます。すべての変更を保存することも、一部の変更だけを保存することもできます。操作していたページだけでなく、対象のテンプレートを使用するサイトのすべてのページに一部の変更 (ヘッダーテンプレートとフッターテンプレートへの変更など) が適用されます。

スタイル

サイトエディターで「スタイル」を使用すると、カラーパレット、フォント、レイアウトや、サイト全体に影響するさまざまなデザインの側面を選択できます。スタイルを使用する方法については、こちらをご覧ください。

四角で囲まれたスタイルアイコン。
スタイルボタン

追加のガイド

サイト編集のあらゆる側面に関する詳細については、次のリソースとチュートリアルをご覧ください。

Copied to clipboard!