カスタムセクションとコンテンツコンテナを使ったページレイアウトのカスタマイズ（OS 3.0 テーマ限定）

テーマの既成パーツがデザインのイメージに完全に合わない場合、カスタムセクションとコンテナを使うことで、必要なものを正確に作り上げる柔軟性が得られます。テキスト、画像、ボタンなどの基本的なビルディングブロックを柔軟なレイアウトコンテナ内で組み合わせることで、コードを書かずにユニークなページレイアウトと独自のブランド体験を作成できます。

このガイドでは、既存のパーツを微調整する方法、カスタムパーツを一から作成する方法、そしてストアのページデザインを最適化するための重要なレイアウトルールの適用方法について説明します。

基本概念：セクション、ブロック、コンテナ

デザインを始める前に、ウェブページの構造的な階層を理解することが重要です。これは視覚的なレイアウトの論理に直接影響します。

セクションとブロックの階層

• セクション：ページの全体構造と機能を定義するコアモジュール。
  
• ブロック：セクション内の再利用可能な単位で、ボタンや画像など。
  
• 階層論理：親コンテナに適用された設定は、その「第一レベル」の子要素のレイアウトに直接影響します。この関係を理解することで、配置や方向（例：左右か縦か）を変更する際にどの層を調整すべきかが分かります。
  

「コンテナ」とは何ですか？

コンテナは特定のコンテンツを直接保持するものではなく、高度に柔軟な「レイアウトフレームワーク」として機能します：

• コンテンツホスティング（再利用可能なブロックの使用）：コンテナは基本的なビルディングブロックの集約ポイントとして機能します。さまざまな再利用可能なブロック（テキスト、画像、ボタンなど）を「コンテンツ」としてコンテナに配置できます。
  

• 柔軟なレイアウト論理（フレックスレイアウト）：コンテナは柔軟なレイアウト論理を使用します。これは、コンテンツの方向（左右／縦）、配置、折り返しルールを自由に調整できる見えない枠組みのようなものです。
  

  注： 商品ページモジュールなどのページ固有のパーツは、コンテナに追加できません。詳細は以下の「コンテナの制限事項と重要な考慮点」を参照してください。

初心者向けケース：既存パーツの微調整

必ずしも最初から作成する必要はありません。コンテンツコンテナのレイアウト機能を使って、既存の公式パーツ（例：画像付きテキストリスト、画像比較など）を微調整できます。

レイアウト適用のロジック：設定の場所

パーツのレイアウトを調整する際は、以下のロジックに従って正しい設定を素早く見つけてください：

• 下方向への適用（親レベルが子レベルを制御）：ほとんどのレイアウト設定（配置、間隔、方向など）は、コンテナ内の「次のレベル」の要素に適用されます。
  

• 自己適用のロジック（末端ノードが自身を制御）：ブロックが階層の最終レベル（例えば単一のボタンやテキスト）で、独自のレイアウトオプションを持つ場合、その設定は直接そのブロックに適用されます。

  ヒント：特定のブロックのレイアウトを素早く最適化したい場合は、そのブロックの親コンテナ内、またはブロック自身の設定内にあるレイアウト設定を探してください。例えば、カードのグループの配置を変更したい場合は、カードグループの親コンテナをクリックし、そのパネル内の設定を調整します。

コンテンツコンテナの一般的なレイアウト調整

コンテンツコンテナは以下の一般的なレイアウト調整をサポートしています：

• レイアウト方向の変更：コンテナの柔軟なレイアウトロジックを使って、再利用可能なブロックを左右のrowから上下のcolumnに切り替えます。
• 配置と折り返しの最適化：要素がスペース内でどのように配置されるかを微調整したり、画面スペースが限られている場合の自動折り返しのルールを設定します。
• 間隔の調整：要素間の利益率とパディングを変更して、より詰まった見た目や広々とした見た目を作り出します。

応用例：ユニークなパーツの作成（ステップバイステップ）

テーマに必要な特定のパーツがない場合は、カスタムセクションを使って一から作成できます。以下の手順では、「機能グリッド」—上部にタイトル、横並びの3つの機能カード、下部にボタンがあるパーツの作成方法を説明します。

このパーツを作成するには、以下の手順に従ってください：

1. レイアウト構造を分析します。全体のレイアウトは垂直の列ですが、3つのカードを含む中央部分は左右の行であり、各カードの内部パーツは垂直の列に配置されています。
   
2. テーマエディターで、テンプレートの下にある＋パーツを追加をクリックし、カスタムセクションを追加します。
   
   • このセクション内に、3つのコンテンツコンテナ（タイトル、カードグループ、およびボタン用）を追加します。
     
   • 次に、セクションのレイアウト方向を垂直に設定します。
     
3. 1番目のコンテンツコンテナにタイトルパーツを追加します。
   
   • 次に、3番目のコンテンツコンテナにボタンパーツを追加します。
     
4. 2番目のコンテンツコンテナに入り、3つのサブレベルコンテンツコンテナ（カードごとに1つ）を追加します。
   
   • このコンテナのレイアウト方向を左右に切り替え、カードを横並びにします。
     
   • 3つのサブコンテナそれぞれを選択し、幅を自動から33%に変更してスペースを均等に分割します。
     
5. 1番目のカードコンテナ内に、順番に画像、タイトル、テキスト、およびボタンを追加します。
   
   • コンテナの配置を左に設定します。
     
   • 次に、親コンテナの行間を調整して、パーツ間のバランスの取れた間隔を作ります。
     
6. 最初のカードが希望通りの見た目になったら、そのコンテナを2回コピーし、他の2つのカードの画像とテキストを置き換えてパーツを完成させます。
   

コンテンツコンテナの制限と重要な考慮事項

コンテンツコンテナとパーツの互換性

コンテンツコンテナには再利用可能なブロックのみを追加できます。利用可能かどうかは、モジュールが汎用かページ固有かによります：

• 汎用パーツ（複数ページで使用可能）：テキスト、タイトル、ボタン、画像、商品カード、ブログなど、サイトのほとんどのエリアで使用できる基本モジュール（30種類以上利用可能）です。
• 特定ページ用パーツ（使用制限あり）：特定のページタイプ専用に設計された機能です。例えば、商品ページモジュールは商品ページ専用であり、コンテンツコンテナには追加できません。

コンテンツコンテナは静的コンテンツ向け

コンテンツコンテナは静的レイアウトに最適です。バナー画像パーツで作成した自動再生バナーのような複雑なアニメーションやロジックはネイティブにはサポートしていません。

カスタムセクションのページブロック制限

各ページには50ブロックの制限があります。