グループのレイアウトをカスタマイズする

グループブロック はコンテンツをコンテナ内で整理し、1つの単位としてスタイル設定や配置を行うのに役立ちます。このガイドでは、レイアウト設定を使用して、 グループブロックを用いてレスポンシブかつ適切に配置されたページセクションを作成する方法について説明します。

デフォルトでは、 グループブロック は内部のブロックを整理し、上下に重ねて表示します。グループ内のブロックの配置方法を変更すると、コンテンツを横並び (水平) で表示するか、縦積み (垂直) で表示するかを制御できるため、デザインのレイアウトの柔軟性が向上します。グループ内のコンテンツの配置をカスタマイズするには、次の手順を実行します。

1. 編集画面の上部にある 「リストビュー」 を選択します。
2. ​ 「グループブロック」を選択します。
3. 右側の ブロック設定サイドバー で、次のオプションのいずれかを選択します。
   • グループ: グループブロックのデフォルトの配置です。
   • 縦積み: ブロックを上下に配置します。手順やおすすめアイテムなど、明確な順序付けが必要なコンテンツを作成するのに最適です。
     • ​ 「配置」では上、中央、下などのオプションを使用して垂直方向の配置を変更できます。
   • 横並び: ブロックを横に並べて配置します。機能の比較や画像ギャラリーの作成に最適です。
     • ​ 「配置」では左、中央、右、間隔などのオプションを使用して水平方向の配置を調整できます。
   • グリッド: ブロックをカスタマイズ可能な グリッドレイアウトに整理します。商品の表示やチームメンバーの紹介に便利です。
4. ​ 「保存」 または 「公開」 をクリックして変更を保存します。

​ グループブロック の全体の幅をコントロールすれば、ページ上にビジュアル階層を作成し、コンテンツがさまざまな画面サイズにどのように対応するかを調整するのに役立ちます。​ グループブロック が使用するスペースの量を、コンテンツの幅、幅広、全幅まで変更するには、次の手順を実行します。

1. 編集画面の上部にある 「リストビュー」 を選択します。
2. ​ 「グループブロック」を選択します。
3. 表示されたツールバーで「配置」アイコンを選択し、以下から選択します。
   • コンテンツ (または「なし」): ブロックの幅を コンテンツエリアのデフォルトの幅に設定します。通常のコンテンツセクションに最適です。
   • 幅広: ブロックの幅をより広い幅 (ただし全幅ではない) に設定します。画面全体を占有せずに重要なコンテンツに注目を集めるのに適しています。
   • 全幅: ブロックを使用可能なエリアの全幅にわたって表示します。バナーや大きな画像ギャラリーなどの没入型コンテンツセクションの作成に最適です。
4. ​ 「保存」 または 「公開」 をクリックして変更を保存します。

詳細はこちら: コンテンツの幅の変更。

グループ内でコンテンツが占めるスペースの大きさを制御できます。これは、モバイル画面とデスクトップ画面の両方でうまく機能するレスポンシブデザインを作成する場合に役立ちます。以下の手順を実行すると、 グループブロック内のコンテンツの幅の設定を変更できます。

1. 編集画面の上部にある 「リストビュー」 を選択します。
2. ​ 「グループブロック」を選択します。
3. ​ ブロック設定サイドバーで、「インナーブロック」セクションを見つけます。​ 「コンテント幅を使用するインナーブロック」 設定を切り替えます。
   • オン: コンテンツはサイトの コンテンツ幅 の設定に従います。または、幅のコントロールを使用して特定の幅の値を調整します。
   • オフ: コンテンツはグループブロック幅全体に拡張されます。
4. ​ 「保存」 または 「公開」 をクリックして変更を保存します。

「コンテント幅を使用するインナーブロック」設定は、グループブロック内のコンテンツの幅をコントロールします。

​ オンの場合: グループブロック 内のコンテンツは、サイトのグローバルなコンテンツ幅設定 (通常は700～800px 幅程度) に従います。ここで、 グループブロック がページの全幅にまたがっている場合でも、中央揃えのコンテンツ列が作成されます。これにより、大きな画面での読みやすさが向上し、魅力的なレイアウトも維持できます。

​ オフの場合: グループブロック 内のコンテンツは、 グループブロック 自体の全幅に拡張されます。​ グループブロック が全幅の場合、コンテンツも全幅に拡張されます。これは、全幅の画像ギャラリーなどの端から端まで広がるデザインを作成する場合や、コンテンツを グループブロック の背景の幅に合わせる場合に便利です。

実用的な例: ページの全幅にわたって色付き背景がある グループブロック がある場合、「コンテント幅を使用するインナーブロック」をオンにすると、色付き背景が端から端まで広がる中央揃えのコンテンツ列が作成されます。重要な情報を強調しながら視覚的な魅力を維持するのに最適です。

サイズを調整すると、 グループブロック の高さ、幅、間隔をコントロールして、コンテンツやレイアウトのニーズに合わせることができます。これにより、視覚的にバランスの取れたセクションを作成し、コンテンツに余裕を持たせることができます。正確に グループブロック のコンテンツ周囲の間隔を設定するには、次の手順を実行します。

1. 編集画面の上部にある 「リストビュー」 を選択します。
2. ​ 「グループブロック」を選択します。
3. ​ ブロック設定サイドバーで、 「サイズ」 セクションを見つけます。
4. 次の値を設定します。
   • パディング: コンテンツとグループブロックの枠線の間のスペース。パディングを増やすと、コンテンツの周囲に余裕が生まれます。
   • マージン: グループブロックの外側のスペース。このセクションを他のコンテンツから分離するのに役立ちます。
5. 鎖アイコンを使用すると、サイドの調整を均一または個別に切り替えることができます。

詳細はこちら: ブロックのサイズのカスタマイズ。

この間隔を調整することで、 グループブロック内のコンテンツの配置間隔をコントロールし、要素間に適切な視覚関係をもたらします。これにより、訪問者が関連性のあるコンテンツを区別できるようにしながら、セクション全体の統一感を保つことができます。グループ内のブロック間隔を管理するには、次の手順を実行します。

1. 編集画面の上部にある 「リストビュー」 を選択します。
2. ​ 「グループブロック」を選択します。
3. ​ ブロック設定サイドバーで、 「ブロックの間隔」 セクションを見つけます。
4. コントロールを使用して以下を設定します。
   • ブロックの間隔: 個々のブロックの間隔。間隔を広くすると明確な区切りが生まれ、狭くするとコンテンツのつながりが強くなります。
   • 最小高さ: グループブロックの最小の高さ。統一感のあるセクションを作成したり、視覚的なバランスを保つための空白を追加したりするのに役立ちます。

詳細はこちら: ブロックの間隔の調整。