バナーの種類と基本設定

バナーの種類と基本設定について説明します。

1. テキストバナー

テキストのみのシンプルなバナーを作成することが可能です。
見た目はシンプルですが、その分内容がストレートに伝わりやすいのが特徴です。
　　

項目名	説明
テキスト	「テキスト」の入力欄に任意のテキストを入力することが可能です。 ※空欄の状態ではシナリオを作成することはできません。 バナーサイズに収まらない場合は、横方向のサイズは固定されたまま、縦方向にバナーが拡大されてテキストを収めるように動きます。 ※長文を入力するとバナーサイズに合わせて自動的に改行されます。 任意の場所で改行を挿入することも可能ですので、プレビューを確認しながら調整してください。 ※「”（半角ダブルクォート）」は使用できません。
文字サイズ	文字サイズは初期値は14pxに設定されています。 数値を編集することも可能です。 空欄の状態ではシナリオを作成することはできません。
文字色と背景色	文字色 初期値は白（#FFFFFF）に設定されています。 背景色 初期値はグレー（#666666）に設定されています。 色指定については文字色と同様の挙動です。 ■ 色指定の方法 デフォルトカラーが用意されていますが、任意のカラーへの変更は 「 ＋ 」ボタンから可能です。 一度追加したカラーは「 ＋ 」ボタンの隣に追加されていきます。 カラーパレットからの追加では、HEX・RGB・HSLの3種類の指定方法が用意されており、右端の矢印をクリックすることで切り替えることができます。 下部の色表示部分にて任意の場所をクリックすることでも色の選択が可能です。
カスタムデザイン	「有効にする」にチェックを入れると設定が可能です。 設定内容の詳細は下記を参照ください。

2. 画像バナー

画像をバナーとして作成することが可能です。
作成した画像をアップロード、またはメディアライブラリからアップロード済みのファイルを選択してご利用いただけます。

 

• 画像ファイルを追加
  「＋画像ファイルを追加」ボタンをクリックするとファイルの選択ウインドウが開きます。使用したいファイルがあるフォルダに移動して、対象のファイルを選択します。
  使用できるファイル形式はpng・gif・jpgの3種類です。
  ファイルは元のサイズのままアップロードされるので、必要に応じて後述の基本設定にある「表示サイズ」の変更を行ってください。
  灰色部分にファイルをドロップしてアップロードすることも可能です。
  

• メディアライブラリを開く
  メディアライブラリにアップロードしたファイルを選択することも可能です。

▼ アップロードできる画像ファイルの詳細

使用できる形式	png・gif・jpg
アップロード可能な ファイルサイズ	1MB未満 ※1MBを超えた場合はエラーとなりますので、縮小するか加工しなおしてアップロードしてください。
推奨サイズ	500KB未満 ※500KBを超えるような大きなファイルサイズの画像ファイルをアップロードすると、実際のシナリオ適用時にバナーが表示されるまでに時間がかかり、ユーザー体験を損ねることになります。 ※ファイルをアップロードする場合は適したサイズのものを選んでください。

 

• カスタムデザイン
  「有効にする」にチェックが入っている場合に設定が可能です。
  テキストバナーと同様に、バナーを装飾することができます。

3. テキスト+画像バナー

テキストバナーの右または左に画像をはめ込んだバナーです。
テキストバナーを少しリッチに作成することが可能です。

4. HTMLバナー

クリエイティブエディタやHTMLエディタで自在にバナーを作成することが可能です。
テンプレートを読み込んだ後は、HTMLエディタで編集することも可能です。

.sampleclass{
        font-size: 40px !important;
    }

