ポップアップデザインテンプレート

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

※ポップアップ機能についてはこちら
※ポップアップ(HTMLパーツ/カスタムフォーム)の具体的なサンプルはこちら

※ポップアップ設置用コードを設置したウェブページの設定により、「SATORI」でのプレビュー画面とは表示が異なる場合があります。

縦横比4:3の画像活用を想定したデザインテンプレートとなります。

■HTMLパーツ

利用方法)

1.適用するポップアップデザインを選ぶ

2.ソースコード・追加するCSSの組み合わせを確認して設定する

・左メニューのアクション > ポップアップ > ポップアップ新規登録 > ポップアップ設定画面でコンテンツ:HTMLパーツ > に入り、
 ①HTMLパーツ設定画面 >ソースコードを編集 を開いた画面に「ソースコード①」を貼り付け

 ②プレビュー・CSS設定 > 右側のCSS設定画面にデフォルトで記載のあるCSSの一番下に「追加するCSS②」を貼り付け

※「http://satyr.io/」部分をアップロードした画像のURLに置き換えてください。

※「ポップアップテンプレ」部分を任意の文字に変更してください。

 ポップアップデザイン

(イメージ)

 ソースコード①  追加するCSS②
01_________.PNG <div class="l-image_left">
<div class="image"><img src="http://satyr.io/?width=640&amp;height=480" 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 wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
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 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: .5em; }
   <div class="l-image_right">
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
<div class="image"><img src="http://satyr.io/?width=640&amp;height=480" alt="" /></div>
</div>
.satori__popup_inner .l-image_right {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
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 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: .5em; }
<div class="l-image_horiz">
<div class="image"><img src="http://satyr.io/?width=640&amp;height=480" alt="" /></div>
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
</div>
.satori__popup_inner .l-image_horiz {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap; }
.satori__popup_inner .l-image_horiz .image {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.satori__popup_inner .l-image_horiz .image img {
max-width: 100%;
max-height: 100%; }
.satori__popup_inner .l-image_horiz .text {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: .5em; }
<div class="l-image_horiz">
<div class="text">ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ</div>
<div class="image"><img src="http://satyr.io/?width=640&amp;height=480" alt="" /></div>
</div>
.satori__popup_inner .l-image_horiz {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap; }
.satori__popup_inner .l-image_horiz .image {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.satori__popup_inner .l-image_horiz .image img {
max-width: 100%;
max-height: 100%; }
.satori__popup_inner .l-image_horiz .text {
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: .5em; }

<div class="l-list_contents">
<ul>
<li><a href="#">
<div class="list_thumbnail"><img src="http://satyr.io/?width=80&amp;height=60" 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="http://satyr.io/?width=80&amp;height=60" 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="http://satyr.io/?width=80&amp;height=60" 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の組み合わせを確認して設定する

・左メニューのアクション > ポップアップ > ポップアップ新規登録 > ポップアップ設定画面でコンテンツ:カスタムフォーム > コンテンツ設定画面にてフォーム設定後、

 プレビュー・CSS設定 > 右側のCSS設定画面にデフォルトで記載のあるCSSの一番下に「追加するCSS①」を貼り付け

※「http://satyr.io/」部分をアップロードした画像の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: 60px;
background-repeat: no-repeat;
background-image: url("http://satyr.io/?width=80&height=60");
content: 'ポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレポップアップテンプレ'; }