カード型のDOM仕様
ポップアップをカスタマイズする際に必要となるカード型の各テンプレートのDOM仕様を説明します。
スタートアップガイド
- 本記事では、カード型のDOM仕様をテンプレートごとに説明します。
- DOM仕様は、主にカスタムCSSでポップアップのデザインを修正する際に使用します。
目次
カード型 - [本文のみ](レイアウトID:standard-01)
カード型 - [画像のみ](レイアウトID:standard-02)
カード型 - [見出し | 本文](レイアウトID:standard-03)
カード型 - [見出し | 画像](レイアウトID:standard-04)
カード型 - [見出し | 画像 | 本文](レイアウトID:standard-05)
カード型 - [見出し | 本文 | 画像](レイアウトID:standard-06)
カード型 - [タイトル画像 | 見出し | 本文](レイアウトID:standard-07)
カード型 - [左画像 | 本文](レイアウトID:columnImg-01)
カード型 - [左画像 | 見出し | 本文](レイアウトID:columnImg-02)
カード型 - [本文 | 右画像](レイアウトID:columnImg-03)
カード型 - [見出し | 本文 | 右画像](レイアウトID:columnImg-04)
カード型 - [左画像(余白なし) | 本文](レイアウトID:gridImg-01)
カード型 - [左画像(余白なし) | 見出し | 本文](レイアウトID:gridImg-02)
カード型 - [本文 | 右画像(余白なし)](レイアウトID:gridImg-03)
カード型 - [見出し | 本文 | 右画像(余白なし)](レイアウトID:gridImg-04)
カード型 - [本文 | 画像ボタン](レイアウトID:buttonImg-01)
カード型 - [画像ボタン(余白なし)](レイアウトID:buttonImg-02)
カード型 - [本文のみ](レイアウトID:standard-01)
![card-standard-01-template.jpg 150](https://files.readme.io/0eade78-card-standard-01-template.jpg)
![card-standard-01.jpg 400](https://files.readme.io/e3e6054-card-standard-01.jpg)
<div class="
spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-01
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">
本文テキスト
</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [画像のみ](レイアウトID:standard-02)
![card-standard-02-template.jpg 150](https://files.readme.io/c1323c5-card-standard-02-template.jpg)
![card-standard-02.jpg 400](https://files.readme.io/b6f8491-card-standard-02.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-02
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-image">
<img src="画像ファイルPATH" alt="">
</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 本文](レイアウトID:standard-03)
![card-standard-03-template.jpg 150](https://files.readme.io/0a02478-card-standard-03-template.jpg)
![card-standard-03.jpg 400](https://files.readme.io/a219c83-card-standard-03.jpg)
<div class="
spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-03
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 画像](レイアウトID:standard-04)
![card-standard-04-template.jpg 150](https://files.readme.io/f1cf6a7-card-standard-04-template.jpg)
![card-standard-04.jpg 400](https://files.readme.io/7c97332-card-standard-04.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-04
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-image">
<img src="画像ファイルPATH" alt="">
</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 画像 | 本文](レイアウトID:standard-05)
![card-standard-05-template.jpg 150](https://files.readme.io/8e25949-card-standard-05-template.jpg)
![card-standard-05.jpg 400](https://files.readme.io/7b7d318-card-standard-05.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-05
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-image">
<img src="画像ファイルPATH" alt="">
</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 本文 | 画像](レイアウトID:standard-06)
![card-standard-06-template.jpg 150](https://files.readme.io/4027a5f-card-standard-06-template.jpg)
![card-standard-06.jpg 400](https://files.readme.io/2effda5-card-standard-06.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-06
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
<div class="spg-tour02-image">
<img src="画像ファイルPATH" alt="">
</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [タイトル画像 | 見出し | 本文](レイアウトID:standard-07)
![card-standard-07-template.jpg 150](https://files.readme.io/55da654-card-standard-07-template.jpg)
![card-standard-07.jpg 400](https://files.readme.io/0e12aef-card-standard-07.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_standard-07
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-topimage">
<img src="画像ファイルPATH" alt="">
</div>
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [左画像 | 本文](レイアウトID:columnImg-01)
![card-columnImg-01-template.jpg 150](https://files.readme.io/157563d-card-columnImg-01-template.jpg)
![card-columnImg-01.jpg 400](https://files.readme.io/3d7c72d-card-columnImg-01.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_columnImg-01
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column-image">
<img src="画像ファイルPATH" alt="">
</div>
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [左画像 | 見出し | 本文](レイアウトID:columnImg-02)
![card-columnImg-02-template.jpg 150](https://files.readme.io/a278545-card-columnImg-02-template.jpg)
![card-columnImg-02.jpg 400](https://files.readme.io/2bab44f-card-columnImg-02.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_columnImg-02
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column-image"><img src="画像ファイルPATH" alt=""></div>
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [本文 | 右画像](レイアウトID:columnImg-03)
![card-columnImg-03-template.jpg 150](https://files.readme.io/1b3b54a-card-columnImg-03-template.jpg)
![card-columnImg-03.jpg 400](https://files.readme.io/744b0ce-card-columnImg-03.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_columnImg-03
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">本文テキスト</div>
</div>
<div class="spg-tour02-content-column-image">
<img src="画像ファイルPATH" alt="">
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 本文 | 右画像](レイアウトID:columnImg-04)
![card-columnImg-04-template.jpg 150](https://files.readme.io/cace343-card-columnImg-04-template.jpg)
![card-columnImg-04.jpg 400](https://files.readme.io/ceeaa87-card-columnImg-04.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_columnImg-04
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
<div class="spg-tour02-content-column-image">
<img src="画像ファイルPATH" alt="">
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [左画像(余白なし) | 本文](レイアウトID:gridImg-01)
![card-gridImg-01-template.jpg 150](https://files.readme.io/44f4e77-card-gridImg-01-template.jpg)
![card-gridImg-01.jpg 400](https://files.readme.io/e5be7ad-card-gridImg-01.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_gridImg-01
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid-image"> <!-- 左画像 -->
<div style="background-image: url("画像ファイルPATH");"></div>
</div>
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [左画像(余白なし) | 見出し | 本文](レイアウトID:gridImg-02)
![card-gridImg-02-template.jpg 150](https://files.readme.io/ea6adbd-card-gridImg-02-template.jpg)
![card-gridImg-02.jpg 400](https://files.readme.io/9139852-card-gridImg-02.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_gridImg-02
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid-image"> <!-- 左画像 -->
<div style="background-image: url("画像ファイルPATH");"></div>
</div>
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!--閉じるボタン -->
</div>
</div>
カード型 - [本文 | 右画像(余白なし)](レイアウトID:gridImg-03)
![card-gridImg-03-template.jpg 150](https://files.readme.io/2f820bc-card-gridImg-03-template.jpg)
![card-gridImg-03.jpg 400](https://files.readme.io/b20e8e2-card-gridImg-03.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_gridImg-03
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<div class="spg-tour02-main-grid-image"> <!-- 右画像 -->
<div style="background-image: url("画像ファイルPATH");"></div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [見出し | 本文 | 右画像(余白なし)](レイアウトID:gridImg-04)
![card-gridImg-04-template.jpg 150](https://files.readme.io/861481f-card-gridImg-04-template.jpg)
![card-gridImg-04.jpg 400](https://files.readme.io/ad97309-card-gridImg-04.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_gridImg-04
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-title">見出しテキスト</div>
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル1
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
ボタンラベル2
</div>
</div>
</div>
</div>
<div class="spg-tour02-main-grid-image"> <!-- 右画像 -->
<div style="background-image: url("画像ファイルPATH");"></div>
</div>
<button class="spg-tour02-end"></button> <!--閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [本文 | 画像ボタン](レイアウトID:buttonImg-01)
![card-buttonImg-01-template.jpg 150](https://files.readme.io/77dea58-card-buttonImg-01-template.jpg)
![card-buttonImg-01.jpg 400](https://files.readme.io/9a69298-card-buttonImg-01.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_buttonImg-01
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-content"> <!-- コンテンツ領域 -->
<div class="spg-tour02-content-column">
<div class="spg-tour02-description">本文テキスト</div>
</div>
</div>
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
<img src="画像ファイルPATH" alt="">
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
<img src="画像ファイルPATH" alt="">
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
カード型 - [画像ボタン(余白なし)](レイアウトID:buttonImg-02)
![card-buttonImg-02-template.jpg 150](https://files.readme.io/97746ae-card-buttonImg-02-template.jpg)
![card-buttonImg-02.jpg 400](https://files.readme.io/4494578-card-buttonImg-02.jpg)
<div class="spg-tour02
spg-tour02-type_card
spg-tour02-layout_buttonImg-02
spg-tour02-position_(top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|center) <!-- ※1 -->
spg-tour02-animation-transform_(slide-in-top-bottom|slide-in-bottom-top|slide-in-right-left|slide-in-left-right|fade-in) <!-- ※2 -->
"
data-scenario="シナリオID"
data-phase="フェーズID"
data-pattern="パターンID"
data-step="ステップID"
data-sequence="1" <!-- ※3 -->
>
<div class="spg-tour02-main">
<div class="spg-tour02-main-grid">
<div class="spg-tour02-nav"> <!-- ボタン領域 -->
<div class="spg-tour02-nav-row">
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
<img src="画像ファイルPATH" alt="">
</div>
<div class="spg-tour02-nav-button"
data-next="次のステップID"
data-uri="遷移先URL">
<img src="画像ファイルPATH" alt="">
</div>
</div>
</div>
</div>
<button class="spg-tour02-end"></button> <!-- 閉じるボタン -->
</div>
</div>
補足
- ※1 ポップアップの表示位置によりclass名が変わります
- ※2 ポップアップ表示のトランジションによりclass名が変わります
- ※3 ユーザーがステップをたどった順序で1からの連番
Updated about 3 years ago