WordPressにポップアップを設置しよう『Popup Maker』

左側メニューにPopup Makerが追加されます。

Create New Popupをクリックします。

●Popup Name

ポップアップファイル名（日本語OK）

●Popup Title

ポップアップ内に表示されるタイトル（空欄OK)

メインウインドウにポップアップの内容を入力します。
ビジュアル・テキストどちらでも使いやすい方で設定できます。
右端のタブをクリックして切り替えできます。

下にスクロールし、メインウインドウの下のPopup Settingsウインドウで設定します。
Settingsウインドウ内の左側、Triggersをクリックします。

Triggers

ポップアップを開くトリガーを設定します。
【Add New Trigger】ボタンをクリックすると、New Triggerウインドウが開きます。

プルダウンメニューから

●What kind of trigger do you want?

Time Delay / Auto Openを選択
（時間遅延/自動オープン）
ページを表示すると同時にポップアップを表示させる設定

●Prevent popup from showing to visitor again using a cookie?

チェック
（クッキーを使用して、ユーザーにポップアップが再度表示されないようにしますか?）
→チェックを入れると追加メニュー表示

●top showing popup once visitor takes this action

On Popup Closeを選択　
（クッキーが残るユーザーにはポップアップをすぐ閉じる⇒表示しない）

【Add】ボタンをクリックし保存します。
→Time Delay Settingsウインドウに遷移します。

●Delay

「トリガーから何秒後にポップアップを表示するか」の設定です。
ページを表示すると同時にポップアップを表示させる場合は「0ｍs」と入力します。

●Cookie Name

クッキーを設定している場合はここにクッキー名が表示されます。

【Add】ボタンをクリックし保存します。
ウインドウが閉じます。

メインウインドウの下のPopup Settingsウインドウに戻りました。
下段の「Cookies control the repeat display of a popup.」にOn Popup Closeの設定が追加されています。
ここでクッキーの有効期限の設定をします。
［Actions］の下の設定変更マークをクリックします。

Cookie Settingsウインドウが表示されます。

Cookie Settingsウインドウ

●Cookie Name

クッキー名が表示されています。

●Cookie Time

クッキーの有効期限を設定します。
単位はseconds/minute/hour/day/monthです。
今回は10分後に再表示したいので「10minute」と入力しました。

【Update】ボタンをクリックし保存します。

Popup Settingsウインドウに戻りました。
トリガーを設置するページを設定します。

左メニューから［Targeting］を選択します。

プルダウンメニューから

• HomePage
• 固定ページ：ID
• All投稿
• カテゴリー：selected

などを選択します。右のエリアにはページIDやカテゴリー名などを入力します。

さらに［+AND］をクリックし指定を追加できます。

今回はホームにアクセスしたらポップアップを表示する設定なので「HomePage」を選択しました。

●Disable this popup on mobile devices.
●Disable this popup on tablet devices.
にチェックを入れると、モバイルやタブレット表示の際にポップアップを無効にします。

デザインをカスタマイズします。

Popup Settingsウインドウの左メニューから［Display］を選択します。

Display Presets

ポップアップの表示される位置とデザインを設定します。
今回は『Center Popup』を選択します。

Appearance

デザインを設定します。

プルダウンメニューから
今回は『Default Theme』を選択します。

Size

表示サイズを設定します。

プルダウンメニューから
今回は『Auto』を選択します。

Animation

表示アニメーションを設定します。

プルダウンメニューから
今回は『Fade』を選択します。

追加表示されたAnimation Speedは「500ms」とします。
0.5秒かけてフェードインするようになります。

Sounds

ポップアップが表示されるときに音を鳴らす設定です。

プルダウンメニューから
今回は『None』を選択します。

Position

ポップアップを表示する場所を設定します。

Locationプルダウンメニューから
今回は『Middle　Center』を選択します

Advanced

なにも変更しないでOKですが、それぞれ
・オーバーレイを無効にする
・ポップアップを積み重ね表示
・ウィンドウのサイズを変更しても配置が固定される
・ポップアップのZインデックス値
の設定です。

右メニューの『保存』または『更新』ボタンをクリックし保存します。

さらにデザインの詳細を設定します。
再度 Appearance を選択します。

［Customize This Theme］をクリックすると
Edit Popup Themeに遷移します。
選択したポップアップのデザインをカスタマイズするページです。

Edit Popup Theme

デザイン名を付けます。

右メニューに『Theme Preview』があり、大まかなデザインがプレビューされます。

Overlay

画面全体を覆う背景色を設定します。

Color：背景色
Opacity：透過度（数値が大きいほど濃い）

Container

ポップアップ本体の設定です。

［Container］

Padding：枠から内容までのスペース
Border Radius：角の丸さ

［Background］

枠の色と透過度を設定します。

Color：背景色
Opacity：透過度（数値が大きいほど濃い）

［Border］

Style：枠の線種
Color：枠の色
Thickness：枠線の太さ

［DropShadow ］

Color：枠の影の色
Opacity：影の濃さ（数値が大きいほど濃い）
Horizontal Position：影が横にずれる
Vertical Position：影が上下にずれる
Blur Radius：影のぼやけ具合（数値が大さいほどぼやける）
Spread：影の範囲が広がる
Inset (inner shadow)：Yesにすると影が枠の中に入る

Title

ポップアップのタイトルの設定です。
『ポップアップの作成』で作り込んでいる場合は、
［Font］［Text Shadow ］ともに無視してOKです。

Content

本文の文字設定です。
『ポップアップの作成』で作り込んでいる場合は、
無視してOKです。

Close

閉じるボタンの設定です。

［General］

Close Button Text：表示内容（閉・Close・× など）
Position Outside Container：ボタンの位置が枠側になる
Location：ボタンの位置を枠内のいろいろな場所に設定できる

今回は『Top Right』を選択
追加で表示される「Top」「Right」それぞれの数値を調整します。マイナス値にすると枠からはみ出ます。

［Size］

ボタンの背景のサイズの設定です。

Padding：Close Button Textで設定した内容の周囲のスペース
Height：高さ
Width：幅
Border Radius：角の丸さ

［Background］

ボタンの背景の色と透過度の設定です。

Color：背景の色
Opacity：透過度（数値が大きいほど濃い）

［Font］

ボタンの表示内容（閉・Close・×などの文字）の設定です。

［Border］

ボタンの枠線の設定です。

［DropShadow］

背景の影の設定です。

［TextShadow］

表示内容のテキストの影の設定です。

設定し終わったら『公開』もしくは『更新』をクリックし保存します。
ポップアップのデザイン設定が終わりました。

左メニューの［All Popups］をクリックすると、作成したポップアップの一覧画面になります。

作成したポップアップの編集をクリックし、デザイン設定を続けます。

Popup Settingsウインドウ

Close

［Button］

すでに設定しているので、なにもせずにOKです。

［Form Submission］

フォームのボタン操作などで使用する項目なので、今回はなにもせずにOKです。

［Alternate Methods］

閉じるボタンのほかにポップアップを閉じる設定です。

• オーバーレイをクリック
• ESCキーを押す
• F4キーを押す

問題がなければすべてチェックを入れてOKです。

Advanced

今回はなにもせずにOKです。

右メニューの『更新』ボタンをクリックし保存します。

左メニューのAll　Popups　をクリックし、作成したポップアップの一覧画面にします。

作成したポップアップ名の右のトグルスイッチをオンにすると、Targetingで設定したページにポップアップが表示されるようになります。