吹き出し型ポップアップを画面内に収める

吹き出し型のポップアップは、ボタンなどの要素に吸着して表示されます。
特にスマートフォンの場合、画面端に近い要素にポップアップを吸着させると、画面外に見切れてしまうことがあります。その場合は、ここでご紹介する方法をお試しください。

📘

くちばし（しっぽ）の左右位置を調整したい場合は

ポップアップを画面内に収めたことでくちばし（しっぽ）の位置がずれてしまう場合は、別の記事を参照してください。

吹き出し型ポップアップのくちばし（しっぽ）の左右の位置を調整する

画面左側に見切れてしまう場合

Sprocketの管理画面で、ステップ内のHTMLに下記のようなCSSを記述します。
CSSは［見出し］と［本文］どちらのHTMLに記述しても構いません。

<style>
body > .spg-tour02.spg-tour02-type_speech {
  left: initial !important;
}
</style>

画面右側に見切れてしまう場合

Sprocketの管理画面で、ステップ内のHTMLに下記のようなCSSを記述します。
CSSは［見出し］と［本文］どちらのHTMLに記述しても構いません。

<style>
body > .spg-tour02.spg-tour02-type_speech {
  left: initial !important;
  right: 0;
}
</style>