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

吹き出し型のポップアップが画面外に見切れてしまう場合、画面内に収める方法を解説します。

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

📘

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

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

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

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

左に見切れてしまったポップアップを画面内に収める左に見切れてしまったポップアップを画面内に収める

左に見切れてしまったポップアップを画面内に収める

サンプルコード

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>