すべてのコレクション
EmbedFeed エンベッドフィード
スタートガイド
ウィジェットをレスポンシブデザインで表示させる方法
ウィジェットをレスポンシブデザインで表示させる方法

ウィジェットを画面サイズやブラウザ、そしてデバイスに応じて表示させるために、レイアウト、設定、およびカスタムCSSでカスタマイズする方法についての説明

Yuka Isobe avatar
対応者:Yuka Isobe
一週間前以上前にアップデートされました

ウィジェットをカスタマイズするために、異なるレイアウトとカスタマイズオプションがあります。以下はその一部です。

レイアウト

例えば、「レイアウト」セクションでは、ウィジェットの希望するレイアウトスタイルを選択できます。以下で使用可能なスタイルを共有します:

  • フィード

  • スライダー

  • コラージュ

  • ポップアップ

そして各レイアウトスタイルについて、デスクトップビューの列数、モバイルビューの列数、ウィジェットで表示したい投稿数、ウィジェットのテーマ(ライト、ダーク、レインボー)、ナビゲーションタイプなど、デバイス別に異なる設定を選択できます。

「レイアウト」のタブでカスタマイズが完了したら、必ず変更内容を「保存」してください。

ヘッダー

ヘッダータブでは、ウィジェットのヘッダーをカスタマイズできます。具体的には、

  • ウィジェットタイトルを変更、または削除

  • 投稿数、サムネイル画像、ボタンの表示を無効/有効にするかを選択

  • ボタンの名前と色を設定

  • サムネイル画像を変更

  • ヘッダーセクションの配置を選択

などです。

もし、ウィジェットのヘッダーをカスタマイズする ウィジェットに複数のソースがある場合、ソース毎に表示させるように設定することも可能です。

「ヘッダー」セクションでカスタマイズが完了したら、変更内容を「保存」してください。

カード要素

このタブでは、投稿が配置されるカードを編集をすることができます。例えば、カードの

スタイルは下記の3種類があります。

  • 投稿の画像のみを表示するスタイル

  • 投稿のテキストをカードの上部に、画像を下部に表示するスタイル

  • そして画像が上、テキストが下に表示されるスタイル

そして、その3種類スタイル設定の他、ユーザー名、日付、説明、ロゴ、アバターなどを無効または有効にすることができます。また、投稿の要素表示方法も選択できます。

例えば、

  • 画像のプレビューと形状を選択

  • 動画投稿の場合、動画の自動再生オプションを有効にしたり、カードをクリックするとライトボックスで投稿が開く

  • カードをクリックするとリダイレクトする

以上のような設定が可能です。

「カード」セクションでカスタマイズが完了したら、変更内容を「保存」してください。

カスタムCSSセクション

カスタムCSSタブでは、追加のカスタマイズが行えます。詳細については、以下の記事をご覧ください:カスタムCSSを追加してレイアウトを調整する方法

詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。

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