メインコンテンツにスキップ

ブレイクポイントの設定方法

ウィジェットをサイトで表示させる際に、ブレイクポイントを指定する方法を紹介します。

田中理央 Rio avatar
対応者:田中理央 Rio
昨日アップデートされました

新機能「ブレイクポイント」のご紹介

新しい設定「ブレイクポイント」が登場しました!これにより、ウィジェットが異なるデバイスや画面サイズに応じて最適に表示されるよう、レスポンシブデザインを細かくカスタマイズできるようになります。

ブレイクポイントで利用可能なオプション

1. ページ幅を親ページに合わせる

このオプションを有効にすると、埋め込んだコンテンツの幅が、自動的に親ページや親コンテナの幅に合わせて調整されます。これにより、ウィジェットが自然にページ全体のレイアウトに馴染み、シームレスな統合が実現します。

※このオプションを有効にするには「フィード」レイアウトを選択する必要があります。

1. 「レイアウト」に進み、「フィード」を選択してください。

2.「一般設定」の中で「親ページから幅を取得」を有効にしてください。

以上で完了です!

2. カスタムブレイクポイントの設定

次に、カスタムブレイクポイントを追加する方法です。カスタムブレイクポイントを設定することで、任意の画面サイズに応じてウィジェットの表示を調整でき、デザインの柔軟性が高まります。

このオプションを有効にするには、以下の手順を行ってください:

  1. 「レイアウト」に移動し、「フィード」を選択します。

そしてカード設定に進み、「メディアカード」以外の任意のカードを選択してください。

そのうえで、「カード」タブ内で プロダクト(商品) オプションを有効化するか、または 「カードの高さを揃える」 を無効化してください。

あるいは、「メディアカード」を選択したままでも、この設定を有効化することが可能です。その場合は、商品(Products) を有効にし、画像の形を 元の比率に合わせる(Fit to original) に設定する必要があります。

「メディアカード」を選ぶには、「カード」タブを開き、3番目のオプションを選択してください。

カード要素の設定画面で 「商品(Products)」 を有効にしてください。

画像の形の設定で 「元のサイズに合わせる(Fit to original)」 を選択してください。

その後、「レイアウト」タブ内に カスタムブレイクポイント(Custom breakpoints) を有効化するオプションが表示されます。

これで完了です!以上で任意の画面サイズを設定できるようになります。

こちらの回答で解決しましたか?