> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# カラムの基本設定

${youtube}[ノーコードでカラム（列）を整えてデザインを調整！〜コネクティッドワンの使い方〜](tU5A4gNr9xQ)

# カラムの活用方法

1〜5カラムと横幅を自由に変えれます。ノーコードでデザインを調整をしていくことが可能です。


### カラムとは
カラムとは、ブロックの中の「列」のことです。1〜5カラムまで、横幅を自由に変えられます。
ノーコードで、見やすく分かりやすいレイアウトを作れます。

| カラム数 | レイアウト |
| 1カラム | 1列（横いっぱいに1つ） |
| 2カラム | 横に2列 |
| 3カラム | 横に3列 |
たとえば「画像と文章を横に並べる」「サービスを3つ並べて紹介する」といったレイアウトを作れます。
### ① カラムの幅を調整する
カラムとカラムの間にある**青い線**をクリックして、左右に動かします。
上に各カラムの幅が「％」で表示されるので、見ながら割合を調整してください。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_1f7gnmi.png)

### ② カラムの内側の余白を調整する
カラムにマウスを乗せると、ふちの内側に**薄い色の部分**が表示されます。ここが、カラムの枠と中身（テキストやボタンなど）の間の余白です。
この部分をドラッグすると、余白の広さを変えられます。
中身のまわりにすき間を作って、バランスを整えたいときに使います。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_107lcog.png)

### ③ カラムを追加する（段を増やす）
1つのブロックの中に、カラムの段を複数作れます。
**例**：2カラムの上に、見出し用の1カラムを追加する
1. 「＋」をクリックします。
2. 新しいカラムの段が追加されるので、見出しなどを入れます。
3. 必要に応じて、①の方法で幅を調整します。
**段と段の間のすき間を空けたいとき**
段と段の間のすき間は、そのままでは調整できません。【要確認：行設定の「列の間隔」との関係】
すき間を空けたいときは、カラムの中に「スペーサー」を入れて調整しましょう。
### ④ カラムの設定を変える
カラムの上のラベルをクリックすると、カラムの設定画面が開きます。カラムごとに、次のような設定ができます。
**背景**
* **背景画像**：カラムの背景に画像を入れて、その上に文章をのせられます
* **オーバーレイ**：背景画像の上に色を重ねて、文字を読みやすくできます
* **背景の位置**：背景画像のどこを見せるかを調整できます
* **背景色**：画像を使わない場合は、色だけを付けることもできます
**境界線（カラムの外側の線）**
* 線の色・太さを設定できます
* 角を丸くすることもできます
**影**
* 影を付けると、カラムが浮き上がったように立体的に見えます
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_t7w4zi.png)
### ⑤ カラムの位置をずらす
カラムを上下にずらして配置できます。【要確認：操作する項目名と手順】
3つのカラムを少しずつずらすと、**階段状**に並んだ動きのあるデザインになります。背景色を付けておくと、ずれ方が分かりやすくなります。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_1rojchv.png)

### ご注意ください
* **カラムだけをコピーすることはできません。** コピーはブロック単位になります。同じカラムを使いたいときは、ブロックごとコピーしてください。



# ページビルダー一覧


[ページビルダー概要](/ja/article/44oa44o844k444ot44or44oa44o85qac6kab-uugfod/)

[ページの追加方法](/ja/article/44oa44o844k444gu6l95yqg5pa55rov-ngabyy/)

[ブロックの活用方法](/ja/article/44ow44ot44od44kv44gu5rs755so5pa55rov-wddhzi/)

[ウィジェット追加方法](/ja/article/44km44kj44k344kz44kn44od44oi6l95yqg5pa55rov-uypahx/)

[SEOの設定方法](/ja/article/seo-12zy0jh/)

[スマホサイズのデザイン設定方法](/ja/article/44k544oe44ob44k144kk44k644gu44oh44k244kk44oz6kit5a6a5pa55rov-79dyz5/)

[購入者限定ページの作成手順](/ja/article/6lo85ywl6icf6zmq5a6a44oa44o844k444gu5l2c5oiq5oml6acg-5ohl1f/)

[ポートフォリオ機能で商品一覧・顧客の声を作成！](/ja/article/44ob44ka44o844oi44ov44kp44oq44kq5qmf6io944gn5zwg5zob5lia6kan44o76agn5a6i44gu5aow44ks5l2c5oiq77yb-gdxfxi/)




[ヘッダーを活用してホームページのメニューを最適化しよう！](/ja/article/44oy44od44k44kz44o844ks5rs755so44gx44gm44ob44o844og44oa44o844k444gu44oh44ol44ol44o844ks5pya6ygp5yyw44gx44ki44gg77yb-1bx306j/)

[コピー（複製）の仕方（ウィジェットやブロック）](https://con-one.crisp.help/ja/article/44kz44ou44o877yi6ksh6ko977yj44gu5luv5pa577yi44km44kj44k444kn44od44oi44ke44ow44ot44od44kv77yj-khqvln/)

[フッターを活用してユーザーを誘導しよう！](https://con-one.crisp.help/ja/article/44ov44od44k44o844ks5rs755so44gx44gm44om44o844k244o844ks6kqy5bco44gx44ki44gg77yb-hy2apq/)

[ページへのアクセス設定](https://con-one.crisp.help/ja/article/44oa44o844k444g444gu44ki44kv44k744k56kit5a6a-1b5nciv/)

[AIで作ったLPやウェブサイトをコネワンに表示させる方法](https://con-one.crisp.help/ja/article/ailp-1silgif/)

[ファビコンとSNS共有画像](https://con-one.crisp.help/ja/article/sns-xf0jub/)

[ファイルマネージャー](https://con-one.crisp.help/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o8-14r6elu/)

[ブロックをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-jvpdc5/)

[ブロックの表示設定（見る人・日時・国などで表示を切り替える）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44gu6kgo56s66kit5a6a77yi6kal44kl5lq644o75pel5pmc44o75zu944gq44gp44gn6kgo56s644ks5yih44kk5pu44gi44kl77yj-1qrodnx/)

[カラムの基本設定](https://con-one.crisp.help/ja/article/44kr44op44og5z65pysjuocsoodreodvoodkoodqocqodqeodooiorewumg-bf216w/)

[グローバルカラムの設定](https://con-one.crisp.help/ja/article/44kw44ot44o844oq44or44kr44op44og44gu6kit5a6a-6l3pnn/)

[カラムをタブで切り替えて表示する方法（タブモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k44ow44gn5yih44kk5pu44gi44gm6kgo56s644gz44kl5pa55rov77yi44k44ow44oi44o844oj77yj-570b6r/)

[カラムをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)