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

吹き出し型ポップアップのくちばしの位置を微調整する方法を解説します。

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

左端からの距離で指定する(下向き)

左端からの距離でくちばしの位置を調整する左端からの距離でくちばしの位置を調整する

左端からの距離でくちばしの位置を調整する

サンプルコード

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>

左端からの距離で指定する(上向き)

左端からの距離でくちばしの位置を調整する左端からの距離でくちばしの位置を調整する

左端からの距離でくちばしの位置を調整する

サンプルコード

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

<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>

右端からの距離で指定する(上向き)

右端からの距離でくちばしの位置を調整する右端からの距離でくちばしの位置を調整する

右端からの距離でくちばしの位置を調整する

サンプルコード

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

<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>