メディアオブジェクト

メディアオブジェクトコンポーネントは、画像、アイコン、その他のメディアを使ってコンテンツを柔軟かつ視覚的に魅力的に提示する方法を提供します。

メディアオブジェクトの設定

1. スロットにコンテンツを追加

メディアオブジェクトコンポーネントは柔軟に設計されており、テキストとメディアを簡単に使ってさまざまなレイアウトを作成できます。そのために「スロット」という仕組みを使用します：

スロットはさまざまな種類のコンポーネントを配置できるコンテナと考えてください.

メディアオブジェクトには3つのスロットがあります：

• 左スロット： テキストコンテンツの左側に表示したい画像、アイコン、その他のメディアを追加できます。

• コンテンツスロット： ここがテキストコンテンツの主要な領域です。左または右のスロットに追加したメディアと並んで配置されます。

• 右スロット： 左スロットと同様に、テキストコンテンツの右側に表示されるメディアを追加できます

メディアオブジェクトとスロットの廃棄

2. レイアウトを設定

コンテンツを追加したら、いくつかのプロパティを使ってメディアオブジェクトのレイアウトを微調整できます：

• インライン： メディアとテキストを完全に横並びに揃えたい場合は「インライン」トグルを有効にしてください。これによりメディアとテキストの上下端が揃います。

• レスポンシブ： メディアオブジェクトがさまざまな画面サイズで見栄え良く表示されるようにするには、「レスポンシブ」トグルを有効にしてください。これによりユーザーのデバイスに基づいてレイアウトが自動調整され、デスクトップやモバイル表示に最適化されます。

• 垂直位置揃え： このプロパティはテキストがメディアに対して垂直方向にどのように揃えられるかを制御します。デザインの好みや表示するコンテンツに応じて、テキストをメディアの上、中、下に揃えることができます。

• サイズ： メディアオブジェクト全体のサイズを制御するには、事前定義されたサイズ（小、中、大）から選択できます。これはメディアとテキストコンテンツの寸法に影響し、必要に応じてコンパクトなレイアウトや余白のあるレイアウトを作成できます。

利用例

• 商品一覧： 商品画像を説明文や価格と並べて表示します。

• ニュース記事： 記事の画像や著者のアバターをテキストの隣に表示します。

• ユーザープロフィール： ユーザーのアバターと名前や詳細を表示します。

• コール・トゥ・アクションセクション： 画像を魅力的なテキストやボタンと組み合わせます。

メディアオブジェクトコンポーネントを使えば、視覚的に魅力的で情報を伝えるレイアウトを作成し、コンテンツの提示を強化できます。