---
url: "/ja/emailify/design/stack-mobile-columns.md"
description: "初期設定では、メールデザインのRowレイヤー内にある**Column**レイヤーはモバイルで縦に積み重なりますが、Rowごとに好みの動作を設定できます。"
---

# モバイルで行内のカラムレイヤーを積み重ねる（または積み重ねない）

> 初期設定では、メールデザインのRowレイヤー内にある**Column**レイヤーはモバイルで縦に積み重なりますが、Rowごとに好みの動作を設定できます。

[Video](/assets/videos/emailify/design/stack-mobile-columns.mp4)

## モバイルでカラムを積み重ねるには？ {#how-do-i-stack-columns-on-mobile}

Columnレイヤーを含む**Row**レイヤーを選択し、プラグインのヘッダーにある**Settings**ボタンをクリックして、**Stack Columns in this Row**をオンにします。初期設定では、これによりモバイルでRowのカラムが1列に積み重なります。

## モバイルでカラムが積み重ならないのはなぜですか？ {#why-are-columns-not-stacking-on-mobile}

そのRowで**Stack Columns in this Row**がオフになっている場合や、モバイルで1行に複数のカラムを並べるようRowが設定されている場合は、カラムは積み重なりません。また、一部のプリセットコンポーネントでは、プリセットのデザインに合わせて、モバイルでの積み重ねが初期設定でオフになっていることがあります。

解決するには、Rowを選択して**Settings**を開き、**Stack Columns in this Row**を有効にします。各カラムを上下に並べて表示したい場合は、**1 Column Per Row on Mobile**を選択します。

初期設定では、デザイン内のColumnレイヤーはモバイルで積み重なるように設定されています（ただし、意図したデザインに合わせて、あらかじめこの設定がオフになっているプリセットコンポーネントを使っている場合は除きます）。

モバイルでのこの動作を変更するには、任意の**Row**レイヤーをクリックし、プラグインのヘッダーにある**Settings**レイヤーをクリックして、**Stack Columns in this Row**トグルをオンまたはオフにします。

> **Note:** **Row**内で3つ以上の**Column**レイヤーを使っている場合は、積み重ねる設定のままにしておくことを検討してください。そうしないと、画面の小さいモバイルデバイスでは、中のコンテンツが非常に細く小さくなってしまう可能性があります。

## モバイルで積み重ねるカラム数を上書きする {#overriding-the-number-of-stacked-columns-on-mobile}

初期設定では、**Stack Columns in this Row**トグルを有効にすると、Row内のすべてのColumnレイヤーが1列に積み重なります。必要に応じて、プラグインでトグルの隣にあるドロップダウンから次のいずれかのオプションを選択すると、この設定を上書きできます。

- 1 Column Per Row on Mobile
- 2 Columns Per Row on Mobile
- 3 Columns Per Row on Mobile
- 4 Columns Per Row on Mobile

たとえば、メール内に4つのColumnを持つRowがある場合、*2 Columns Per Row on Mobile*オプションを選択すると、モバイルでその行を表示したときに、カラムが2列×2行に積み重なります（4つの「グリッド」として表示されます）。

> **Note:** ドロップダウンでは、カラムの数に合った値だけを選択するようにしてください。たとえば、デザイン上のRowにカラムが2つしかないのに、ドロップダウンのオプションを*3 Columns Per Row on Mobile*に設定すると、2つのカラムの幅がそれぞれ`33%`になります。モバイルで画面の幅いっぱいに表示されず、崩れたり不自然に見えたりする可能性があります。

## モバイルのカラム行の縦方向の配置を上書きする {#overriding-vertical-alignment-for-mobile-column-rows}

モバイルでもRowが複数のColumnレイヤーを横に並べたままにしている場合は、そのモバイル行でカラム同士を縦方向にどう揃えるかも上書きできます。それには、**Row**レイヤーをクリックし、**Mobile Column Vertical Alignment**トグルを有効にして、隣のドロップダウンから**Top**、**Middle**、**Bottom**のいずれかを選択します。

このモバイルでの縦方向の配置の上書きは、モバイルでもRowに複数のカラムがある場合にのみ有効になります。つまり、次のいずれかの場合です。

- **Stack Columns In This Row**トグルがオフになっている
- トグルがオンで、ドロップダウンが**1 Column Per Row on Mobile**より多い値に設定されている

> **Tip:** **Settings**を開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、[設定を一括で適用](/ja/emailify/design/settings#apply-settings-in-bulk)できます。変更した設定は、選択したすべてのレイヤーに適用されます。