---
url: "/ja/bannerify/design/links.md"
description: "BannerifyでHTMLバナーのエクスポートにURLリンクを追加する方法は2つあります。バナー全体を`<a>`リンクタグで囲む方法と、タイムラインの個々のレイヤーにクリックできるリンクを追加する方法です。"
---

# バナーにクリックできるURLリンクを追加する

> BannerifyでHTMLバナーのエクスポートにURLリンクを追加する方法は2つあります。バナー全体を`<a>`リンクタグで囲む方法と、タイムラインの個々のレイヤーにクリックできるリンクを追加する方法です。

> **Note:** **リンクはHTMLエクスポートにのみ適用されます**。 この設定はすべてのHTMLエクスポートオプションに適用されますが、プラグインからのGIFや動画のエクスポートには影響しません。

## バナー全体にクリックできるURLを追加する {#adding-a-clickable-url-to-the-entire-banner}

[Video](/assets/videos/bannerify/design/banner-link-tag.mp4)

バナー全体をリンクで囲むには、エクスポート設定パネルのURL欄にリンクを貼り付けます。バナー全体が自動で``タグで囲まれ、その`href`には入力欄で指定したURLが設定されます。

## タイムラインの特定のレイヤーにクリックできるURLを追加する {#adding-a-clickable-url-to-a-specific-timeline-layer}

[Video](/assets/videos/bannerify/design/prototype-link.mp4)

タイムラインの特定のレイヤーをクリックできるようにするには、Figmaのキャンバスでそのレイヤーをクリックし、Figma標準の**Prototype**パネルで**Open link**インタラクションを追加します。FigmaのインタラクションのURL欄にリンクを貼り付けると、HTMLバナーのエクスポートで、その要素に`onclick="window.open('https://yourwebsitelink.com', '_blank')"`属性が自動で追加されます。

> **Tip:** **Bannerifyのタイムラインに表示されているレイヤーにのみ適用されます**。 この設定は、Figmaのタイムラインに表示されているレイヤーにのみ適用されます。デフォルトでは、バナーフレームの直下の子レイヤーが対象です。必要に応じて、プラグインで[ネストされたレイヤーを含め](/ja/bannerify/design/nested)、それらのネストされたレイヤーにもプロトタイプのリンクインタラクションを適用できます。

## DoubleClickエクスポートでタイムラインのレイヤーにEnabler.exit()を使う {#using-enabler-exit-on-timeline-layers-for-doubleclick-exports}

**DoubleClick Studio**形式でエクスポートする場合は、タイムラインのレイヤーのFigmaプロトタイプURLに、通常のWebサイトのURLの代わりに`Enabler.exit(...)`の呼び出しを設定することもできます。

1. タイムラインでレイヤーを選択します（たとえば、CTAボタン）。
2. Figmaの**Prototype**パネルで、**On click -> Open link**インタラクションを追加します。
3. URL欄に、次のようなDoubleClickのexit呼び出しを入力します。

```js
Enabler.exit("CTA Exit");
```

4. Bannerifyで、**DoubleClick Studio**形式を使ってバナーをエクスポートします。

すると、Bannerifyは次のように処理します。
- そのレイヤーを`Enabler.exit("CTA Exit")`に結び付けます。
- バナー全体のデフォルトの背景exit（`Enabler.exit("Background Exit")`）はそのまま残します。
- レイヤーのクリックが背景のexitに伝わらないようにして、exitの呼び出しが重複しないようにします。

> **Tip:** **DoubleClickエクスポートでのみ使ってください**。 DoubleClick以外のHTML形式では、Prototypeのリンクに通常のWebサイトのURL（例：`https://example.com`）を使ってください。