ポップアップのデザインを角丸にする

ポップアップのデザインをCSSで角丸にする方法を解説します。

ステップの編集画面にCSSを記述することで、ポップアップを角丸にすることが可能です。

サンプルコード

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

<style>
body > .spg-tour02 .spg-tour02-main {
  border-radius: 10px;
}
</style>

📘

サンプルコードの補足

  • カード型、吹き出し型ともに同じCSSで角丸にすることができます。
  • 10px 部分の数値を大きくすると角がより丸くなります。