---
url: "/ja/emailify/design/fluid-buttons.md"
description: "デザイン内のButton要素をモバイルで可変幅にして、常に親のColumnの幅いっぱいに広げることができます。この設定をオフにすると、Figma（デスクトップ）のデザインと同じ幅が維持されます。"
---

# モバイルでボタンを可変幅にする

> デザイン内のButton要素をモバイルで可変幅にして、常に親のColumnの幅いっぱいに広げることができます。この設定をオフにすると、Figma（デスクトップ）のデザインと同じ幅が維持されます。

[Video](/assets/videos/emailify/design/full-width-mobile-button.mp4)

デフォルトでは、デザイン内のすべてのButtonレイヤーはモバイルで可変幅になり、（メールを表示しているモバイルデバイスの画面サイズに応じて）Columnの幅いっぱいに広がります。

モバイルでのこの挙動を変更するには、**Button**レイヤーをクリックし、プラグインのヘッダーにある**Settings**レイヤーをクリックして、**Full Width Button on Mobile**のトグルをオンまたはオフにします。

> **Note:** Figma（デスクトップ）のデザインでButtonの幅が300pxを超えている場合、ボタンは自動的に可変幅（Fluid）としてエクスポートされます。そうしないと、固定幅の長いボタンが小さな画面でレイアウトの横からはみ出してしまうためです。

> **Tip:** FigmaのデザインでButtonレイヤー自体が**Fill container**に設定されている場合、EmailifyはエクスポートしたHTMLでもボタンの水平方向のAuto Layoutの配置を維持します。つまり、FigmaでボタンのAuto Layoutの配置を変更することで、幅いっぱいのボタン内でボタンのテキストを左揃え、中央揃え、右揃えにできます。

> **Tip:** 長い変数やプレースホルダーのせいで、短いラベルに置き換わる前のボタンが広くなりすぎる場合は、**Button内のテキストレイヤー**を**Fixed width**に設定し、Figmaの**Truncate text**オプションを有効にして**Max lines**を**1**に設定します。[ボタンのプレースホルダーのサイズ調整手順](/ja/emailify/content/dynamic#keep-buttons-narrow-with-long-placeholder-text)に従ってください。

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