ポップアップデザイン変更用カスタムCSS

最終更新日:

ポップアップ(HTMLパーツ)でご利用頂けるカスタムCSSをご用意しております。

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

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

利用方法

適用するカスタムCSSを選び、設定する

・左メニューのアクション > ポップアップ > ポップアップ新規登録 > ポップアップ設定画面でコンテンツ:HTMLパーツ > プレビュー・CSS設定 > 右側のCSS設定画面に選択した「カスタムCSS」を貼り付け

 

ポップアップデザイン

(イメージ)

カスタムCSS
1

【右上・右下】

ポップアップの角を丸くする

ポップアップをブラウザから離す

ラインカラーをなくす

丸型ボタン

190308_____________1.PNG

【削除するCSS】

「/* 右下ポップアップラインカラー -----*/」

「/* 右上ポップアップラインカラー -----*/」

「/* 中央ポップアップラインカラー -----*/」

「/* クローズボタン -----*/」

 

【追加するカスタムCSS】

※ページ下部から「カスタムCSS_1.txt」のファイルをダウンロードしてください。

 

2

【中央・右下】

閉じるボタンに任意のテキストを表示させる

■通常の表示

190308_____________2.PNG

■最小化した場合の表示

190308____________2-1.PNG

【削除するCSS】

「/* クローズボタン -----*/」

 

【追加するカスタムCSS】

※ページ下部から「カスタムCSS_2.txt」のファイルをダウンロードしてください。

※「閉じる」「お問い合わせ」部分の文言を任意の文言に変更可能です。

 

3

【右下】

閉じるボタンに任意のテキスト(全幅)を表示させる

■通常の表示

190308_____________3.PNG

■最小化した場合の表示

190308_____________3-1.PNG

【削除するCSS】

「/* クローズボタン -----*/」

 

【追加するカスタムCSS】

※ページ下部から「カスタムCSS_3.txt」のファイルをダウンロードしてください。

※「何かお困りですか?」「お問い合わせ」部分の文言を任意の文言に変更可能です。

 

 

 

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

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