---
url: "/ja/bannerify/design/popups.md"
description: "Bannerifyを使うと、バナー内の特定のレイヤーをクリックしたときに、リッチテキスト（注意書きや利用規約など）を表示するシンプルなオーバーレイのポップアップを追加できます。"
---

# バナーにクリックで開くリッチテキストのポップアップオーバーレイを追加する

> Bannerifyを使うと、バナー内の特定のレイヤーをクリックしたときに、リッチテキスト（注意書きや利用規約など）を表示するシンプルなオーバーレイのポップアップを追加できます。

### 動画チュートリアル：FigmaのHTMLバナーにリッチテキストのポップアップオーバーレイを追加する

この動画では、Bannerifyプラグインを使って、FigmaのHTMLバナーにリッチテキストのポップアップオーバーレイを追加する方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/fOlw2ghGcIc)

[Video](/assets/videos/bannerify/design/popup-overlays.mp4)

バナーのタイムラインで特定のレイヤーをクリックすると開く、スクロールできる（閉じることもできる）リッチテキストのポップアップオーバーレイをバナーに含めたい場合は、各バナーで[トリガーにしたいレイヤーを選択](/ja/bannerify/animation/animating-banners#quick-selecting-similar-layers)してから、プラグイン下部の一括操作ウィンドウ（タイムラインで複数のレイヤーにチェックを入れると表示されます）にある**Generate Popup Overlay Disclaimers**セクションで、アニメーションのオプションを選びます。

ポップアップのアニメーション設定が決まったら、**Create Popup Links**ボタンをクリックします。Figmaのページに（テキストレイヤーと閉じるボタンを含む）「Popup」コンポーネントが自動で作成され、選択した各レイヤーが、Figma標準のプロトタイプリンク機能を使って、その新しいPopupコンポーネントを指すトリガーとして自動でリンクされます。

テキストレイヤーの内容を変更したり、フォントサイズを調整したり、ポップアップの背景、閉じるアイコン、テキストレイヤーの単色の塗りを変更したりするのは自由です。

HTMLバナーをエクスポートすると、プラグインがこれらのFigmaのプロトタイプリンクと、リンク先のPopupコンポーネントを自動で探し、最終的にエクスポートされるバナーセットに、クリックできるトリガーとポップアップオーバーレイのコードを生成します。

## スクロールバーのスタイルをカスタマイズする {#customizing-scrollbar-styles}

省略表示されたスクロールできるテキストレイヤーや、ポップアップオーバーレイのテキストのスクロールバーのスタイルをカスタマイズしたい場合は、HTMLエクスポート設定で**Inject Custom Code**を有効にしてから、次のコードを**Custom CSS**欄に貼り付けます。

```css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}
```

上部の値を変更すると、スクロールバーの色、トラックの色、幅、高さ、角の丸みを更新できます。ブラウザやモバイルデバイスによっては、引き続きシステム標準のスタイルでスクロールバーが表示されることがありますが、カスタムのスクロールバースタイルを許可している環境では、このCSSが適用されます。

> **Warning:** このコンポーネントは、（注意書き用の）テキストレイヤー1つと閉じるボタンだけの、ごくシンプルな構成になっています。テキストの内容、フォントスタイル、色は自由にカスタマイズできますが、**それ以外のカスタマイズやレイヤーの追加を行うと、エクスポートしたHTMLが壊れる可能性があります**。