マルチカラム

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. スライドショーコントロール設定に関するCompany XYZドキュメント
3. バナーブロックに関するCompany XYZドキュメント
4. ブログ記事ブロックに関するCompany XYZドキュメント
5. 商品ブロックに関するCompany XYZドキュメント
6. 画像ブロックに関するCompany XYZドキュメント
7. 動画ブロックに関するCompany XYZドキュメント
8. Rich textブロックに関するCompany XYZドキュメント
9. お客様の声ブロックに関するCompany XYZドキュメント
10. お問い合わせフォームブロックに関するCompany XYZドキュメント
11. パンくずリストブロックに関するCompany XYZドキュメント
12. ヘッダー設定に関するCompany XYZドキュメント
13. セクション余白設定に関するCompany XYZドキュメント
14. セクション背景設定に関するCompany XYZドキュメント
15. セクションのカスタマイズに関するShopifyドキュメント
16. 区切り線設定に関するCompany XYZドキュメント
17. 表示設定に関するCompany XYZドキュメント
18. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

Multicolumn を使用して、1 つのセクション内に柔軟な混在コンテンツレイアウトを作成します。テキスト、メディア、販促コンテンツ、カード、ユーティリティブロックを組み合わせたうえで、デバイスごとに表示するカラム数や、モバイルの訪問者に標準グリッドではなくスワイプ可能なスライドショーを表示するかどうかを制御できます。テーマエディターでセクションとブロックがどのように機能するかの全体像については、セクションとブロックに関するShopifyドキュメント を参照してください。

基本設定

これらの設定は、個々のブロックを微調整する前に、全体のレイアウトを形作ります。ここから始めて、セクションをどれだけ密にするか、ゆったりさせるか、あるいはインタラクティブにするかを決めてください。

レイアウトと配置

コンテンツの配置を使って、同じ行内で高さの異なるブロックをどのように並べるかを制御します。これは、短いテキストブロックと、背の高いバナー、画像、動画を組み合わせる場合に特に重要です。

デスクトップ、タブレット、モバイルのカラム数は、画面サイズごとのグリッドを定義します。タブレットは 0 のままにするとデスクトップの値を継承でき、デバイスごとの調整を少なくしたい場合に便利です。

モバイルのスライドショー動作

セクションが小さい画面では高すぎる、または詰まりすぎて見える場合は、モバイルでスライドショーとして表示 を有効にします。これにより、モバイル体験が一度に全体を見るグリッドから、スワイプ可能な連続表示に変わります。

モバイルのスライドショーを有効にした場合は、ブロックの順序を慎重に確認してください。訪問者は、全体のレイアウトを一度に見るのではなく、1 枚ずつセクションを体験します。

同じ高さの行

よりすっきりして均一なグリッドにしたい場合は、コンテンツを縦方向に伸ばす を使用します。ブロックは同じ行の最も高いブロックに合わせて伸縮し、カード、お客様の声、バナーに特に適しています。

各ブロックの自然な高さを保ちたい場合は、オフにしてください。

スライドショー設定

スライドショー動作が有効な場合、これらの設定で訪問者がコンテンツをどのように移動するかを制御します。詳細については、スライドショーのコントロール設定 を参照してください。

アニメーションスタイルは、見た目に最も大きな影響を与えます。デフォルトスタイルはよりカルーセルのようなレイアウトを保ちますが、Fade は 1 つずつ表示する形式を作成します。

ノート

Fade アニメーションは 1 枚のスライドだけのレイアウトを強制します。また、次のスライドのプレビューや、複数の表示中スライドに依存するページネーションスタイルも無効になります。

自動再生、遅延、ループ、ホバー時の一時停止は、セクションを受動的なプロモーションスライダーのようにするか、手動のコンテンツギャラリーのようにするかを判断するのに役立ちます。ホバー時の一時停止はデスクトップでのみ適用されるため、自動再生はタッチデバイスでも快適に感じられる必要があります。

ナビゲーション位置、ナビゲーションコントロール、ページネーション設定は、より多くのコンテンツがあることを訪問者に伝えるのに役立ちます。次のスライドのプレビューは、追加コンテンツを示したい場合に便利ですが、よりタイトなレイアウトや中央寄せのレイアウトにはあまり適していません。

カラー設定

このグループでは、テーマ全体のスタイルを変更せずに、セクションのテキスト色とアイコン色を上書きできます。セクション背景やブロックの組み合わせに、読みやすさを保つための別のコントラストが必要な場合に特に便利です。

個々のブロックでも独自のカラー設定を使う場合は、明確な階層を意識してください。セクションレベルのカラーは、セクション全体で一貫したトーンを共有したい場合に最適です。

対応ブロックタイプ

1. バナー
2. ブログ記事
3. パンくず
4. お問い合わせフォーム
5. 見出し
6. 画像
7. 商品
8. リッチテキスト
9. お客様の声
10. 動画

バナー

バナーブロックは、プロモーション、注目メッセージ、またはビジュアルな行動喚起に使用します。独自の背景メディア、前景コンテンツ、任意の前景画像、カスタムのカラム幅に対応しています。

詳細については、バナー を参照してください。

1. バナーにメディアとテキストの両方が含まれる場合は、広めの幅を使います。
2. アスペクト比を固定すると、より整ったグリッドを作れます。
3. バナー全体を 1 つのクリック対象にしたい場合は、バナー全体リンクのスタイルが最適です。

ブログ記事と商品