• エディタタイプ
  • エディタ
    直感的な操作でクリエイティブがつくれるエディタです。
    ドラッグ&ドロップとかんたんな操作だけで要素を組み立てられるのでHTMLの知識が必要ありません。
    詳細についてはクリエイティブエディタのマニュアルをご確認ください。
    
    • エディタを開く
      要素やブロック等をドラッグ＆ドロップでセットでき、HTMLの知識がなくとも簡単にバナーを作成することが可能です。
    • テンプレートを選ぶ
      「HTMLバナーテンプレート選択」のサブウィンドウが開きます。
      テンプレートが表示されますので、お好みのテンプレートを選択してください。
      選択後は画面右上にある「決定」ボタンを押すと、HTML入力欄にテンプレートを構成しているHTMLコードが挿入されます。
      
      
    • 「エディタを開く」ボタンをクリックし、挿入されたコード内の画像・リンク先・バナーの色などを編集することが可能です。
      
      
• HTML
  技術者向けのエディタです。
  HTMLを直接記述することが可能なためカスタマイズ性に優れていますが、HTMLの知識が必要です。
  エディタの入力エリアのすぐ下にある「テンプレートから選ぶ」ボタンより選択したテンプレートについて、後述する詳細の部分を変更することによって細かな編集が可能です。

• AIコード
  リクエスト（命令文）を入力することで、AIが代わりにHTMLのコーディングをしてくれる機能です。
  0から作成することもできる他、既存のコードをAIに編集してもらうことも可能です。
  詳細は「AIコード」を使ったHTMLバナー設定のマニュアルをご確認ください。
  
  
• メディアライブラリを開く
  メディアライブラリにアップロードしたいファイルをアップロードしたり、アップロード済みのファイルのURLをコピーすることが可能です。
  画像ファイルの形式やサイズ等についての詳細は前述の画像バナーを参照してください。
  ここでは動画のアップロードも可能です。
  動画ファイルの詳細は以下の通りです。

▼ アップロードできる動画ファイルの詳細

5. 基本設定

• サイズの設定
  
  

  

• バナーのタイプ

  
  バナーを画面内にどのように埋め込むかの設定することが可能です。
  初期状態は「オーバーレイ」が選択されています。
  

  項目名	説明
  オーバーレイ	表示位置で指定した場所にバナーを常に表示します。 閲覧しているページとは別のレイヤーに表示されますので、画面をスクロールしてもバナーの位置は変わらずに表示され続けます。
  インライン	バナーをインライン要素としてページ内の任意の位置に差し込むことが可能です。
  インライン置換	ページ内の既存の要素と、インラインバナーを置換することができます。 例えばページ内のバナーを別のバナーに入れ替えるなどの使い方が可能です。

   ※「インライン」「インライン置換」はあらかじめインラインバナータグを設置しておくことで、指定した場所にバナーを挿入することができますが、ページ内の既存のDOM要素を利用することも可能です。
  ※インラインDOMを利用する場合のマニュアルはこちら

• 透過
  
  

  
  「何もしない」以外を選んだ場合、スクロールによってバナーの透過処理がされます。
  透過されるまでの時間は指定できません。
  
  

  項目名	説明
  何もしない	透過処理を行いません。
  スクロール時以外はバナーを透過する	バナーの表示後に一定時間経過するとバナーが半透明に透過されます。 画面のスクロールで透過が解除されます。
  スクロール中は バナーを透過する	スクロール中はバナーが半透明に透過され、スクロール停止後に透過が解除されます。

• カスタムフォント　

  テキストバナー、テキスト+画像バナーの時にのみ表示され、ご利用いただけます。

  
  「有効にする」にチェックを入れると文字をデフォルト以外のフォントに指定することが可能です。
  バナー・ポップアップの両方に適用されます。
  ※フォントの拡張はできません。

• 閉じるボタンのふるまい
  
  
  
  

  シナリオの閉じるボタンをクリックしたユーザーに対して、非表示期間を変更することが可能です。
  「30分」「1時間」「1日」「今後表示しない」の4種類から選択できます。
  
  なお、非表示期間は一般設定と比較して長い方が優先されます。
  ※一般設定にあるオプトアウトとの優劣についてはこちら
  ※閉じるボタンのカスタマイズ詳細についてはこちら