レイアウトグリッドブロック

レイアウトグリッドブロックを使用してサイトのコンテンツを配置します。このブロックを使用すると、レスポンシブブレークポイントを定義できます。つまり、デスクトップビューとモバイルビューの両方に対し、投稿またはページで横並びに表示するカラム数を選択できます。

レイアウトグリッドでは、Web ページのコンテンツに構造と配置を適用できます。これには表示端末によって決まるいくつかの縦線が含まれます (レスポンシブブレークポイント)。

• デスクトップ端末のグリッド線は12本。
• タブレット端末のグリッド線は8本。
• モバイル端末のグリッド線は4本。

レイアウトグリッドブロックでは、グリッド線がグループ化されてカラム (1～4個) が形成され、これらの各カラム内にコンテンツを配置できます。

一般的に小型端末では、デスクトップレイアウトのカラムが複数の行にまたがって表示されます。この設定はタブレット表示またはモバイル表示に切り替えると自動的に有効化されますが、直接グリッド値を変更してオーバーライドできます。

レスポンシブブレークポイントは上級者向けのトピックです。これについて考慮しなくてもレイアウトグリッドブロックを使用できます。グリッドではデフォルトのブレークポイントが使用されます。

レイアウトグリッドブロックを追加するには、「+」ブロック挿入アイコンをクリックして「レイアウトグリッド」を検索します。これをクリックしてブロックを投稿または固定ページに追加します。

プラグイン対応サイトの場合は、「プラグイン」→「インストールされているプラグイン」でレイアウトグリッドのプラグインを有効にしてください。

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

初めてレイアウトグリッドブロックを追加するときは、カラム数を選択するよう求められます。

これはブロック設定で後から変更できます。

グリッドの各コラムに他のブロックを含めることができます。各カラムの「+」ブロック挿入アイコンをクリックして、追加するブロックを検索します。

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

レイアウトグリッドブロックのツールバーには以下のオプションがあります。

• ブロックタイプまたはスタイルを変更する。
• ブロックをドラッグする。
• ブロックを上下に移動する。
• ブロックの横配置または幅を変更する。
• デスクトップ、タブレット、モバイルのレスポンシブブレークポイント。
• ブロックの縦向きの配置を変更する。
• 追加オプション。

ブロックをクリックすると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の ⚙️ (ギア / 歯車) アイコンをクリックして設定を表示させます。

高度な設定

高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。

レイアウトグリッドブロック内の各カラムには独自の設定があり、背景色とパディングを変更できます。これは選択した個別のカラムにのみ反映されます。

原則として、レイアウトグリッド内のカラムサイズを変更できます。ただし、1行内のカラムあたりのオフセット値とスパン値すべての合計が、表示端末で利用できるグリッド線の合計本数を超えることはできません。

たとえば、デスクトップ端末 (12本のグリッド線) の場合、3カラムレイアウト内の個別のカラムをそれぞれ4本のグリッド線にオフセットなしでスパンしたり、3本のグリッド線に1オフセットずつスパンしたり、1カラムを10本のグリッド線にスパンして他の2カラムをそれぞれ1本ずつスパンしたりできます。

これにより、カラムが重ならないようになり、先に別の場所でサイズを減らさないと、1か所でオフセット値またはスパン値を増やせない場合があります。

グリッドの各カラムには両側に色の付いたオプションがあります。これらのドラッグハンドルをクリックして左右にドラッグすると、ブロックのサイズを変更できます。

サイドバーのブロック設定内でオフセット値とスパン値を直接変更して、レイアウトグリッドのカラムサイズを変更することもできます。

ドラッグハンドルを使用する場合、これらは自動的に調整されます。

グリッドのサイズを変更し、モバイル端末とタブレット端末でカラムを表示する方法を調整する場合は、個別のカラムに対するすべてのオフセット値とスパン値すべての合計が、タブレット端末の場合はグリッド線が8本、モバイル端末の場合はグリッド線が4本を超えないようにしてください。

以下の例では、列のスパンを2、オフセットを0に設定して、モバイルで2カラム、タブレットで4カラムをそれぞれ表示します。