---
url: "/ja/bannerify/design/scrollable-text.md"
description: "Figmaで省略表示のテキストレイヤーを使い、BannerifyでスクロールできるHTMLテキストや、自動スクロールするGIF・動画のテキストとしてエクスポートします。"
---

# バナーにスクロール可能な省略テキストレイヤーを追加する

> Figmaで省略表示のテキストレイヤーを使い、BannerifyでスクロールできるHTMLテキストや、自動スクロールするGIF・動画のテキストとしてエクスポートします。

### 動画チュートリアル：Figmaのバナーエクスポートにスクロール可能な注意書きテキストを追加する

この動画では、Bannerifyプラグインを使って、Figmaのバナーエクスポートにスクロール可能な注意書きテキスト（自動スクロール付き）を追加する方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/lDPV4QU_ZRU)

[Video](/assets/videos/bannerify/design/scrollable-text.mp4)

長い法的表記や安全性に関する文言、PI（処方情報）の内容を、限られたスペースで読みやすく表示したい場合、Bannerifyでは省略表示のテキストレイヤーをネイティブのスクロール可能なHTMLテキストとしてエクスポートしたり、自動スクロールするテキストとしてGIF・動画の出力にレンダリングしたりできます。

インラインのスクロールテキストではなく、閉じられるオーバーレイを使いたい場合は、[ポップアップオーバーレイを追加](/ja/bannerify/design/popups)をご覧ください。

## ステップ1：Figmaで省略表示のテキストレイヤーを作成する {#step-1-create-a-truncated-text-layer-in-figma}

テキストボックスのサイズを固定したテキストレイヤーを作成し、（自動で伸びる設定ではなく）**Truncate**に設定されていることを確認します。

HTMLエクスポートでは、表示されているテキストボックスのサイズがスクロールコンテナになり、テキストの内容はすべてその中に保持されます。GIF・動画のエクスポートでは、同じテキストボックスが、レンダリングされる自動スクロールの動きを切り抜きます。

## ステップ2：Bannerifyでスクロール可能なテキストを有効にする {#step-2-enable-scrollable-text-in-bannerify}

そのテキストレイヤーのレイヤー設定を開き、次の設定を有効にします。

- **Enable scrollable text**

この機能は、省略表示のテキストレイヤーでのみ使えます。

## ステップ3：スクロールの動作を選ぶ {#step-3-choose-scroll-behavior}

有効にしたら、次のいずれかのモードを選びます。

- **Manual User Scrollable**：タイムライン全体を通して、ユーザーが手動でスクロールします。
- **Auto Scroll on Layer Enter**：レイヤーが登場したときに自動スクロールを開始します。
- **Auto Scroll on Banner End**：バナーのタイムラインが終わったときに自動スクロールを開始します。

GIF・動画のエクスポートでは、どちらの自動スクロールモードもHTMLエクスポートと同じスクロール速度を使います。元のバナーのタイムラインより長いスクロール時間が必要な場合は、テキストがその速度でスクロールし終えられるよう、エクスポートするファイルが延長されます。

### バナーのループ時の動作 {#banner-loop-behavior}

- 再生回数が有限の場合、**Auto Scroll on Banner End**は最後の再生時にのみ動作します。
- バナーが無限ループに設定されている場合、**Auto Scroll on Banner End**はスキップされます。

## ステップ4：エクスポート時の注意点を確認する {#step-4-review-export-notes}

- **HTML**出力では、手動モードはユーザーがスクロールできる状態のままです。どちらの自動モードでも、ホイール、タッチ、スクロールバーの操作があると自動の動きがその位置で止まり、ユーザーは続けて手動でスクロールできます。
- **GIF・動画**出力では、自動スクロールモードはエクスポートしたフレームにレンダリングされます。エクスポートしたファイルは操作できないため、手動モードは静止したままになります。
- ブラウザ・デバイスのネイティブのスクロールバーのスタイルが使われます。
- そのレイヤーに画像形式の上書きが適用されている場合、そのレイヤーではスクロール可能なテキストが無効になります。

## スクロールバーのスタイルをカスタマイズする {#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:** スクロール可能なテキストは、省略表示のテキストレイヤー専用に設計されています。省略表示になっていないレイヤーは、通常のテキスト・画像の動作でエクスポートしてください。