# コレクションリストページ > **学べること** > > * コレクションリストページの設定とスタイリング方法 > * 3Dコレクションカードのカスタマイズ方法 > * コレクション、画像、視覚効果を割り当てる場所 *** ### 🧭 場所の確認方法 Shopify テーマエディター内： 1. 移動先： **オンラインストア > テーマ** 2. クリック： **テキストの** 現在有効なテーマで 3. 上部のドロップダウンを使って移動します `コレクションリスト` *** ### 🗂 セクション概要 コレクションリストページは、完全にカスタマイズ可能なスタイライズされた選択コレクションのグリッドです **3Dコレクションカード**。各カードは特定のコレクションへリンクでき、マウスオーバーで視覚効果やテキストオーバーレイに反応します。 #### 🧱 コレクションカードブロック 各カードでできること： * 特定の **コレクションへのリンク** を表示するために選択 * 割り当てる **デスクトップ** および **モバイル用のおすすめ画像** * 制御する **ホバー効果** とテキスト **配置** * 調整: **色**, **影**, **間隔**、および **ホバーアニメーション** *** 🖼️ アイキャッチ画像の設定 > ⚠️ コレクションカードのアイキャッチ画像は、Shopify 管理画面のコレクション設定から直接取得されます。 1. 移動先： **Shopify 管理画面 > 商品 > コレクション** 2. 使用したいコレクションをクリックします 3. アイキャッチ画像をアップロードします 4. カードのスタイリングを続けるためにテーマエディターに戻ります *** ### 🎛 主要設定（各コレクションカードごと） #### ✅ 表示トグル * `コレクション画像を表示` * `ヘッダーを表示` * `説明を表示` * ホバー時専用のコンテンツ（画像、ヘッダー、説明）を切り替えます #### 🌀 カード効果（デスクトップのみ） * `チルトを有効にする` * `チルトグレアを有効にする` > 💡 効果は **ライブサイトでのみ表示されます**、テーマエディターのプレビューでは表示されません。 #### 🎨 カラー * 背景色 * ホバー時の背景色 * ヘッダーと説明の色（デフォルトとホバー） #### 🎯 配置と位置 調整: **header** および **説明** 配置とピクセル単位の位置調整に使用： * `上下` および `左右` スライダー * 別々のオプション（ため） **デフォルト** および **ホバー** 状態 *** ### 📐 カードデザイン設定 * **カードの角丸**：カードの角を丸めます（例： `30px`) * **カスタムホバータイトル＆説明**：ホバー時のオプションのテキストオーバーレイ * **ホバー時のカード背景**：代替の背景画像をアップロード * **グラデーションオーバーレイ**：ホバー時に上下のグラデーションを色＋不透明度で追加 *** ### 📏 画像サイズ設定 * **デスクトップカード寸法**: `740px x 350px` * **モバイルカード寸法**: `315px x 350px` > ⚠️ きれいなレイアウトのため、すべてのコレクションカードで一貫した画像サイズを使用してください *** ### 🎵 ボーナスヒント 使用する場合は **ミュージックプレーヤー** セクションとコレクションリストを組み合わせるときは、覚えておいてください： > ⚠️ ミュージックプレーヤーは **直接の `.mp3` ファイルURLでのみ動作します。** Spotify や Apple Music などのストリーミングプラットフォームへのリンクは動作しません。 *** ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions: 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: ``` GET https://docs.openspaces.design/english-ja/readme-1/pages-and-menus/collection-list-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.