ガイド/エディターを使用/ブロック設定の変更

ブロック設定の変更

WordPress エディターを使ってコンテンツのブロックを追加すると、コンテンツの表示方法をカスタマイズできます。このガイドでは、各ブロックの設定やカスタマイズオプションにアクセスする方法を説明します。

動画チュートリアル

この動画では、WordPress エディターでブロックの設定を変更する方法を紹介します。ブロックツールバーと設定サイドバーを使って、ブロックのオプションやスタイル、外観をカスタマイズする方法を紹介します。

この動画の言語は英語です。
YouTube には、自分の言語で視聴できる自動翻訳機能があります。

自動翻訳字幕を表示するには:

  1. 動画を再生します。
  2. 動画右下の ⚙️ 設定 アイコンをクリックします。
  3. 字幕/CC を選択します。
  4. 自動翻訳 を選択します。
  5. 希望する言語を選びます。

自動吹き替え(実験機能)で視聴するには:

  1. ⚙️ 設定 アイコンをクリックします。
  2. 音声トラック を選択します。
  3. 視聴したい言語を選びます。

ℹ️ 翻訳と吹き替えは Google により自動生成されるため、正確でない場合があります。また、自動吹き替えは現在テスト中で、すべての言語で利用できるわけではありません。注: 字幕の文章は Google 翻訳で生成されるため、完全とはいえませんが、内容の把握に役立ちます。

ブロックのカスタマイズ方法

まず、カスタマイズするブロックを選択します。ブロックをクリックするか、リスト表示を使って特定のブロックを探します。

ブロックのカスタマイズオプションは、ブロックツールバーブロック設定の2か所にあります。

WordPress エディターで画像ブロックが選択された状態。画像の上のブロックツールバーとエディター右側のブロック設定がハイライトされている。

ブロックツールバー

ブロックをクリックすると、その上部または下部にブロックツールバーが表示されます。ツールバーには、そのブロックを操作するための基本的なオプションが含まれています。

段落ブロックの直上に表示されたツールバー。

グローバルブロックのツールバーオプション

一部のオプションは、多くのブロックのツールバーに共通して表示されます。以下に説明します。

ブロックツールバーのグローバルツールバー設定がハイライトされた状態。
  • 変換: ブロックを別のブロックタイプに変更したり、スタイルのバリエーションを適用したりします。詳しくはブロックタイプやスタイルの変更を参照してください。
  • ドラッグ: 6つの点のアイコンをクリックしたままドラッグして、ブロックをページ内の別の場所に移動します。
  • 上/下に移動: 上下矢印をクリックすると、ページ上でブロックを1つ上または下に移動できます。
  • 整列: ブロックの配置を変更します。通常は左寄せ、右寄せ、中央揃えを選択できるほか、テーマでサポートされている場合は幅広や全幅も利用できます。
  • その他のオプション: ツールバーの右端にある縦3点のアイコンをクリックすると、以下の追加メニューが開きます。
    • コピー: ブロックをクリップボードにコピーして、任意の場所にペーストできます。
    • 切り取り: 選択したブロックをクリップボードに移動し、元の場所から削除します。別の場所にペーストできます。
    • 複製: ブロックのコピーを元のブロックのすぐ下に作成します。
    • 前に挿入: 現在のブロックの上にスペースを作り、新しいブロックを追加できるようにします。
    • 下に挿入: 現在のブロックの下にスペースを作り、新しいブロックを追加できるようにします。
    • ノートを追加: 他の投稿者と共同作業するためのノートを追加します。
    • スタイルをコピー: ブロックに適用されているスタイルをコピーします。
    • スタイルを貼り付け: コピーしたブロックのスタイルを、選択中のブロックに貼り付けます。
    • グループ化/グループ解除: このオプションを使用すると複数のブロックをグループ化できます。一連のブロックに色やパディングを適用する場合に便利です。詳しくはグループブロックを参照してください。
    • ロック: ブロックの移動や削除のオプションを無効にします。
    • 名前を変更: リスト表示に表示されるブロックの名前を変更します。
    • 非表示: 特定の端末でブロックを非表示にしたり、公開したページから削除したりします。特定の端末でブロックを非表示にする方法の詳細はこちら。
    • パターンを作成: カスタマイズしたブロックを保存し、サイト内の他の場所に追加できるようにします。詳しくはパターンブロックを参照してください。
    • アイキャッチ画像に設定: 画像ブロックで使えるオプションで、その画像をページや投稿のアイキャッチ画像に設定します。
    • 移動: このオプションをクリックしてからページの別のセクションをクリックすると、ブロックがそのセクションに移動します。
    • HTML として編集: ブロックコンテンツを HTML で編集します。
    • 削除: 現在のブロックをページから削除します。

ブロック固有のツールバーオプション

各ブロックには、そのブロック固有のツールバーオプションもあります。たとえば、画像ブロックのツールバーには、リンクの追加、画像の切り抜きなどの設定があります。

ブロックツールバーのブロック固有のアイコンがハイライトされた状態。
ブロック固有のブロックツールバーオプションの例。

