> ## 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}[魅力的なデザインを構成するウィジェット追加方法〜ページビルダーの使い方〜](MTZvpu2P-eI)

# ウィジェット追加方法

ページを構成するウィジェットの追加方法です。パズルのように組み立てながら、HPやLPを作成していくことが可能です。

### ページの構成を知る
コネクティッドワンのページは、次の3つの組み合わせでできています。
```
ブロック（大きなまとまり）
　└ カラム（列）
　　　└ ウィジェット（見出し・テキスト・画像・ボタンなど）
```
「ブロックの中にカラムがあり、そのカラムの中にウィジェットを入れる」という形です。
この組み合わせ方を変えることで、自由にデザインを作れます。
### ① ウィジェットを追加する
1. 左側の「**＋ ウィジェットを追加**」をクリックします。
2. 追加したいウィジェットを選びます。
3. 選んだウィジェットを**左クリックしたまま**、置きたい場所までドラッグします。
4. マウスを離すと、そこに入ります。
**青い線が、入る場所の目印です**
* 横向きの青い線：その位置（上下）に入ります
* 縦向きの青い線：その横に並びます
ドラッグ中は、マウスの位置によって青い線の場所が変わります。入れたい場所に青い線が出たら、マウスを離してください。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_15euvjv.png)

### ② よく使うウィジェット
特によく使うのは、次の4つです。
| ウィジェット | 使い道 |
| ---- | ---- |
| 見出し | セクションのタイトル |
| テキスト | 本文 |
| 画像 | 写真やイラスト |
| ボタン | 申し込みやページへのリンク |
### ③ テキスト・見出しを編集する
ウィジェットを入れたら、そのまま文字を入力できます。
文字を選ぶと、編集のメニューが表示されます。
* 太字にする
* フォントを変える
* 文字の大きさを変える
**見出しのレベル（H1・H2・H3）**
左側のスタイルの項目から、見出しのレベルを選べます。
* **H1**：ページやブログ記事のタイトルに使われることが多い見出しです
* **H2・H3**：本文の中の見出しに使います
基本は、H2・H3を使うとよいでしょう。
### ④ 位置と幅を調整する
ウィジェットにマウスを乗せると、青い枠と矢印が表示されます。
* **上の矢印**：クリックしたまま動かすと、ウィジェットの場所を移動できます
* **右側の矢印**：クリックしたまま左右に動かすと、幅を広げたり狭めたりできます
細かく幅を調整できるのが、コネクティッドワンの特徴です。AIがバランスも整えてくれるので、きれいなデザインに仕上がります。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_1mro20r.png)

### ⑤ ボタンを設定する
ボタンを入れると、編集の項目が表示されます。
1. **ボタンのテキスト**を入力します（例：詳細はこちら）
2. **リンク先**を選びます
   * ページ：作成済みのページから、飛ばしたいページを選びます
   * ブログ：ブログの記事を選びます
3. **開き方**を選びます
   * 同じタブ：同じ画面でページが切り替わります
   * 新しいタブ：新しいタブで開きます
4. 必要に応じて、**アイコン**を追加できます
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_rgbqd7.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/)[](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)

[フリームーブモード解説：ウィジェットを自由に移動](https://con-one.crisp.help/ja/article/44ov44oq44o844og44o844ow44oi44o844oj6kej6kqs77ya44km44kj44k444kn44od44oi44ks6ieq55sx44gr56e75yuv-1x5cejf/)