> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/english-ja/readme-1/theme-settings/collection-layout-settings.md). # コレクションレイアウトの設定 > **学べること** > > * コレクションページのレイアウトをカスタマイズする方法 > * 列数、間隔、画像サイズ、ホバー効果の調整方法 *** ### 🧭 概要 この **コレクションレイアウト** 設定により、デスクトップとモバイルのコレクションページで商品の表示方法を制御できます。これらのオプションは、ブランドの見た目や取り扱い商品に合った理想的なショッピング体験を作成するのに役立ちます。 *** ### 🖥️ レイアウトオプション #### デスクトップの列数 * デスクトップで1行に表示する商品の数を選択してください： * オプション： **2**, **3**, **4**, **5**、または **6** 列 #### モバイルの列数 * モバイルで1行に表示する商品の数を選択してください： * オプション： **1列** または **2列** 列 > 💡 大きな商品画像や高級商品の場合は列数を少なくしてください #### 列間＆行間の間隔 商品の間隔を調整して視覚的な密度をコントロールします： * **列間（デスクトップ）** * **行間（デスクトップ）** * **列間（モバイル）** * **行間（モバイル）** すべての値はピクセル（`px`）で測定され、スライダーで調整できます。 *** ### 🖼️ 画像設定 #### 商品画像のサイズ * コンテナに対する商品画像の割合サイズを調整します（例：100%） #### 商品画像のアスペクト比 グリッド内で商品画像の形状を選択してください： * **自然（元の画像サイズ）** * **正方形** * **縦長** * **横長** > 💡 を選択して **正方形** より均一なレイアウトにする #### ホバー時に2枚目の画像を表示 * デスクトップでホバーしたときに商品リストの2枚目の画像を表示するにはこれをオンにします * 別アングルや別ビューを見せるためによく使われます *** ### 🧪 よくあるユースケース * **ミニマルなストア** — 2〜3列と大きめの間隔を使用 * **大量出品のストア** — より多くの商品を表示するために4〜6列を使用 * **インタラクティブな表示** — 商品のエンゲージメント向上のためにホバーで2枚目の画像を有効にする *** ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/english-ja/readme-1/theme-settings/collection-layout-settings.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.