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

最終更新日:

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

ポップアップ(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」のファイルをダウンロードしてください。

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

 

 

 

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

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