ポップアップデザインテンプレート（コンテンツ）

最終更新日：

2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。

ポップアップ（HTMLパーツ/フォーム）でご利用頂けるデザインテンプレートをご用意しております。

※ポップアップ機能についてはこちら
※ポップアップ（HTMLパーツ/フォーム）の具体的なサンプルはこちら
※ポップアップ設置コードを設置したウェブページの設定により、「SATORI」でのプレビュー画面とは表示が異なる場合があります。
※縦横比4:3の画像活用を想定したデザインテンプレートとなります。

HTMLパーツ

利用方法

  1. 適用するポップアップデザインを選ぶ
  2. ソースコード・追加するCSSの組み合わせを確認して設定する
    左メニューのアクション ＞ ポップアップ ＞ ポップアップ新規登録 ＞ ポップアップ設定画面でコンテンツ：HTMLパーツ ＞ に入り、
    (1) HTMLパーツ設定画面　＞ソースコードを編集　を開いた画面に「ソースコード①」を貼り付け
    (2) プレビュー・CSS設定　＞　右側のCSS設定画面にデフォルトで記載のあるCSSの一番下に「追加するCSS②」を貼り付け
    ※ [アップロードした画像URLを記入] の部分をアップロードした画像のURLに置き換えてください。
    ※「ポップアップテンプレ」部分を任意の文字に変更してください。

 ポップアップデザイン

（イメージ）

  ソースコード①  追加するCSS②
01_________.PNG <div class="l-image_left">
<div class="image"><img src="[アップロードした画像URLを記入]" alt="" /></div>
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
</div> 		.satori__popup_inner .l-image_left {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row wrap; }
.satori__popup_inner .l-image_left .image {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.satori__popup_inner .l-image_left .image img {
max-width: 100%;
max-height: 100%; }
.satori__popup_inner .l-image_left .text {
-webkit-flex: 1 1 46%;
-ms-flex: 1 1 46%;
flex: 1 1 46%;
padding: 2%; }
<div class="l-image_right">
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
<div class="image"><img src="[アップロードした画像URLを記入]" alt="" /></div>
</div>		 .satori__popup_inner .l-image_right {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row wrap; }
.satori__popup_inner .l-image_right .image {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.satori__popup_inner .l-image_right .image img {
max-width: 100%;
max-height: 100%; }
.satori__popup_inner .l-image_right .text {
-webkit-flex: 1 1 46%;
-ms-flex: 1 1 46%;
flex: 1 1 46%;
padding: 2%; }
<div class="l-image_horiz">
<div class="image"><img src="[アップロードした画像URLを記入]" alt="" /></div>
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
</div>

.satori__popup_inner .l-image_horiz .image {
display: block; }
.satori__popup_inner .l-image_horiz .image img {
max-width: 100%;
max-height: 100%; }

.satori__popup_inner .l-image_horiz .text {
padding: .5em; }
<div class="l-image_horiz">
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
<div class="image"><img src="[アップロードした画像URLを記入]" alt="" /></div>
</div>

.satori__popup_inner .l-image_horiz .image {
display: block; }
.satori__popup_inner .l-image_horiz .image img {
max-width: 100%;
max-height: 100%; }

.satori__popup_inner .l-image_horiz .text {
padding: .5em; }

<div class="l-list_contents">
<ul>
<li><a href="#">
<div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div>
<div class="list_content">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ <span class="list_subcontent">ポップアップテンプレ</span></div>
</a></li>
<li><a href="#">
<div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div>
<div class="list_content">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ <span class="list_subcontent">ポップアップテンプレ</span></div>
</a></li>
<li><a href="#">
<div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div>
<div class="list_content">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ <span class="list_subcontent">ポップアップテンプレ</span></div>
</a></li>
</ul>
</div>

.satori__popup_inner .l-list_contents > ul {
margin: 0;
padding: 0; }
.satori__popup_inner .l-list_contents > ul > li {
list-style-type: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.satori__popup_inner .l-list_contents > ul > li > a {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-decoration: none; }

.satori__popup_inner .l-list_contents .list_thumbnail,
.satori__popup_inner .l-list_contents .list_content {
padding: 5px; }

.satori__popup_inner .l-list_contents .list_thumbnail {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto; }

.satori__popup_inner .l-list_contents .list_content {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }

.satori__popup_inner .l-list_contents .list_subcontent {
color: rgba(0, 0, 0, 0.6); }

フォーム

利用方法

  1. 適用するポップアップデザインを選ぶ
  2. 追加するCSSの組み合わせを確認して設定する
    左メニューのアクション ＞ ポップアップ ＞ ポップアップ新規登録 ＞ ポップアップ設定画面でコンテンツ：フォーム ＞
    コンテンツ設定画面にてフォーム設定後、
    (1) プレビュー・CSS設定 ＞ 右側のCSS設定画面にデフォルトで記載のあるCSSの一番下に「追加するCSS①」を貼り付け
    ※ [アップロードした画像URLを記入] の部分をアップロードした画像のURLに置き換えてください。
    ※「ポップアップテンプレ」部分を任意の文字に変更してください。

ポップアップデザイン

（イメージ）

 追加するCSS①
.satori__popup_inner #satori__form_body .satori__popup_body:before {
display: inline-block;
padding-left: 100px;
padding-top: .5em;
padding-right: .5em;
background-size: 80px 60px;
background-position: .5em .5em;
min-height: 66px;
background-repeat: no-repeat;
background-image: url("[アップロードした画像URLを記入]");
content: 'ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ'; }


注意事項

  •  ポップアップを閲覧するご利用環境によって、テンプレートに記述されているHTML・CSSの解釈が異なる場合があるため、想定されるデザインと異なるデザインで表示される可能性があります。
  • HTML・CSSの具体的な記述につきましてはサポート範囲外とさせていただいております。

この記事は役に立ちましたか？

5人中5人がこの記事が役に立ったと言っています

SATORIサポートセンターへ問い合わせる 同じカテゴリーの記事一覧に戻る

関連記事

関連記事