ポップアップのボタンの下にテキストを挿入する

標準では、ボタンの下に注意書きなどのテキストを挿入するレイアウトはありませんが、CSSやJavaScriptを利用すれば、任意のテキストをボタンの下に挿入することが可能です。
ここでは、CSSのみを利用する場合と、CSSとJavaScriptを利用する場合の2パターンを解説します。

CSSを利用してテキストを挿入する（おすすめ）

CSSをの疑似要素:afterを利用する方法です。ボタンの下に簡単な注意書きや補足説明を加えたい場合に有効です。

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

<style>
body > .spg-tour02 .spg-tour02-main .spg-tour02-nav:after {
  display: block;
  content: 'ボタンエリアの下のテキスト'; /* 表示するテキスト */
  margin-top:10px; /* ボタンとテキストの距離 */
  text-align: center; /* テキストの左右位置 */
  font-size: 14px; /* テキストのフォントサイズ */
  line-height:1.4em; /* 行間 */
}
</style>

📘

テキストの細かいデザインは調整できない

CSSを追記すれば、contentで挿入したテキスト全体の色を変更することが可能です。しかし、一部の文字色だけ変更するといった細かいデザインの調整はできません。細かい調整を行いたい場合は、次のJavaScriptを利用する方法をお試しください。

CSSとJavaScriptを利用してテキストを挿入する（応用）

挿入するテキストの位置やデザインを細かく調整したい場合は、CSSとJavaScriptを利用します。CSSとJavaScriptを併用すれば、図のように縦に並んだ2つのボタンの間にテキストを配置したり、テキストの一部分をCSSで装飾したりすることが可能です。
なお、縦にボタンを配置するには、Sprocketの管理画面で［ボタンの配置を指定する］をオンにして縦方向に並べる必要があります。

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

<div id="sprInsertContent">
ボタンエリア下のテキスト<br>
  <span style="color:red;"> HTML </span>を挿入できます
</div>
<script>
(function(){
  SPSDK.$('body > .spg-tour02 .spg-tour02-main #sprInsertContent')
    .insertAfter('.spg-tour02 .spg-tour02-nav-row:nth-child(1)'); /* 挿入する場所を指定 */
})();
</script>

<style>
body > .spg-tour02 .spg-tour02-main #sprInsertContent {
  margin-top: 8px; /* ボタンとテキストの距離 */
  text-align: center; /* テキストの左右位置 */
  font-size: 14px; /* テキストのフォントサイズ */
  line-height:1.4em; /* 行間 */
}
</style>

📘

テキストをどのボタンの下に挿入するかも設定できる

上記のサンプルコードでは<div id="sprInsertContent">の中身がボタンの下に挿入されます。
挿入される位置は、JavaScript内にある.spg-tour02 .spg-tour02-nav-row:nth-child(1)の最後の数字で指定できます。例えば(1)と入力すれば1つ目のボタンの下に、(2)と入力すれば2つ目のボタンの下にテキストが挿入されます。