ポップアップの余白や幅を調整する

ポップアップの幅や余白をCSSでカスタマイズする方法を解説します。

ポップアップ内の要素の余白や画像の幅は、ステップ編集画面の[見出し]または[本文]エリアを[HTML]モードにしてCSSを貼り付ければ細かく調整することができます。
ポップアップテンプレートのタイプごとに記述するCSSが異なりますので、カスタマイズしたいテンプレートの項目をご確認ください。CSSをそのまま貼り付けると、各要素の余白が「0px」の状態になります。実際に設定したい数値を入力してください。

ステップ編集画面の[見出し]または[本文]エリアで[入力形式]に[HTML]を選択するステップ編集画面の[見出し]または[本文]エリアで[入力形式]に[HTML]を選択する

ステップ編集画面の[見出し]または[本文]エリアで[入力形式]に[HTML]を選択する

目次

ワンカラムのテンプレートの場合

コンテンツがワンカラム(縦並び)のポップアップテンプレート用のサンプルCSSです。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

調整する要素

実装コード

<style>

/* 余白調整:ポップアップ全体(ボックス) */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

/* 余白調整:項目 -> タイトル画像 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-topimage {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:項目 -> 見出し */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-title {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:項目 -> 本文 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-description {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:項目 -> 画像 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-image {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}


/* 余白調整:ボタンエリア(全体)
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav {
  border-top-width:0px;
}

/* 余白調整:ボタンエリア -> 行
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:ボタンエリア -> ボタン
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row .spg-tour02-nav-button {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

</style>

カラム画像を含むテンプレートの場合

コンテンツにカラム画像を含む(横並び)のポップアップテンプレート用のサンプルCSSです。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

対象となるテンプレート対象となるテンプレート

対象となるテンプレート

調整する要素

実装コード

<style>

/* 余白調整:ポップアップ全体(ボックス) */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

/* 余白調整:画像エリア ※左画像レイアウト時 */
body > .spg-tour02 * .spg-tour02-content-column-image:first-child {
  padding-right:0px;
  width:30%;
}

/* 余白調整:画像エリア ※右画像レイアウト時 */
body > .spg-tour02 * .spg-tour02-content-column-image:last-child {
  padding-left:0px;
  width:30%;
}

/* 余白調整:テキストエリア */
body > .spg-tour02 * .spg-tour02-content-column {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}


/* 余白調整:項目 -> 見出し */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-title {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:項目 -> 本文 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-description {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}


/* 余白調整:ボタンエリア(全体)
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav {
  border-top-width:0px;
}

/* 余白調整:ボタンエリア -> 行
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:ボタンエリア -> ボタン
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row .spg-tour02-nav-button {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

</style>

グリッド画像を含むテンプレートの場合

コンテンツにグリッド画像(余白なし)を含むポップアップテンプレート用のサンプルCSSです。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

対象となるテンプレート対象となるテンプレート

対象となるテンプレート

調整する要素

実装コード

<style>

/* 余白調整:グリッド画像エリア
   ※画像の横幅を変更する場合は、①、②、③の3か所の変更が必要。 */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid-image {
  flex-basis: 30%;       /* ① */
  width: 30%;            /* ② */
}
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid-image > div[style] {
  width: 30%;            /* ③ */
}

/* 余白調整:グリッド画像のエリアの画像中心点位置の調整 */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid-image > div[style] {
  background-position: 0% 0%;
}

/* 余白調整:テキストエリア */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

/* 余白調整:項目 -> 見出し */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-title {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:項目 -> 本文 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-description {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}


/* 余白調整:ボタンエリア(全体)
   ※管理画面にある「ボタンの配置を指定する」で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav {
  border-top-width:0px;
}

/* 余白調整:ボタンエリア -> 行
   ※管理画面にある「ボタンの配置を指定する」で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:ボタンエリア -> ボタン
   ※管理画面にある「ボタンの配置を指定する」で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row .spg-tour02-nav-button {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

</style>

画像ボタンを含むテンプレートの場合

ポップアップテンプレート[本文 | 画像ボタン]用のサンプルCSSです。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

対象となるテンプレート対象となるテンプレート

対象となるテンプレート

調整する要素

実装コード

<style>

/* 余白調整:ポップアップ全体(ボックス) */
body > .spg-tour02 .spg-tour02-main .spg-tour02-main-grid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

/* 余白調整:項目 -> 本文 */
body > .spg-tour02 .spg-tour02-main-grid .spg-tour02-description {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}


/* 余白調整:ボタンエリア(全体)
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav {
  border-top-width:0px;
}

/* 余白調整:ボタンエリア -> 行
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* 余白調整:ボタンエリア -> ボタン
   ※管理画面にある[ボタンの配置を指定する]で指定された値はインラインスタイルで記述されます。 */
body > .spg-tour02 * .spg-tour02-nav .spg-tour02-nav-row .spg-tour02-nav-button {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

</style>