カスタムCSS機能を使うと、ビジュアルエディタでは設定できないスタイルの細部をコードで直接調整できます。
できること
ポップアップ本体の角丸・影・背景色の変更
見出し・テキストのフォントサイズや行間の調整
ボタンの形状・色・ホバーエフェクトのカスタマイズ
入力フィールドのスタイル変更
フェードインなどのアニメーション追加
必要条件
カスタムCSSはProfessionalプラン以上で利用できます。
設定手順
カスタマイズするディスプレイを開きます。
「デザイン設定」の「カスタムCSS」セクションを開きます。
CSSエディタに表示されるテンプレート `selector { }` を編集します。
セレクタプレースホルダーについて
テンプレートの `selector` という単語はプレースホルダーです。ディスプレイが公開されると、`selector` は自動的にそのディスプレイのみに適用される一意のCSSクラスに置き換わります。これにより、CSSはこのディスプレイのみに影響し、サイト上の他の要素には影響しません。
使えるクラス名
`selector` はディスプレイ全体のルート要素を指します。子要素を対象にする場合は、以下のクラス名を使います。
クラス名 | 対象 |
| ポップアップ本体ウィンドウ |
| コンテンツ領域 |
| 背景オーバーレイ（暗転部分） |
| 見出しコンポーネント |
| テキストコンポーネント |
| フォームコンポーネント |
| ボタンのラッパー |
| ボタン本体 |
| 入力フィールド |
| カウントダウン |
| クーポンコードテキスト |
使用例
/* ポップアップ本体の角丸と背景色 */
selector .plmw-display { border-radius: 16px; background-color: #fff8f0; }
/* 見出しのフォントサイズ */
selector .pl-heading { font-size: 24px; }
/* ボタンの色と形 */
selector button { background-color: #e85d04; border-radius: 8px; }
/* ボタンのホバーエフェクト */
selector button:hover { background-color: #c44d00; }
/* 入力フィールドの枠線 */
selector input { border: 1px solid #ccc; border-radius: 4px; }
/* 背景オーバーレイの透明度 */
selector .plmw-overlay { background-color: rgba(0, 0, 0, 0.3); }
/* ディスプレイ全体のベースフォントサイズ変更 */
selector { font-size: 14px; }
/* 表示アニメーション */
selector .plmw-display { animation: fadeIn 0.5s ease-in; }
トラブルシューティング
CSSが適用されない: セレクタが `selector` で始まっているか確認してください。CSS構文（括弧・セミコロン）が正しいかもあわせて確認します。
サイト全体に影響が出る: 必ず `selector` から始めてください。クラス名だけを書くと（例: `.pl-heading { }`）、サイト内の他の要素にも影響が出ることがあります。