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