ブロックツールバーのアイコンにマウスオーバーすると、各アイコンの機能を説明するツールチップが表示されます。

ブロックツールバーのデュオトーンフィルターアイコンのツールチップがハイライトされた状態。

各ブロックには、各設定について詳しく確認できるガイドを表示できます。

上部固定ツールバーとフローティングツールバー

デフォルトでは、ブロックツールバーは作業中のブロックのすぐ上または下に表示されます。

段落ブロックとその直上に表示されたツールバー。

次の手順で、ブロックツールバーを画面上部に固定表示することもできます。

  1. エディターで、画面右上の省略記号 (3つの点) をクリックしてエディターの設定を開きます。
  2. トップツールバー」オプションをクリックします。有効になると、横にチェックマークが表示されます。
  3. ブロックツールバーが画面上部に固定表示されるようになります。
エディター上部のトップツールバーに表示されたブロックツールバー。

ブロック設定

ブロック設定のサイドバーでは、選択中のブロックについて、より詳しいカスタマイズオプションを確認できます。各ブロックには独自の設定があり、設定サイドバーで確認できます。

ブロック設定サイドバーを開くには:

  1. カスタマイズするブロックを選択します。
  2. エディター右上の設定アイコンをクリックします。このアイコンは、幅の異なる2列が並んだ四角形のような形です。
WordPress エディター右上の「設定」アイコンを指す矢印。
  1. サイドバー上部の「ブロック」タブをクリックすると、選択したブロックの設定が表示されます。

多くのブロックには、タイポグラフィ寸法高度なブロック設定などの設定項目があります。各ブロックには、各設定について詳しく確認できるガイドを表示できます。

ブロックスタイル

多くのブロックには、タイポグラフィ寸法などを変更できるスタイル設定があります。

スタイル設定がメインのブロック設定サイドバーに含まれている場合もあります。ほとんどのブロックでは、白黒の円で表されるスタイル専用のタブが別途用意されています。

ブロック設定サイドバーで「スタイル」オプションを指す矢印。

一部のブロックでは、ワンクリックで適用できる、あらかじめ用意された見た目のスタイルである「スタイルバリエーション」も利用できます。スタイルバリエーションの見つけ方と適用方法については、ブロックタイプやスタイルの変更を参照してください。

ブロックスタイルのコピー&ペースト

ブロックスタイルのコピー&ペーストを使うと、あるブロックの書式設定(色、タイポグラフィ、整列など)をコンテンツを変更せずに別のブロックに適用できます。2つのブロックの見た目を揃えたいときに便利です。

ブロックのスタイルをコピー&ペーストするには、以下の手順に従ってください。

  1. コピーしたいスタイルが設定されているブロックをクリックします。
  2. ブロックツールバーの省略記号 (3つの点) をクリックして「その他のオプション」メニューを開きます。
  3. 「スタイルをコピー」をクリックします。
  4. スタイルを適用したいブロックをクリックします。
  5. 再び「その他のオプション」メニューを開き、「スタイルを貼り付け」をクリックします。これで2つ目のブロックに1つ目と同じスタイルが適用されます。
ツールバーの「オプション」メニュー項目から、ドロップダウン内の「スタイルをコピー」と「スタイルを貼り付け」オプションへの矢印。

スタイルのコピーで変更されるのはブロックの書式設定のみです。ブロックのコンテンツをコピーしたい場合は、「エディターでコンテンツをコピーする」を参照してください。

WordPress エージェントを使ったブロックのカスタマイズ

The WordPress Agent four-pointed star icon.

このセクションは、AI ウェブサイトビルダーで作成されたサイト (すべての有料プラン) または WordPress エージェントを有効化したサイト (すべての有料プラン) に適用されます。WordPress エージェントを開くには、画面下部の AI アイコン (四芒星) をクリックしてください。

WordPress エージェントを使うと、ブロックの見た目を調整したり改善したりできます。以下はコピーしてそのまま使えるプロンプトの例です。

  • 「ロゴの色に合うホームページの配色を提案してください。」
  • 「プロフェッショナルなサイトの見出しと本文に適したフォントサイズを教えてください。」
  • 「自己紹介ページのすべての画像ブロックを中央揃えにしてください。」
  • 「ホームページのすべてのセクションブロックに40ピクセルのパディングを追加してください。」

外部 AI エージェントを使ったブロックのカスタマイズ

The WordPress Agent four-pointed star icon.

Claude、Cursor、ChatGPT、OpenClaw などの外部 AI エージェントを使用して、サイトを安全に読み取り・編集できます。外部 AI エージェント向けの MCP ツールアクセスを有効化してください。

AI エージェントは、自然言語のプロンプトを使って、ページや投稿全体のブロック設定 (色、フォントサイズ、スタイルなど) を更新できます。以下のプロンプトもお試しください。

  • 「ホームページのすべての見出しブロックを大きいフォントサイズに設定してください。」
  • 「サービスページのボタンスタイルをアウトラインデザインに変更してください。」
  • 「このコールトゥアクションブロックをもっと目立たせるスタイルを提案してください。」
  • 「ホームページのカバーブロックの背景色をダークブルーに変更してください。」
Copied to clipboard!