カードの高さをすべて揃えるにはどうすればよいですか？

注目のリンク

1. Company XYZのCustom CSSに関するドキュメント
2. テーマにカスタムCSSを追加する方法に関するShopifyドキュメント
3. テーマエディターに関するShopifyドキュメント

同じ行のカードをそれぞれ行の全体の高さまで引き伸ばして、カードの高さを揃えます。専用の設定が利用できるようになるまでは、セクションの Custom CSS 設定に短いCSSスニペットを追加してください。設定方法の詳細については、テーマにカスタムCSSを追加する方法に関するShopifyドキュメントを参照してください。

カードの高さを揃える

1. テーマエディターで、更新するセクションを選択します。概要については、テーマエディターに関するShopifyドキュメントを参照してください。

2. セクション設定の一番下までスクロールし、Custom CSSを開きます。

3. 次のCSSを貼り付けます：

   .card {
     height: 100%;
   }

4. 変更を保存します。

カードのテキストを画像の下に配置する

デフォルトでは、高さを揃えたカードのテキストが下部に固定される場合があります。テキストを画像の直下に配置するには、次のCSSも追加してください：

.card__content {
  justify-content: flex-start;
}

使用上の注意

1. セクションごとにCSSを適用します。 カードの高さを揃えたい各セクションにコードを追加してください。
2. テキストの配置を意図的に選択します。 テキストを画像の直下から開始したい場合にのみ、2つ目のスニペットを追加してください。
3. プレビューする前に保存します。 変更を保存してからセクションを確認し、カードレイアウトが適切に表示されることを確認してください。