サポートに戻る コンテンツとメディア ブロック デザインブロック グリッドブロック

グリッドブロック

グリッドブロックは、他のブロックのコンテナの役割を果たします。複数のブロックを整理し、コンテナ内のすべてのブロックの色、テキストスタイル、高さ、幅、位置を調整するために使用します。このブロックはグループブロックのバリエーションです。

グリッドブロックを追加する

新しい空のグリッドブロックから始めるか、既存のブロックをグリッドにグループ化することができます。

新しいグリッドブロックを追加する

新しいグリッドブロックを追加するには、ブロック挿入の「+」ボタンをクリックして「グリッド」を検索します。クリックしてそのブロックを投稿またはページに追加します。キーボードを使用して新しい行に「/grid」と入力して Enter キーを押し、新しいグリッドブロックをすばやく追加することもできます。

「ブロック挿入」をクリックして「行」を検索し、「行ブロック」をクリックして行ブロックをエディターに挿入します。

ブロックを追加する手順についてはこちらを参照してください。

グリッドブロックを追加したら、「+」のブロック挿入アイコンをクリックしてグリッド内にブロックを追加します。

既存のブロックをグリッドに配置する

すでにページにあるブロックは、以下の手順でグリッドブロックに組み込めます。

  1. グループ化するブロックを選択します。次の方法で複数のブロックを選択できます。
    • ブロックをマウスでクリックしてハイライト表示します。
    • 最初のブロックをクリックし、キーボードの Shift キーを押しながら最後のブロックをクリックすると、最初のブロックと最後のブロックの間にあるすべてのブロックを選択できます。
    • 「リスト表示」を使用して、最初のブロックをクリックし、キーボードの Shift キーを押しながら最後のブロックをクリックすると、最初のブロックと最後のブロックの間にあるすべてのブロックを選択できます。
  2. ブロックの上または下に表示されるブロックツールバーで、「グループ」アイコン (2つの正方形が重なったアイコン) をクリックして、これらのブロックをグループブロックに追加します。
ブロックツールバーのグループアイコンを指す矢印。
ブロックツールバーの「グループ」アイコンをクリックして既存のブロックをグループ化する
  1. 右サイドバーにあるグループブロックの「設定」で 「グリッド」アイコン (2×2グリッドの表示) をクリックします。
グループ、行、縦積み、グリッドのブロックのアイコンと、オレンジ色の矢印と枠線で示されたグリッドブロックアイコンが表示された、右サイドバーのグループブロック設定
グループブロック設定サイドバーの「グリッド」アイコンをクリックする

グリッドブロックツールバー

ブロックをクリックすると次のオプションのツールバーが表示されます。

グリッドブロックツールバー。

グリッドブロックのツールバーには次のオプションがあります。

グリッドブロック設定

ブロックを選択すると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の 「設定」アイコンをクリックして設定を表示させます。このアイコンは、幅の異なる2つの列から成る正方形のアイコンです。

下に「設定」というツールチップが表示されたエディターの設定アイコン。
「設定」アイコンをクリックするとブロック設定が開く

グリッドブロックには、次のブロック設定があります。

別のグループバリエーションに変換する

グリッドブロックは、グループブロック行ブロックまたは縦積みブロックに変換できます。

グループブロック、行ブロック、縦積みブロックに切り替えるオプションとともにグリッドブロックが強調表示されているブロック設定サイドバー。

レイアウト

「レイアウト」設定では、カラム幅が自動サイズ指定か手動サイズ指定かに基づいて、グリッドブロックのカラム数を選択できます。

  • 「自動」を選択すると、指定した最小幅のカラムがブロックに合わせて自動的に追加されます。
  • 「 手動」を選択すると、ブロックが指定したカラム数に自動的に分割されます。

グリッドのカラム数は、最小カラム幅を設定するか、カラムブロックと同様に手動でカラム数を設定して定義できます。

段落ブロックなどの要素をグリッドブロック内に配置する場合、この要素をスパンするカラムと行の数を定義できます。各要素に対してこれらのサイズを調整することで、カスタマイズされたグリッド構造を作成できます。

グリッドブロック内の要素のサイズを編集するには:

  1. サイズを編集する要素を選択します。
  2. ブロック設定サイドバーの「サイズ」で、ブロックをスパンするカラムまたは行の数を変更します。
グリッドブロック内の段落ブロックの「サイズ」設定。
グリッドブロックの段落ブロックのカラムと行のスパン設定
「自動」に設定されたブロック設定サイドバーの「レイアウト」セクション。グリッドブロックのカラムの最小幅が「12 rem」であることを示している。
「自動」を選択したレイアウト設定
「手動」に設定されたブロック設定サイドバーの「レイアウト」セクション。グリッドブロックのカラムの数が「3」に設定されていることを示している。
「手動」を選択したレイアウト設定

以下は、複数の段落ブロックをさまざまなカラムと行のスパンに設定したグリッドブロックの例です。

位置

「位置」設定を使用すると、「デフォルト」「先頭固定表示」を選択できます。

  • デフォルト: スクロールしてブロックを通り過ぎると、ページの他のセクションに移動するに従ってそのブロックは見えなくなります。
  • 先頭固定表示: スクロールしてブロックが元々あった位置を通り過ぎても、ブロックはページ上部に固定表示されたままになります。ピンのアイコンが「リスト表示」のブロックの横に表示されます。

高度な設定

詳細については、「高度なブロック設定」の説明を参照してください。

グリッドブロックスタイル

ブロック設定サイドバーでスタイルアイコンをクリックし、ブロックのデザイン設定にアクセスします。スタイルアイコンは、半分が塗りつぶされた円の形をしています。

矢印がスタイルアイコンを指している。これをクリックするとブロックスタイルセクションが開く。
色、タイポグラフィ、サイズ、枠線

ここでは、テキストの色、背景色、テキストのサイズとフォント、パディング、余白、ブロックの間隔を設定できます。これらの設定を使用する方法の詳細については以下のガイドを参照してください。

背景画像

グリッドブロックのスタイルでは、すべてのグループブロックのバリエーションと同様にブロックのコンテンツの背後に表示する画像を設定できます。背景画像を追加する手順については、グループブロックに関するガイドを参照してください。

グリッドからブロックを削除する

内部ブロックを消去せずにグリッドブロックを削除する場合は、代わりにブロックのグループ化を解除できます。次の手順を実行します。

  1. 編集画面の上部にあるリスト表示を選択します。
  2. 「グリッド」ブロックを選択します。
  3. 「グリッド」ブロックの横にある3つのドットをクリックします 。
  4. 「グループ解除」オプションを選択します。
ブロックツールバーの「グループ解除」を選択する操作を示す GIF 。
Copied to clipboard!