カラム

概要 #

カラムは、セクション内に複数の要素を横並びで配置するためのレイアウト構成パーツです。
1カラム、2カラム、3カラム、4カラムなど、目的に応じた構成を選択することで、テキストと画像を左右に並べたり、特徴紹介を等間隔に配置したりすることができます。
各カラムの幅や余白は個別に調整可能で、レスポンシブ対応（画面幅に応じた自動調整）にも対応しています。
視覚的なバランスや情報のグルーピングに優れた柔軟なデザイン設計が可能となるため、ページの見やすさ・使いやすさの向上に貢献します。

カラムの説明 #

カラムの追加方法 #

カラムは、セクション内で左右に要素を並べて配置したいときに使用するレイアウト部品です。以下の手順で追加できます。

1. 左側メニューの 「カラム」 を展開します。
2. 目的のカラム構成（例：1カラム、2カラム、3カラムなど）を選びます。
3. ドラッグ＆ドロップでページ上のセクション内に追加したい位置に配置します。

カラムを追加することで、テキストと画像を左右に並べたり、3列で特徴を見せるなどの柔軟なレイアウト設計が可能になります。
各カラムの幅は後から個別に調整できます。

  #

カラムの設定の説明 #

カラムの設定項目について #

カラムを選択すると、右側の「カラム」設定パネルに以下の項目が表示され、横幅の調整が可能です。

• ① 幅
  カラム全体の幅をスライダーまたは数値入力で設定できます。
  ページ幅に対してカラムをどの程度の広さにするかを視覚的にコントロールできます。

この設定を使うことで、1カラム表示・左右2分割・非対称3分割など、柔軟なレイアウト調整が可能になります。

  #

スマートフォン表示時の説明 #

スマートフォン表示では、複数のカラム（列）を使用している場合でも、**すべてのカラムが縦方向に自動的に並び替えられます**。
これは、スマートフォンの狭い画面でも内容が読みやすくなるように設計されており、ユーザーが横スクロールせずに快適に閲覧できることを目的としています。

例えば、2カラムや3カラムのレイアウトを設定していても、スマートフォンでは「カラム1 → カラム2 → カラム3…」という順番で**縦に1列ずつ表示**されます。
そのため、カラム内の順序や構成は、スマートフォン表示を想定して内容の順番を意識して設計することを推奨します。

操作説明 #

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

カラムを選択すると右上にサブメニューが表示されます。

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

カラム #

1. カラムの幅を設定します。

デザイン #

デザインの項目を変更することでカラムのデザインを変更できます。

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

レイアウト #

レイアウトの項目を変更することでカラムのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 水平方向の項目を変更することでカラムの水平方向の配置を変更できます。
3. 垂直方向の項目を変更することでカラムの垂直方向の配置を変更できます。
4. Z-indexを設定することでカラムの重なり順を設定することができます。

表示設定 #

表示設定を変更することでカラムを表示したり非表示にする条件を設定できます。

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

その他 #

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