---
title: バナーの基本設定：インラインバナーの設定方法
description: シナリオ配信の際に表示されるバナーをインライン要素として表示させる設定方法を説明します。
---

[コンテンツまでスキップ](https://support.materialdigital.jp/manual/scenario-inline-button#main-content)

日本語

翻訳のサブメニューを表示

[お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new?hsLang=ja)

![typeA-1.png\]](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?height=40&name=typeA-1.png)

メインナビゲーションを開く

メインナビゲーションを閉じる

- 日本語
  
  翻訳のサブメニューを表示
- [お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new)
- [サービスサイトへ](https://materialdigital.jp/)

[サービスサイトへ](https://materialdigital.jp/)

 お困りのことは何でしょうか？

- 検索フィールドが空なので、候補はありません。

1. [Flipdeskサポートセンター](https://support.materialdigital.jp/manual?hsLang=ja)
2. [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
3. [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)

# バナーの基本設定：インラインバナーの設定方法

## シナリオ配信の際に表示されるバナーをインライン要素として表示させる設定方法を説明します。

インラインDOMはHTMLの知識が必要となります。

### インラインバナーとは

デフォルト設定では、Flipdeskのバナーはフローティング要素として表示されますが、これをインライン要素として表示したい時に使用するのがインラインバナーです。

※フローティング要素とは、画面上の固定位置に表示され、ページをスクロールしても移動しない、いわゆる追従型の要素を指します。  
※インライン要素は、ページ内の特定の位置に埋め込まれた要素を指します。

### インラインバナーの設定方法

インラインバナーを利用するには2つの方法があります。

1. サイト独自の要素を使用
2. Flipdeskのインラインバナータグを使用

設置後は、ステータスをONにする前に[プレビュー機能](https://help.flipdesk.jp/manual/preview?hsLang=ja)を活用して確認することをおすすめします。

### 1. サイト独自の要素を使用する場合

バナータイプを「インライン」もしくは「インライン置換」を選択し、バナーを設置したい箇所の要素を記載します。

ページ内に存在する要素の中からセレクタで指定できるようid・classを設定してください。  
ページ内において一意であることから、idを使用することを推奨しています。

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-01-22%20at%2019-02-53-png-2.png?width=666&height=201&name=CleanShot%202026-01-22%20at%2019-02-53-png-2.png)

※設定した要素がページ内に存在しない場合はバナーが挿入されません。  
※必ずページ内に存在する要素を記述してください。

### 2. Flipdeskのインラインバナータグを使用する場合

#### 設置箇所

任意のページにて、バナーをインライン表示したい箇所にタグを設置してください。

#### タグの仕様

インラインバナーを表示したい箇所に以下のタグを埋め込んでください。

```
<a id="flipdesk_chat-extra-btn"></a>
```

「インライン」・「インライン置換」を選択した際に、上記タグのidがデフォルトでセットされているため、DOM部分のセレクタ変更は必要ありません。

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-01-22%20at%2019-02-53-png-1.png?width=666&height=201&name=CleanShot%202026-01-22%20at%2019-02-53-png-1.png)

要素を指定して挿入した時、その要素の末尾に挿入するのか先頭に挿入するのかを選択できます

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-01-22%20at%2019-04-10-png.png?width=280&height=176&name=CleanShot%202026-01-22%20at%2019-04-10-png.png)

挿入後、表示されるシナリオの水平方向の位置を変更することができます

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-01-22%20at%2019-05-49-png.png?width=403&height=68&name=CleanShot%202026-01-22%20at%2019-05-49-png.png)

**指定したDOM要素が複数存在する場合の挙動**

- 通常のシナリオ：すべてのDOM要素が配信対象
- 同時配信シナリオ：複数存在する場合は配信されない

※予想外の挙動を避ける為、単一の要素を指定する事を推奨しています。

 

- [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#main-content)

    - [初めての方はこちら](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89)
    - [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)
- [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#main-content)

    - [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)
    - [配信ターゲットの設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E9%85%8D%E4%BF%A1%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A)
    - [各種タグの仕様](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E3%82%BF%E3%82%B0%E3%81%AE%E4%BB%95%E6%A7%98)
    - [レポート管理](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E7%AE%A1%E7%90%86)
    - [各種設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
    - [アラート機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD)
    - [AI機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#ai%E6%A9%9F%E8%83%BD)
- [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#main-content)

    - [有人チャット](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E6%9C%89%E4%BA%BA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88)
    - [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)
    - [会員情報連携](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E4%BC%9A%E5%93%A1%E6%83%85%E5%A0%B1%E9%80%A3%E6%90%BA)
    - [ヒートマップ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97)
- [Cross Talk](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#main-content)

    - [スタートガイド](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89)
- [技術的なマニュアル](https://support.materialdigital.jp/manual/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
- [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#main-content)

    - [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
    - [契約・請求関連](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E5%A5%91%E7%B4%84-%E8%AB%8B%E6%B1%82%E9%96%A2%E9%80%A3)

[![Chill listening crop-3](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?width=99&height=31&name=typeA-1.png "Chill listening crop-3")](https://materialdigital.jp/)

Copyright © Flipdesk Inc.

Copyright © 2026, 株式会社マテリアルデジタル