これらのブロックは、厳選した記事カードと商品カードをレイアウトに追加します。どちらもカスタムの幅とブロックレベルのカードスタイルに対応しているため、編集要素と販売要素を組み合わせたセクションに適しています。

設定の詳細については、ブログ投稿 と 商品 を参照してください。

1. セクションを 1 つのコレクションとして見せたい場合は、カードスタイルを統一します。
2. 1 つのアイテムを目立たせたい場合は、より大きい幅を選択的に使います。
3. モバイルのスライドショーモードでは、ブロックの幅よりもブロックの順序のほうが重要です。

画像と動画

メディアブロックを使って、テキスト中心またはカード中心のコンテンツの間に視覚的な区切りを加えます。どちらもアスペクト比、キャプション、オーバーレイ、配置コントロール、カスタムの幅に対応しています。

メディア固有のオプションについては、画像 と 動画 を参照してください。

1. よりすっきりしたレイアウトにするには、近接するメディアブロックのアスペクト比を揃えます。
2. オーバーレイは、読みやすさや一貫性が向上する場合にのみ使用します。
3. ホストされた動画により強い最初のフレームが必要な場合は、ポスター画像を追加します。

リッチテキストと見出し

これらのブロックは、長めのレイアウトを構成し、コンテンツのグループを導入するのに役立ちます。密なグリッドを分割したり、短い編集コンテンツを追加したり、セクション内に焦点を絞った行動喚起を配置したりするのに使います。

コンテンツの書式設定オプションについては、リッチテキスト を参照してください。

1. 長いセクション内に内部構造を作るには、見出しブロックを使います。
2. 操作が競合しないように、ボタンの使用は限定的にします。
3. 同じページに複数の H1 見出しを使わないでください。

お客様の声

お客様の声ブロックは、引用コンテンツと、任意の商品コンテキストおよび任意の補助メディアを組み合わせます。混在したプロモーションレイアウトの中にソーシャルプルーフを入れたい場合に適しています。

引用とメディアの設定については、テスティモニアル を参照してください。

1. バランスを保つため、引用は短くします。
2. お客様の声が特定の商品を支える場合は、関連商品をリンクします。
3. 動画を追加する場合は、近くのブロックをよりシンプルに保ちます。

お問い合わせフォームとパンくず

これらのユーティリティブロックを使うと、Multicolumn で販促コンテンツ以外も扱えます。柔軟なランディングページレイアウトにはお問い合わせフォームを使い、カスタム構成の中でナビゲーションの文脈が必要な場合はパンくずを使います。

ユーティリティブロックのオプションについては、お問い合わせフォーム と パンくずリスト を参照してください。

1. 機能ブロックには、使いやすさを保つための十分な幅を確保します。
2. パンくずはコンテンツフローの先頭付近に配置します。
3. 小さなセクションにユーティリティブロックを入れすぎないでください。

標準セクション設定

ヘッダー設定

共通の ヘッダー設定 を使用して、見出し、キャプション、補助テキスト、アイコン、任意のボタンでセクションを導入します。Multicolumn では、レイアウトが複数のコンテンツタイプを組み合わせていて、明確な導入部やアクションが必要なときに特に役立ちます。

余白設定

共通の 余白設定 を使用して、セクションの上下の間隔を制御します。レイアウトに余裕が必要な場合は余白を増やし、ページをより密に見せたい場合は減らします。

セクション背景設定

共通の セクション背景設定 を使用して、セクション全体の背後に色、グラデーション、画像、または動画を追加します。強い背景はコントラストや見た目の余白感を変えるため、テキスト色やブロック色と合わせて確認してください。テーマエディターでの設定手順が必要な場合は、セクションのカスタマイズに関するShopifyドキュメント を参照してください。

区切り線設定

共通の 区切り線設定 を使用して、セクションの上下に線を追加します。これは、Multicolumn が視覚的によく似たセクションの間に配置され、より明確な境界が必要な場合に役立ちます。

表示設定

共通の 表示設定 を使用して、デバイスごとにセクションの表示・非表示を切り替えます。大きい画面には 1 つのレイアウトを使い、モバイルには別のセクション構成を使いたい場合に便利です。

幅設定

共通の 幅設定 を使用して、コンテンツ幅とセクション外側の幅の両方を制御します。Multicolumn では、特に多くのカラムを使う場合やセクション背景を追加する場合に、幅設定がグリッドの密度に大きく影響します。

使用上の注意

1. ブロックを追加した後はセクションを確認してください。 新しいブロックはレイアウト全体のバランスや見た目を変えるため、大きなコンテンツ変更のたびに構成を再確認してください。
2. 両方のデバイス体験をテストしてください。 デスクトップとモバイルのコントロールでレイアウト、配置、ナビゲーションが変わる場合があるため、公開前に両方のサイズでセクションを確認してください。
3. 上書きは意図して使ってください。 空またはデフォルトのような値は通常テーマのフォールバックスタイルを維持し、明示的な色、グラデーション、別メディアはセクションをより独立させます。
4. 各デバイスでメディアの読みやすさを確認してください。 デスクトップとモバイルでメディアを個別に設定する場合、トリミングやオーバーレイが変わることがあるため、キャプション、焦点、テキストが明瞭か確認してください。
5. フォームは見やすく保ってください。 お問い合わせフォームブロックを使う場合は、成功メッセージとエラーメッセージが周囲のコンテンツに対して読みやすいことを確認してください。
6. モバイルのスライドショーモードは連続表示として扱ってください。 訪問者がスワイプしていく順序でブロックを配置してください。レイアウトはもはやグリッド全体として体験されません。