カード型・吹き出し型を設定する

ポップアップには「カード型」と「吹き出し型」の2種類があります。ここではそれぞれの特徴と設定方法を解説します。

目次

カード型とは

カード型は、ブラウザーの画面内のどこにポップアップを表示するかを指定する形式です。例えば右下にカード型のポップアップを表示した場合は、画面をスクロールしてもポップアップは移動せず、同じ位置に残り続けます。

ポップアップのサイズや表示位置を工夫してユーザーのページ閲覧をじゃましないように設定することで、ポップアップが表示されたままユーザーがページを閲覧して、好きなタイミングでポップアップをクリックするといったストーリーも考えられます。

ポップアップが出現する際、画面の端からふわっとせり出してくるような動きを付けることも可能です。

カード型の設定

[ステップ編集]画面の[ポップアップの種類と出し方]で[カード型]をクリックします。

img-01.png

[ポップアップの位置]で、ポップアップを表示したい位置をクリックします。

img-02.png

カード型では、表示位置を9か所から選択できます。スマートフォンの場合は[中央上][中央][中央下]のいずれかを選択するのがおすすめです。

img-02b.jpg

ユーザーのじゃまにならない位置を選択しよう

ポップアップが表示される位置は、ユーザーのじゃまにならない位置になるように注意しましょう。例えば、じっくりと記事を読みたいのに中央にポップアップが表示されると、ユーザーの体験を損ねてしまいます。パソコンで横長の画面なのか、スマートフォンで縦長の画面なのかも考えて位置を選択します。

[モーダルの設定]って何?

[モーダルウィンドウにする]にチェックマークを付けると、ポップアップと吸着している要素以外のエリアがグレーのモーダル表示になり、ポップアップのみが強調されます。ユーザーの注意を引いて、ポップアップの操作を促したいときに利用します。

吹き出し型とは

吹き出し型は、ボタンやメニューなどページ内の特定の要素を起点にポップアップを表示する形式です。ページ内の要素に吸着するため、例えばあるボタンに吸着している場合、画面をスクロールするとそのボタンと一緒にスクロールします。

ページ内で注目してほしい要素から吹き出し型のポップアップを表示することで、ユーザーの目を引きつけたり、ユーザーをページ内の特定の要素まで誘導したりすることが可能になります。

[表示時に要素の位置までスクロールする]にチェックを付けると、吸着している位置まで自動的にスクロールさせることも可能です。

吹き出し型の設定

[ステップ編集]画面の[ポップアップの種類と出し方]で[吹き出し型]をクリックします。

img-03.png

[要素の指定]に、吸着させたい要素を表すCSSセレクタを入力します。CSSセレクタを調べるには、Chromeデベロッパーツールなどを利用します。

CSSセレクタでポップアップを吸着する要素を指定したら、[ポップアップの位置]でその要素から上下左右のどちらにポップアップを表示するかの向きを指定します。

img-04.png

吹き出し型では、4か所から表示位置を選択できます。

img-04b.jpg

[モーダルの設定]って何?

[モーダルウィンドウにする]にチェックマークを付けると、ポップアップ以外のエリアがグレーのモーダル表示になり、ポップアップのみが強調されます。ユーザーの注意を引いて、ポップアップの操作を促したいときに利用します。

おすすめのCSSセレクタの指定方法

バルーンの吸着先を指定するCSSセレクタは、ページ内に1つである必要があります。最も確実なのは、IDを利用して「#target_contents」などと指定する方法です。IDを利用できない場合は、子孫セレクタや隣接セレクタ、属性セレクタなどを利用して目的の要素を特定します。
ただし、CSSセレクタの指定方法によっては、ページ内容が更新されたときに指定がずれてしまう可能性があります。例えば、HTML内で何番目のdiv要素かを表す「div:nth-child(2)」のような指定方法だと、div要素の数が増えたら指定場所が変わってしまいます。可能な限り、ページ内容の更新に強い指定方法を使うことをおすすめします。

CSSセレクタの指定方法が不安な場合は、担当コンサルタントにご相談ください。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

コメント

0件のコメント

記事コメントは受け付けていません。