レスポンシブバンドルで作業する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポーネントビルダーでは、異なるブレークポイント向けに設計されたバージョンをバンドルすることでレスポンシブコンポーネントを作成できます。ウェブページに挿入すると、コンポーネントが表示される画面サイズに応じてバンドルのレンダリングが異なります。
レスポンシブバンドルを作成して使用するには:
-
コンポーネントを作成し、ステージングします。すべてのブレークポイントに対して1つのバージョンのみのデフォルトバンドルが自動的に作成されます。
-
元のコンポーネントを好きなだけ複製し、各バージョンのブレークポイントを設定します。例えば、超小ブレークポイント用に「 Small devices 」、中ブレークポイント用に「 Medium devices 」、大、超、特大ブレークポイント用に「 Large devices 」というバージョンを作成できます。
-
各バージョンは表示されるデバイスを意図した幅に合わせて設計してください。特定のバージョンに加えられた変更は、そのバージョンで選ば れたすべてのブレークポイントサイズ に適用されます。バージョン上のラベルを使って、特定のブレークポイントでバージョンがどのようにレンダリングされるかを確認できます。
-
デザインが完成したら、バンドルに加えたいバージョンの上にある 「ステージ 」をクリックしてください。
あるいは、このコンポーネントのすべてのバージョンをステージ化するには、バージョン以外のどこかをクリックして右側のペインで 概要 を開き、その後 「ステージアップ全体」をクリックしてください。
-
ブレークポイントが正しいバージョンで定義されているか確認するには、概要 ペインの レスポンシブバンドル セクションで 「デフォルトバンドル」をクリックします。オプションで、ドロップダウンリストで正しいバージョンをクリックして特定のブレークポイントの他のバージョンを定義することもできます。クリック可能にするには、該当するブレークポイントに合わせて設計・ステージングされている必要があります。
-
特定のバージョンをPage builderでスタンドアロンのコンポーネントとして利用可能にするには(ウェブページでレスポンシブバンドルを使いたくない場合)、概要 パネルの 「Specific versions 」セクションで「 Pages内で利用可能なバージョン」をクリックし、「 特定のバージョンとして使用を許可する」を選択してください。
-
レスポンシブバンドルや特定のバージョンをウェブページで使いたい場合は、「Pages」に移動し、コンポーネントをページ内の該当するプレースホルダーにドラッグしてください。右側のペインで、レスポンシブバンドルまたは使いたい特定のバージョンを選択します。
あるいは、レスポンシブバンドルや特定のバージョンを自分のページビルダーで作成したウェブページで使いたい場合は、「 埋め込みコードを取得」をクリックしてください。