![](https://cxg-design.jp/wp-content/uploads/2023/11/4814069b39869b91d4ab8b8212d39b3c.png)
ポップアップ作成プラグイン「Popup Maker」で詳細情報をボタンクリックで表示
LPはスクロールしていくと多くの情報を順番に表示できます。しかし、多数の商品を紹介する場合、詳細情報が多くなり、スクロールも長くなってしまいます。また、デザイン的にも崩れるため、個別の詳細情報は通常別ページで作成することが多いです。しかし、元々商品シングルページがない場合はポップアップで表示することも出来ます。今回はポップアップ作成プラグイン「Popup Maker」の紹介をしていきます。
![](https://cxg-design.jp/wp-content/uploads/2023/11/a087d1896fdcdea09e2e834298f38a4c.png)
出典 : Popup Maker
そもそもポップアップとは、別ページに移動せずに情報を表示する機能です。クリックするとモダールウィンドウで表示されたり、ヘッダー、フッターに現れる広告もその一種です。他には当サイトのACCESSページのように、GoogleMapを別ページに移動せずに表示したりすることもできます。今回のDEMOは、お茶のLPページをテーマに作成しました(寒くなりホットティーをよく飲むので)。
今回もブロックエディターを使用して作成しました。
商品の「商品詳細 +」ボタンをクリックすると、産地、カロリー、原材料などの詳細情報がポップアップで表示されます(実際はダミーなので具体的な内容は入力していません)。
商品の上段はメディアとテキストを横で利用しています。中段は2カラムで左に1つ、右に2つの商品を縦にで入れ、下段は、4カラムで、作成しました。中段、下段の背景色を隣のカラムの高さに合わせるため、カラムを選択し、バーから「垂直配置を変更」をクリックし、「埋めるように拡張」を選択。背景色は3色使用し、PCで見た時、できる限り隣り合わせにならないように、また、SPで1カラム縦スクロールになるの時に、上下で色が被らないようにしました。
![](https://cxg-design.jp/wp-content/uploads/2023/11/f2885d193405e1815486061bf2f454fe.png)
ボタンクリックでポッポアップを出現させます。
![](https://cxg-design.jp/wp-content/uploads/2023/11/c066a74ed24f78130eb2c807f723109c.png)
中段、下段のカラムの「垂直配置」は「埋めるように拡張」に設定。
![](https://cxg-design.jp/wp-content/uploads/2023/11/7b12ce8ea113e2ad6a944733632f25ee.png)
商品は、色が被らないように配色
では、本題のプラグインの説明です。まず、「Popup Maker」プラグインをダウンロードし有効化します。
左サイドバーからPopup Maker>Create Popupをクリックします。編集画面が表示されるので、内容を入力していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/11/24cdfa3ec92f4e94488d678bc406cbd7.png)
Popup Maker>Create Popupをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/6453d03d07277c3170d75502e0141418-1.png)
編集画面で内容を入力
「Popup Name」はファイルを管理するための名前で、任意でつけます。「Popup Title」はポップアップのタイトルで表示されるので今回は商品名を入力しています。入力欄に表示したい内容を入力します。今回テーブルを使用するのですが、「TablePress」というプラグインを使用しました。テーブルを簡単に作成できCSSでのスタイル変更もできます。
![](https://cxg-design.jp/wp-content/uploads/2023/11/567d5c6003f196b2ffe29b3d547bab82.png)
出典 : TablePress
「テーブルの内容」でテーブルを作成し、保存後ショートコードをコピーします。Popup Makerのテキスト欄にペーストします。作業を進めたら定期的に「下書き保存」をします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/7e4f5fb03ed25ad6e91c671e8f247a88-2.png)
テーブル作成後、ショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2023/11/7e3400cc15de76c84c7c8228567ddffd-1.png)
Popup Makerのテキスト欄にペースト
項目 | 設定値 |
---|---|
Popup Name | ファイル名 |
Popup Title | ポップアップのタイトル |
テキスト欄 | ポップアップの内容 |
次項からは、ポップアップの設定やデザインをテキスト欄の下の「Popup Setteings」で設定していきます。
Trigger
![](https://cxg-design.jp/wp-content/uploads/2023/11/7bb28f4db8a7eddce3729c0b9302cd81-1.png)
一番上の「Triggers」でポップアップの発生方法を設定します。今回はボタンがクリックされたときにポップアップが表示されるアクションを設定します。
右の「Add New Trigger」をクリックします。一番上のセレクトボックスの「Click Open」を選択して、「Prevent popup 〜」のチェックを外し、下の「Add」をクリックします。「Click Trigger Setting」が表示されるので、そのまま下の「Add」をクリックします。これでアクションの設定は完了です。
![](https://cxg-design.jp/wp-content/uploads/2023/11/14d45f42a04097a89994671d74a9fd31-1.png)
「Prevent popup 〜」のチェックを外し「Add」をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/901332c86615c95dfe89b138089cdab8-1.png)
「Add」をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/e65709905e32b39f4022622eeaf5252b-1.png)
クリックしたら開くアクションが設定されました。
Display
次にポップアップのデザインを変更していきます。上から3番目の「Display」をクリックします。7項目あるので順番に設定していきます。
Display Presents
![](https://cxg-design.jp/wp-content/uploads/2023/11/557de74411e333bdd14251c67bf72979-1.png)
「Display Presents」の「Center Popup」をクリックします。これで、ポップアップが画面の真ん中にモダールウィンドウで表示されます。
Appearance
![](https://cxg-design.jp/wp-content/uploads/2023/11/d2626fc90a4ea30bc0b2e23911061529-1.png)
「Appearance」で、スタイルを選択し、カスタマイズしていきます。セレクターから「Enterprise Blue」を選択します。下の「Customize This Theme」をクリックします。
項目 | 設定値 |
---|---|
Popup Theme | Enterprise Blue |
テーマのビジュアルが右に表示されるので、変更したい箇所を指定していきます。今回はオーバーレイの「Opacity」を30%に、モノトーンにしたいので「Title」の色を黒に、「Close」ボタンの「background」も黒に変更しました。
![](https://cxg-design.jp/wp-content/uploads/2023/11/34f2c3ead96e4f82e28dfb005bbe7010.png)
Overlay>Opacityを30%に変更
![](https://cxg-design.jp/wp-content/uploads/2023/11/6d35920777f3b493c81153a7b58d61e6.png)
Title>Font>Colorを黒に変更
![](https://cxg-design.jp/wp-content/uploads/2023/11/f6f20a7bb48c0b519ed853626f5c5db4.png)
Close>Background>Colorを黒に変更。
Size
![](https://cxg-design.jp/wp-content/uploads/2023/11/fd5609665229e692cb5a44907f043e9b-1.png)
「Size」で画面に対するポップアップの大きさを指定します。PCでは画面の幅に対して0%、SPでは90%の設定にしました。
項目 | 設定値 |
---|---|
Size | Medium-60% |
Min Width | 0% |
Max width | 90% |
Animation
![](https://cxg-design.jp/wp-content/uploads/2023/11/0f167371ed215e214c14d27c68b846a8-1.png)
「Animation」では、ポップアップ表示時のアニメーションを設定します。今回はデフォルトのままです。
項目 | 設定値 |
---|---|
Animation Type | Fade |
Animation Speed | 350ms |
Sounds
![](https://cxg-design.jp/wp-content/uploads/2023/11/4297537f4dda490e7109df2fd32177ed-1.png)
「Sounds」ではポップアップが表示される時の音を指定できます。音を出したくないので、デフォルトのまま「none」にしておきます。
項目 | 設定値 |
---|---|
Opening Sound | None |
Position
![](https://cxg-design.jp/wp-content/uploads/2023/11/ec13b108a01c6d826b86b4955b544565-1.png)
「Position」は、POPアップの画面に対する位置を指定しますが、デフォルトのまま「Middle Center」にします。「Fixed Positioning」にチェックを入れて、ポップアップ時、スクロールしても動かない設定にします。
項目 | 設定値 |
---|---|
Location | Middle Center |
Top | 100px |
Position from Trigger | チェック無 |
Fixed Positioning | チェック有 |
Advanced
![](https://cxg-design.jp/wp-content/uploads/2023/11/17e6d630a8ae7eeef3e66b7dfb3b8119-1.png)
「Popup Z-Index」で右上ハンバーガーメニューの上にポップアップが表示されるように設定しました。
項目 | 設定値 |
---|---|
Disable Overlay | チェック無 |
Stacable | チェック無 |
Disable Repositioning | チェック無 |
Popup Z-Index | 999999 |
Close
![](https://cxg-design.jp/wp-content/uploads/2023/11/c5c8dd3e1afa16c67fa772819d717689-1.png)
Close>Alternate Methodsから、オーバーレイをクリックするとポップアップが閉じるようにします。
項目 | 設定値 |
---|---|
Click Overlay Close | チェック有 |
Press ESC to Close | チェック無 |
Press F4 to Close | チェック無 |
以上でポップアップの設定は終了です。編集画面上の「Preview」をクリックして表示を確認し、OKなら「公開」をクリックします。ポップアップを複製し、タイトルとタキストを変更し、他のポップアップを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/11/ab19bc14f6f1d200d96e06a718a3b505-2000x1156.png)
「Preview」で確認
![](https://cxg-design.jp/wp-content/uploads/2023/11/e65709905e32b39f4022622eeaf5252b-1.png)
OKなら「公開」をクリック
設置方法
最後に設置方法です。Poupu Maker>All Popupsをクリックし、設定するポップアップの「CSS Class」をコピーします。投稿を開き、設置するボタンをクリック。右サイドバーのブロック>設定>高度な設定の「ADDITIONAL CSS CLASS(ES)」にペーストします。
これで設置完了です。プレビューを確認して、OKなら他のボタンにも設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/11/97a322b531f2b50a8a33c0daea31c958.png)
「CSS Class」をコピー
![](https://cxg-design.jp/wp-content/uploads/2023/11/ad79816e5415bece4cb2a2acde218df1.png)
ボタンを選択し、「ADDITIONAL CSS CLASS(ES)」にペースト
![](https://cxg-design.jp/wp-content/uploads/2023/11/76700f07d6a2af3e2b0d1c6ceec736ce-1.png)
プレビューで確認
今回はプラグインでポップアップを作成しました。通常JavaScriptで実装するのですが、プラグインだとブロックエディターで使用できるので、LP作成時などに簡単に設定できます。
Webサイト作成のお問い合わせは、コンタクトフォームよりよろしくお願いします。