オブジェクト：コンテンツBOX

概要 #

コンテンツBOXは、テキスト・画像・ボタンなど複数の要素を1つのまとまりとして整理・装飾できる汎用オブジェクトです。
用途に応じて「イメージスタイル」「リンクスタイル」「ボタンスタイル」などのテンプレートを選ぶことで、情報の見せ方にバリエーションを持たせることができます。
デザインの一貫性を保ちながら、ユーザーに伝えたい情報を視覚的にわかりやすくまとめるのに適しています。
商品紹介やお知らせ、ガイド情報、キャンペーンバナーなど、幅広いシーンで活用できます。

コンテンツBOXの説明 #

コンテンツBOXの追加方法 #

コンテンツBOXは、複数の要素（テキスト・画像・ボタンなど）をひとまとめにして整理できる便利なオブジェクトです。
グループ化して見せたい情報がある場合に活用できます。

1. 左側の「オブジェクト」セクションを展開します。
2. 一覧の中から 「コンテンツBOX」 を探します（四角い枠の中に線があるアイコン）。
3. 「コンテンツBOX」オブジェクトをクリック、またはキャンバス上にドラッグ＆ドロップします。
4. 追加後、BOX内にテキストや画像、ボタンなどの他オブジェクトを自由に配置できます。

コンテンツBOXは、構造的なレイアウトを作成する際や、背景色や枠線を使って情報を強調したいときに効果的です。

  #

コンテンツBOX選択画面の説明 #

コンテンツBOXスタイルの選択画面について #

コンテンツBOXオブジェクトをキャンバス上にドラッグ＆ドロップすると、自動的にスタイル選択画面が開きます。
この画面では、用途に応じたデザインテンプレートを選択できます。

• イメージスタイル1〜3： 画像を中心としたレイアウトで、視覚的なインパクトを重視した構成です。
• ボタンスタイル1： 強調されたボタンと説明文を組み合わせたデザインです。
• リンクスタイル1・2： 文章主体でリンク誘導を目的としたシンプルなレイアウトです。

スタイルを選ぶことで、見た目の統一感を保ちつつ、目的に応じた情報表示が可能になります。
選択後は、各要素（テキスト・画像・ボタンなど）を個別に編集できます。

イメージスタイルの設定項目の説明 #

イメージスタイルの設定項目について #

コンテンツBOXで「イメージスタイル」を使用した場合、右側の「コンテンツ設定」タブに以下の項目が表示されます。

1. イメージ選択
   表示する画像を設定します。「画像を選択する」ボタンをクリックすると、画像アップロードや既存画像の選択が可能です。
2. 幅
   表示される画像の幅をパーセンテージで調整します（例：100%、75%、50% など）。
   スライダーまたは数値入力で自由に調整でき、レイアウトに合わせて画像サイズを最適化できます。

これらの設定により、ビジュアル要素を効果的に表示し、ユーザーに印象づけるコンテンツ構成が可能になります。

その他のスタイルの設定項目の説明 #

ボタンスタイル・リンクスタイルの設定項目について #

コンテンツBOXで「ボタンスタイル」や「リンクスタイル」を選択した場合、設定パネルには以下の項目が表示されます。

1. 幅
   コンテンツBOX全体の横幅を調整できます。
   スライダーまたは数値入力によって、％（パーセンテージ）単位で自由にサイズを変更可能です。
   レイアウトに合わせて「100%」で横幅いっぱいに表示したり、「50%」で中央寄せにするなど、柔軟な調整が行えます。

※「フォント」「デザイン」「レイアウト」「表示設定」などの詳細タブも展開可能で、スタイルに応じた装飾や余白調整が行えます。

操作説明 #

コンテンツBOXを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

コンテンツボックス選択 #

コンテンツボックスのスタイルを選択します。

コンテンツボックスを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. コンテンツボックスを複製します。
3. コンテンツボックスを削除します。
4. ブロックに保存します。

コンテンツ設定 #

イメージスタイル #

1. イメージ画像を選択します。
2. 幅を設定します。

リンクスタイル2 #

1. アイコンを選択します。
2. アイコンカラーを選択します。
3. アイコンのサイズを設定します。

フォント #

1. フォント設定を変更したいテキストを選択します。
2. フォント形式を設定します。
3. フォントを選択します。
4. テキストカラーを選択します。
5. テキスト背景カラーを選択します。
6. フォントサイズを設定します。
7. 行間を設定します。
8. 文字間を設定します。
9. 配置を選択します。

デザイン #

デザインの項目を変更することでコンテンツボックスのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでコンテンツボックスのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでFAQの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでFAQの垂直方向の配置を変更できます。
6. Z-indexを設定することでFAQの重なり順を設定することができます。

表示設定 #

表示設定を変更することでコンテンツボックスを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。