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

吹き出し型のポップアップのくちばし（しっぽ）は、通常は左右中央に表示されます。しかしスマートフォン表示でボタンが左右のどちらかに寄っている場合など、くちばしの位置を微調整したくなることがあります。
ここでは、くちばしが下にある場合と上にある場合に分けて、左右の位置を調整する方法をご紹介します。

左端からの距離で指定する（下向き）

サンプルコード

Sprocketの管理画面で、ステップ内のHTMLに下記のようなCSSを記述します。
leftに左端からの距離を数値で入力してください。
CSSは［見出し］と［本文］どちらのHTMLに記述しても構いません。

<style>
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main::before,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main::after,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main .spg-tour02-arrow::before{
  left: 50px; /* 左辺からの距離 */
}
</style>

右端からの距離で指定する（下向き）

サンプルコード

Sprocketの管理画面で、ステップ内のHTMLに下記のようなCSSを記述します。
rightに右端からの距離を数値で入力してください。
CSSは［見出し］と［本文］どちらのHTMLに記述しても構いません。

<style>
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main::before,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main::after,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_top .spg-tour02-main .spg-tour02-arrow::before {
  left: initial; /* 固定 */
  right: 50px; /* 右辺からの距離 */
  transform: translate(50%, 50%) rotate(45deg) skew(10deg,10deg); /* 固定 */
}
</style>

左端からの距離で指定する（上向き）

サンプルコード

<style>
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main::before,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main::after,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main .spg-tour02-arrow::before {
  left: 50px; /* 左辺からの距離 */
}
</style>

右端からの距離で指定する（上向き）

サンプルコード

<style>
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main::before,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main::after,
body > .spg-tour02.spg-tour02-type_speech.spg-tour02-position_bottom .spg-tour02-main .spg-tour02-arrow::before {
  left: initial; /* 固定 */
  right: 50px; /* 右辺からの距離 */
  transform: translate(50%, -50%) rotate(45deg) skew(10deg,10deg); /* 固定 */
}
</style>