> For the complete documentation index, see [llms.txt](https://docs.opusbooster.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opusbooster.com/platform/website-funnel-builder/popups.md). # ポップアップ **ポップアップを作成、デザイン、構築する方法** このガイドでは、以下のことを学びます。 * 新しいポップアップの作成方法 * 作成したポップアップの保存場所 * ポップアップビルダー：ポップアップのデザインと編集方法 * ポップアップの設定:ポップアップの位置、名前、その他の表示オプションの変更/調整方法 * ポップアップを表示または表示させるページの選択方法 ### 新しいポップアップの作成方法 新しいポップアップを作成するには、ビルダー画面を開き、**\[ページ] -> \[新しく追加する] -> \[ポップアップ]** に移動します。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252Fqd9WjVErEIrd4a7TLDmT%252FGroup%25201171280967.png%3Falt%3Dmedia%26token%3D11e3a79d-e10f-4045-b85e-990e57777b30\&width=768\&dpr=4\&quality=100\&sign=8cb6801e\&sv=1) 編集可能な既製のポップアップを選択するか、または「空のポップアップ」を選択して、ゼロから作成することができます。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252Fmg3oagPVQdKnwtQmrZjM%252Fsdssads55.PNG%3Falt%3Dmedia%26token%3Df30c57e3-58d9-48d7-8361-967a00cbccc1\&width=768\&dpr=4\&quality=100\&sign=e2212208\&sv=1) ### 作成したポップアップの保存場所 作成したポップアップを見つけるには、**\[ページ] -> \[ポップアップ]** に移動します。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252FVfngxrpx6SyaJ9I5k2P7%252FGroup%25201171280967%2520%281%29.png%3Falt%3Dmedia%26token%3D218d09d5-4258-4597-af84-29385cf7d257\&width=768\&dpr=4\&quality=100\&sign=be99e2ab\&sv=1) ### ポップアップビルダー：ポップアップのデザインと編集方法 ポップアップビルダーは、通常のページビルダーとまったく同じ外観で動作します。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252Fp2sH1sZImAvg58WOVMHe%252Fsdsdasdasdaa.PNG%3Falt%3Dmedia%26token%3Dcfc953a6-0765-497b-bab0-bd6721d2709c\&width=768\&dpr=4\&quality=100\&sign=6cf89cea\&sv=1) [ウィジェット](/platform/widgets.md)の種類に関係なく、ポップアップインターフェースにドラッグ＆ドロップすることができます。ポップアップに移動した後も、ウィジェットのすべての機能が動作し、標準のページビルダー環境内と同様に、変更、再配置、カスタマイズが可能です。 これにより、シームレスで多様な編集体験が可能になり、機能上の制限や妥協をすることなく、あなたはコンテンツを最適化し、パーソナライズする柔軟性を手に入れることができます。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252FIzLdnz8z2Gv0rpH4V9Rp%252FGroup%25201171280967%2520%282%29.png%3Falt%3Dmedia%26token%3Db96b72f5-7198-42cf-a607-972f75d3328a\&width=768\&dpr=4\&quality=100\&sign=a3758af1\&sv=1) ### ポップアップの設定:ポップアップの位置、名前、その他の表示オプションの変更/調整方法 ポップアップの一般設定にアクセスするには、ポップアップ名の隣にある**「歯車アイコン」**をクリックして**「設定を表示」**を選択するか、ポップアップ名をクリックしてポップアップを開き**、「ポップアップ設定」**を選択します。 ポップアップ設定では、ポップアップで利用可能な6つのレイアウトが表示されます。お好みのものをお選びください。 以下についても。 * ポップアップの名前（リンクを貼っておくと、ポップアップを見つけやすくなります） * ポップアップの表示オプション（ボタン/リンクをクリックしてもポップアップが表示されない場合） * どのくらいの頻度でポップアップを表示させるか * ポップアップ表示時のアニメーション ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252FSnMhmKKbaiSsbHpkg74h%252Fdsdf454.PNG%3Falt%3Dmedia%26token%3D8f61f54f-9cab-4d02-bd97-4cee014b6e2f\&width=768\&dpr=4\&quality=100\&sign=4f3f69ea\&sv=1) ### ポップアップを表示するページを選択する方法 ポップアップが自動的にトリガーされる場合は、どのページに表示するかを選択できます。 ウェブサイトのどのページにポップアップを表示するかを選択するには、ポップアップを開いて**「表示する」**オプションを選択します。ここで、ポップアップを表示するページを選択できます。 ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252FO6Jvq1FMWFQPME2eOy7x%252FGroup%25201171280967%2520%283%29.png%3Falt%3Dmedia%26token%3Dc9f88085-13d4-4362-bbd9-2f3d658b456d\&width=768\&dpr=4\&quality=100\&sign=aae370c9\&sv=1) ポップアップ コンテンツとレイアウトのスタイルを設定するには、ポップアップ名をクリックして開きます。 次に、ブラシの「スタイル」アイコンをクリックします。 これで、ポップアップ コンテンツ レイアウト設定ボックスが開きます。 ポップアップ コンテンツ レイアウトには、画像を表示する場所のオプションが表示されます。中央のオプションを選択すると、画像は表示されません。 **以下の調整も可能です。** * ポップアップ全体の背景色 * ポップアップ全体の下にある背景オーバーレイの色 * 閉じるボタンの色 * ポップアップウィンドウのパディング（余白） ![](https://buildersupport.gitbook.io/~gitbook/image?url=https%3A%2F%2F3435513056-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdG2nDIBweqHNGjfJ4NQm%252Fuploads%252F3mZTBx4DsiYvwopDsbgc%252FSDF554.PNG%3Falt%3Dmedia%26token%3D7d139afe-6055-4823-ad75-4845d64bbcba\&width=768\&dpr=4\&quality=100\&sign=1ee9f2de\&sv=1) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.opusbooster.com/platform/website-funnel-builder/popups.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.