---
url: "/ja/emailify/content/link-icon-buttons.md"
description: "カスタマイズ可能なアイコン付きのクリック可能なリッチテキストボタンをメールデザインに追加し、任意のURLにリンクできます。"
---

# メールのアイコンボタンにリンクを追加する

> カスタマイズ可能なアイコン付きのクリック可能なリッチテキストボタンをメールデザインに追加し、任意のURLにリンクできます。

[Video](/assets/videos/emailify/content/add-icon-buttons.mp4)

> **Warning:** **アイコンボタンはOutlookでは*サポートされていません***。ボタン内のアイコンは、Windows版のOutlookクライアントでのみ自動的に非表示になりますが、それ以外のすべてのメールクライアントでは通常どおり表示されます。

メールデザインに新しいアイコンボタンレイヤーを追加するには、任意のColumnレイヤーまたはHeroレイヤーをクリックし、Quick Addのドロップダウンメニューから**Icon Button**オプションを選択して、**Add +** ボタンをクリックします。新しいボタンレイヤーがレイアウトに挿入されます。

または、プラグインの**CTA**タブにあるプリセットコンポーネントを使うこともできます。**Icon Buttons**サブカテゴリタブをクリックし、任意のアイコンボタンのプリセットをクリックすると、新しい「Row」レイヤーとしてデザインに追加されます。

ボタンのスタイルを好みに合わせて整えたら、FigmaでButtonレイヤーをクリックし、**Settings**ボタンをクリックして、**Clickable Link URL**入力欄にURLを貼り付けます。これで、ボタンをクリックするとそのURLがブラウザで開きます。

> **Tip:** **全幅で左右に分かれたテキスト・アイコンボタン**にするには、プラグインから全幅のプリセットを追加するか、既存のアイコンボタンのFigmaのAuto Layout設定で**Horizontal**を**Fill**にし、さらに**Item Spacing**を**Auto**に設定します。これで、ボタンが自動的に両端揃えの分割ボタンになります。

> **Note:** アイコンボタンの**アイコンレイヤーをカスタマイズ**するには、Figmaのアイコンフレームまたはベクターレイヤーを1つIcon Buttonレイヤーにドラッグし、元のアイコンレイヤーを削除します。Buttonレイヤー内のアイコンが1つだけになるようにしてください（ボタン内のもう1つのレイヤーはテキストレイヤーのみです）。

Emailifyのリンク入力欄やFigmaのテキストハイパーリンクで追加したリンクについて、HTMLエクスポートでは実行可能な`javascript:`と`vbscript:`のリンク先を除外します。動的テンプレートリンクと画像のソースURLの動作は変わりません。

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