変更履歴ガイドディスカッションご利用ガイドコーポレートサイト

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

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

Suggest Edits

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

778

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

目次

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

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

対象となるテンプレート

689

調整する要素

367

実装コード 

<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です。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

688

対象となるテンプレート

調整する要素

364

実装コード 

<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です。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

688

対象となるテンプレート

調整する要素

374

実装コード 

<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です。カード型・吹き出し型共通で利用できます。

対象となるテンプレート

336

対象となるテンプレート

調整する要素

408

実装コード 

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

Updated over 1 year ago