ウィジェットのカスタマイズ方法まとめ

「レイアウト」セクションでは、ウィジェットの表示スタイルを選択できます。利用できる主なレイアウトは以下の通りです。

それぞれのレイアウトでは、デスクトップやモバイルで表示される列数を調整したり、ウィジェットに表示する投稿数を指定したりすることができます。また、テーマについてはライト、ダーク、レインボーといったスタイルから選択でき、ナビゲーションの種類も自由に設定することが可能です。

こうした詳細設定を組み合わせることで、自社サイトのデザインや利用目的に合わせて柔軟にカスタマイズできます。設定が完了したら、必ず「保存」をクリックして反映させてください。

このセクションでは、ウィジェットのヘッダー部分を自由にカスタマイズできます。ウィジェットタイトルや投稿数、サムネイル画像、ボタンなどの要素を有効・無効に切り替えることが可能です。

また、ウィジェットタイトルの設定やボタンの名称・色の変更、サムネイル写真の差し替え、ヘッダー部分の配置位置の調整など、細かなデザイン調整も行えます。これにより、サイト全体のデザインやブランドカラーに合わせてヘッダーを最適化することができます。

さらに、ウィジェット内に複数のソースを追加している場合は「ソース別にフィルタリング」オプションを有効にすることも可能です。これにより、ユーザーが表示する投稿をソースごとに切り替えられるようになります。

ヘッダー部分のカスタマイズが完了したら、必ず「保存」をクリックして変更内容を反映してください。

カード設定は、ウィジェットの中でもメインとなる部分で、実際の投稿がカード形式で表示されます。ここではカードのデザインや、カード内に表示する要素を自由にカスタマイズできます。

具体的には、ユーザー名・投稿日・投稿本文・ロゴ・アバターなどを表示／非表示に切り替えることが可能です。また、各要素の配置（左寄せ・中央揃えなど）、画像のプレビュー形式や形状も選択できます。

さらに、投稿を自動再生するオプションや、クリック時にライトボックスで拡大表示するか、元のソースページへリダイレクトするか、といった動作の設定も行えます。

さらに細かいデザイン調整を行いたい場合は、「カスタムCSS」セクションで独自のスタイルを追加できます。これにより、より自由度の高いデザインカスタマイズが可能になります。

カスタムCSSの具体的な追加方法については、以下の記事で詳しく解説していますのでご参照ください：レスポンシブWebサイトビルダーにカスタムCSSを追加する方法