グループブロック

ブロック一覧へ戻る

グループブロックを使うと、異なるブロックをグループにまとめることができます。グループ自体を再利用可能ブロックにしたり、グループに背景色を追加したりできます。

グループブロックの例

カラム、見出し、段落、画像、ボタンの各ブロックをまとめたグループブロック

グループブロックを追加するにはブロックを追加アイコンをクリックします。

空のブロックへ /group (または /グループ)と入力して Enter キーを押す方法でも、簡単に追加できます。

ブロック追加の詳しい方法はこちらをご覧ください。

ブロックツールバー

ほとんどのブロックには固有のツールバーアイコンとコントロールがあり、エディター内でブロックを操作できます。

グループブロックには標準で4個のボタンがあります。

  • 変換またはスタイル変更
  • 移動用ハンドル
  • 配置を変更
  • 他のオプション

変換またはスタイル変更

グループブロックカラムへ変換できます。また、グループブロックのスタイルをデフォルト枠線の2種類から選べます。

移動用ハンドル

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置を変更

  • 幅広 – ブロックの幅をコンテンツ幅に合わせます。
  • 全幅 – 画面の幅いっぱいまでブロックの幅を広げます。

他のオプション

追加設定を表示(非表示)

追加設定を表示(非表示)オプションを使うと、エディターのサイドバーにあるブロック設定パネルを表示する(または隠す)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ解除

まとめてあったブロックを一つずつに分けたい場合、グループ解除オプションを選択します。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

ブロックの編集

グルーブブロックは、中に他の任意のブロックを追加し、好みのレイアウトを作ることができます。ブロックを追加するにはグループブロック内のブロックを追加アイコンをクリックします。

コンテンツの追加

グループブロックの中に、カラムブロック、カバーブロックなど利用可能な任意のブロックを追加して、お望みのレイアウトを作成できます。

この例のグループブロックはカラム、見出し、段落、画像およびボタンブロックが入っています。

ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開(更新)ボタンの隣にある「歯車」ボタンをクリックしてください。

グループブロックには他のブロックを埋め込む機能があるため、あるブロックをクリックすると、グループブロックへ追加したブロックに応じてサイドバーの設定が変わります。例えば、グループブロックへ画像を追加した後、その画像をクリックすると、サイドバーに画像ブロックの設定オプションが表示されます。

グループブロックの背景色の追加

グループブロック全体に背景色を追加できます。グループブロックを選択すると色の設定がサイドバーに現れます。テキスト色と背景色を選べます。

間隔

パディングオプションはブロック内の余白を変更できます。チェーンリンクアイコンをクリックすると、上下左右の余白を個別に指定できます。

高度な設定

サイドバーのブロック設定の高度な設定パネルには、HTML アンカー追加 CSS クラスのオプションがあります。

HTML アンカーは特定のグループブロックユニークな Web アドレスを作ることができます。その後、ページ内のグループブロックへ直接リンクできます。

追加 CSS クラスはブロックへ CSS クラスを追加できます。その後、カスタム CSS を書いてブロックに好みのスタイルを付けることができます。

変更履歴

  • 更新: 2020-11-27
    • WP 5.6の新しい画像
  • 新規作成: 2020-09-21

この記事は役に立ちましたか ? どうすればさらに改善できますか ?