> 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/widgets/container-widget.md). # コンテナウィジェット {% hint style="info" %} コンテナウィジェットを使用すると、特定のコンテナ、またはブロックと呼ばれる部分に追加のウィジェットを追加することができます。 {% endhint %} ウェブサイトに**コンテナウィジェット**を追加する方法について。コンテナを追加するには、まず「**ウィジェット**」に移動し、「**コンテナ**」を選択してください。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2F3eN971BCSvtmoW9ebKlF%2Fsendly%20container%20widet.PNG?alt=media\&token=5fd6cccd-4f91-40f4-a0cf-1b1a8b2b4098) コンテナを設置したら、様々な設定を利用して、ページのセクションを完璧に作成およびデザインすることができます。 **コンテナ設定**について詳しく見ていきましょう。 以下の項目が表示されます： 1. ブロック設定 2. カラム設定 3. ブロック表示タブ 4. ブロックを追加 コンテナ内では以下の編集が可能です： * 背景色 * ビデオの追加 * グラデーション * オーバーレイ * 形状分割 * アンカーポイント ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FpQmrnSI51mgu9CFKrpMt%2Fcontainer%20settings.PNG?alt=media\&token=5cc08bd1-dc11-4d52-be12-5a215c8e9e1a) ### コンテナ要素 詳細に入る前に、主要なコンテナ要素を見てみましょう。 コンテナやブロックと同様に、分割を行って複数の横列（行）や縦列（カラム）を作成することができます。以下の画像は、コンテナ/ブロックが3つのにカラム（列）に分割されている様子を示しています。 この操作を行うには、選択したコンテナ/ブロックの上部にマウスをホバーします。最大5列に分割できるボタンが表示されます。 {% hint style="info" %} 各列は必要な幅に調整できます。また、各列に枠線や異なる色を追加することも可能です。 {% endhint %} ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FQXZGUcvwglfJgcCY1Gyb%2Fcontainer%20split%20horizontal%20columns.PNG?alt=media\&token=e73d6ed5-ac0f-4d02-a4d6-52398c716a9e) 下の画像では、カラムに色を追加しているため、何を意味しているのかが視覚的にわかります。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FtDwEIiNqFHcLdCM3k158%2Fcontaiiner%20columns%203.PNG?alt=media\&token=5b632a4c-ee74-4f9e-b0fa-45c97da17001) コンテンツにカラムを使う方法を説明する前に、縦列（行）を作成する方法について説明します。新しい行を追加して、先ほど作成した3列の上または下に配置することができます。先ほど作成したカラムをクリックすると、プラス＋のアイコンが表示されます。これをクリックすると、例えば上に新しい行が追加されます。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FN8bVZqteKw4pkpEs4eez%2Fcontainer%20add%20vert%20column.PNG?alt=media\&token=e7d3a84a-5de3-4d5d-a93d-67ed1185d972) 下の画像は、先ほど作成したカラムの上に新しい行を追加したところです。今回は2つのカラムに分割しました。参考として、白と黒を使っています。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FgaWOdcVRdnqLfUHKGMZE%2FCONTAINER%20VERT%20AND%20HOR%20COLUMN.png?alt=media\&token=d5f8895e-1030-446d-b2ad-36b40d98c077) これで、以下を含む１つのコンテナができました： * 2列の行 * 3列の行 ### グローバルカラム グローバルカラムは、複数のページで同じブロックを使用したい場合に、デザインのスピードアップに役立ちます。グローバルカラム設定を使用すると、1か所で更新するだけで、同じグローバルカラム情報を持つすべてのカラムに変更が反映されます。 まず、グローバルカラムにしたいカラムを選択します。次に、設定のポップアウトに移動し、「これはグローバルカラムです」を選択します。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FbHJ1CGs4y9WrsCmYKsNt%2Fcontainer%20global%20column.png?alt=media\&token=af1eb790-fe17-404a-a59d-3defe10c8064) 選択するとドロップダウンメニューが表示されますが、初めて操作する場合は、以下のように1つのオプションしか選択できません： ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FlozsiYITsiLLrwwJbh6K%2Fcontainer%20create%20global%20column.PNG?alt=media\&token=00a0864e-5a98-43c5-8ff8-e04bcdfa4ad2) このオプションを選択した後、カラムの名前を付けて保存をクリックします。これで、選択したカラムがグローバルカラムになりました。つまり、このカラムを複数のページにコピー＆ペーストした場合、一つのグローバルカラムを編集すると、他のすべてのグローバルカラムにも変更が反映されます。 下の画像に表示されているのは、グローバルカラムに変更したカラムです。ここにある他のカラムは影響を受けません。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2F6HZYKj148K1zVEKqRFaJ%2Fcontainer%20global%20column%20created.png?alt=media\&token=7a9b8789-30bc-45a2-86ba-d138335155e0) カラムを削除または名前を変更する必要がある場合は、オプションの選択を解除するか、「名前を変更」テキストをクリックしてください。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FVN16k6DZBffu5GnjZ4Cf%2Fcontainer%20removing%20global%20column.PNG?alt=media\&token=8e9b6440-cc78-4afe-bf99-a965f5977d65) ### アンカーポイント アンカーポイントとは、ウェブサイトのセクションのことで、訪問者がテキスト内のリンクやコールトゥアクションボタンをクリックしたときに移動させたい場所のことです。 例えば、ウェブサイトに特定のセクションへ移動させたいボタンがある場合、訪問者がそのボタンをクリックすると、アンカーポイントが設定されたセクションに直接移動します。 アンカーポイントを追加する方法： 「コンテナの設定」→「アンカーポイントを選択」→「アンカーポイントにラベルを付けて参照できるようにする」最後に、ボタンなどのコールトゥアクションがある場所に、アンカーポイントのリンクを追加してください。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FzL5PoEmf68D0uCMksrzg%2Fcontainer%20anchour%20point%20selection.PNG?alt=media\&token=2ed5b4fa-e9a9-4e70-a833-b5c67f4775e7) コールトゥアクションからアンカーポイントを追加する 起点となるコールトゥアクションを選択します。この場合はボタンを使用します。 アンカー ポイントを選択 > 次に、アンカー ポイントが配置されているページ/セクション、またはファネルのステップを選択します。 以前にラベルを付けたのと同じラベルが付けられます。 必要に応じて、「モバイルとデスクトップ」の異なるデバイスで異なるアンカーポイントを設定することができます。 ドロップダウンメニューにアンカーポイントが表示されない場合は、アンカーポイントを保存したことを確認してください。そうすれば、ドロップダウンメニューに表示されるようになります。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FLMvblMxGeAIs3rwOyW8y%2Fcontainer%20anchor%20point%20url.PNG?alt=media\&token=ed640542-71a0-4d7a-891e-ccdb00c370c2) ### **コンテナの追加設定** コンテナで設定できることは、 * コンテナの遅延 * コンテナのドラフトを隠す/作る * ブロック/コンテナの位置決め **コンテナの遅延**は、すべてのウィジェットの遅延と同じように機能します。あなたのウェブサイトを訪問した人に、コンテナ全体が表示されるタイミングを選択することができます。 コンテナを**非表示**にするかドラフトにすると、ウェブサイトの訪問者からそのコンテナ全体が見えなくなります。 そして最後に、**ブロック/コンテナの位置決め**です。これは、コンテナをページ内で素早く上下に移動させる方法です。 ![](https://1369750374-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWQDl1MvGQxbiNyVOzW8v%2Fuploads%2FLLEjFUpD1GxCVSqSRf3b%2FCapture.PNG?alt=media\&token=8c1823a0-9790-4ea3-8d88-3fd674dd13e1) --- # 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/widgets/container-widget.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.