> ## 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}[思わずクリックしたくなるボタンを作ろう！〜コネクティッドワンの使い方〜](QOyjIxO4338)

# ボタンの使い方

ボタンの色一つでも、クリック率が変わってきます。思わずクリックしたくなるように、色々と検証しながら作成をしていきましょう！

* コネクティッドワンでは、ボタンがウィジェットとして提供されています。
* ドラッグ＆ドロップの簡単な操作で、ウェブサイト内の任意の場所にボタンを追加できます。

* ボタンのテキスト、クリック時の動作、デザイン、アニメーションなどを細かく設定できます。
* さらに、ブロック型のボタンや、コールトゥアクション用のパーツも用意されており、簡単に利用できます。

### ボタンの追加手順

#### 1. ウィジェットの追加

コネクティッドワンの編集画面で、ボタンを追加したい場所に「ウィジェットを追加」します。
ウィジェットの一覧から 「ボタン」を選び、ドラッグ＆ドロップでウェブページ内の任意の場所に配置します。

### ボタンの基本設定

#### 1. ボタンテキストの編集

配置したボタンをクリックし、「編集」を選択します。
表示される設定画面の「ボタンテキスト」欄に、ボタンに表示したい文字を入力します（例：「詳細はこちら」）。
    
* テキストは2行にすることも可能です。
* テキストの太字設定や、左右・中央揃えの配置も行えます。

#### 2. クリック時の動作設定

設定画面の「クリックで開く」項目で、ボタンをクリックしたときの動作を設定します。

**設定できる動作**

* **ページ遷移**：内部の「現行追加」ページを選択します。
* **外部リンク遷移**：URLを入力します（例：公式サイトのURL）。
* **リリック**（ポップアップ表示など）を設定することも可能です。

* \*
### ボタンのデザイン設定

#### 1. 基本デザイン

設定画面の「デザイン」タブで、ボタンの見た目を細かくカスタマイズできます。

**設定できる内容**

**ボタンの色**

* 「ボタンの地」背景色を設定します（初期設定ではグローバルスタイルの基調色）。
* 「ホバー色」で、カーソルを合わせたときの色を設定できます。
        
**文字の色**
      
* 「文字」テキストの色や、ホバー時の文字色を設定します。
        
**境界線**
        
* 「惑星枠」で境界線の色や太さを設定します。
        
\*\*サイズと間隔  \*\*
    
* 「文字と間の空き」でボタン内の余白を調整します。
* ボタン全体の幅も調整可能です。
        
**丸角**
       
* 「コーナー」でボタンの角の丸み具合を設定します。
        
**グラデーション**
      
* 「グラデーション」で、立体感を演出できます。
* 線形や放射状などの種類、開始色・終了色も細かく設定できます。

#### 2. アニメーション

設定画面の「アニメーション」タブで、ボタンの表示時やマウスオーバー時の動きを設定できます。

**選べる効果例**

* フェードイン、ズームなど  
* ホバー時に色が変化する    
* テキストがスライドする    
* ポップアップする動き など

#### 3. 影の設定

* ボタンに影をつけることで、より立体的なデザインにできます。    
* 外側の影、内側の影などを自由に設定できます。

* \*

### テキストの装飾

* **アイコン追加**
* 「文字」の前後にアイコンを追加することができます。

* \* 

### 代替方法

#### 1. 日本語ブロック型

ブロックを追加する際に、「日本語ブロック型」の中からボタン風のパーツを選ぶこともできます。

#### 2. コールトゥアクション

* **「コールトゥアクション」**のパーツにも、ボタン型の要素が含まれています。

### プレビューと保存

* 設定変更後は、プレビュー機能でボタンの見た目や動作を確認しましょう。    

問題がなければ、「保存」ボタンをクリックして変更内容を確定します。

# ウィジェット一覧

[フリー画像素材の活用](/ja/article/unsplash-33ih4h/)

[注文概要の作成](/ja/article/5roo5pah5qac6kab44gu5l2c5oiq-1qzddd8/)

[ボタンの使い方](/ja/article/44oc44k44oz44gu5l244ge5pa5-qn58hv/)

[見出し&テキストの活用方法](/ja/article/6kal5ye644gxjuodhuocreocueodioobrua0ueuqoawueazlq-f4tkge/)

[画像の追加&設定方法](/ja/article/55s75yop44gu6l95yqgjuiorewumuawueazlq-y3wxbz/)

[メニューを好きな場所に追加しよう！](/ja/article/44oh44ol44ol44o844ks5aw944gn44gq5ac05oma44gr6l95yqg44gx44ki44gg77yb-lfzcdq/)

[フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜](/ja/article/44ov44kp44o844og44gu5l244ge5pa544cc44gk5zwp44ge5zci44kp44gb44cb44oh44or44oe44ks44cb44ki44oz44kx44o844oi44gq44gp44cc-1vur3i/)

[クイズフォームの使い方](/ja/article/44kv44kk44k544kz44ov44kp44o844og44gu5l244ge5pa5-1lg35ja/)

[チェックアウトフォーム設定](/ja/article/44ob44kn44od44kv44ki44km44oi44ov44kp44o844og6kit5a6a-3kf0xy/)

[カウントダウンタイマー機能を活用しよう！](/ja/article/44kr44km44oz44oi44oa44km44oz44k44kk44oe44o85qmf6io944ks5rs755so44gx44ki44gg77yb-1cdh60i/)

[ファイルマネージャー（アップロード&ダウンロード方法）](/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o877yi44ki44od44ox44ot44o844ojjuodgoocpuodsodreodvoodieawueazle8iq-1fkvgfo/)

[音声メディアを作ろう!](/ja/article/6zz5aow44oh44oh44kj44ki44ks5l2c44kn44gg77yb-wgcq1l/)

[画像の埋め込み方法](/ja/article/5yuv55s744gu5zl44kb6l6844g5pa55rov77yb-9ulw60/)

[スペーサー](/ja/article/44k544oa44oz44k144o8-1in3yb2/)

[プログレスバー](/ja/article/44ox44ot44kw44os44k544oq44o8-621ukm/)

[区切り線の設定](/ja/article/5yy65yih44kk57ea44gu6kit5a6a-724dr0/)

[アコーディオン](/ja/article/44ki44kz44o844oh44kj44kq44oz-ardokk/)

[地図を入れてみよう！](https://con-one.crisp.help/ja/article/google-2mi0u/?bust=1751420716231)

[コードを埋め込んでみよう！](https://con-one.crisp.help/ja/article/html-i59b2o/?bust=1751420606583)

[スライダーの活用](https://con-one.crisp.help/ja/article/44k544op44kk44oa44o844gu5rs755so-rq0oh8/?bust=1751420472886)

[埋め込みの活用](https://con-one.crisp.help/ja/article/5zl44kb6l6844g44gu5rs755so-12426x5/?bust=1751420707630)

[ブログ一覧をサイトの好きな場所に設置](https://con-one.crisp.help/ja/article/44ow44ot44kw5lia6kan44ks44k144kk44oi44gu5aw944gn44gq5ac05oma44gr6kit572u-18j5acg/?bust=1751420712044)

[画像ウィジェット](https://con-one.crisp.help/ja/article/55s75yop44km44kj44k444kn44od44oi-2n2ogq/)

[アイコンリスト](https://con-one.crisp.help/ja/article/44ki44kk44kz44oz44oq44k544oi-1pcdrdj/)

[見出しチップ（ピル型見出し）](https://con-one.crisp.help/ja/article/6kal5ye644gx44ob44od44ox77yi44ou44or5z6l6kal5ye644gx77yj-1ih71av/)
[](https://con-one.crisp.help/ja/article/6kal5ye644gx44ob44od44ox77yi44ou44or5z6l6kal5ye644gx77yj-1ih71av/)

[チームメンバー](https://con-one.crisp.help/ja/article/44ob44o844og44oh44oz44oq44o8-n2fgf1/)

[統計カウンター](https://con-one.crisp.help/ja/article/57wx6kii44kr44km44oz44k44o8-9c7uw8/)

[チャート](https://con-one.crisp.help/ja/article/44ob44oj44o844oi-x0hjvy/)

[料金](https://con-one.crisp.help/ja/article/5paz6yer-ys4hgc/)

[料金比較](https://con-one.crisp.help/ja/article/5paz6yer5qu6lyd-1lf6kot/)

[動画によるお客様の声](https://con-one.crisp.help/ja/article/5yuv55s744gr44ki44kl44gk5a6i5qey44gu5aow-4k3hd/)

[画像比較](https://con-one.crisp.help/ja/article/55s75yop5qu6lyd-1vs0sxl/)

[画像自動ローテーション](https://con-one.crisp.help/ja/article/55s75yop6ieq5yuv44ot44o844og44o844k344on44oz-pv1554/)

[画像ホットスポット](https://con-one.crisp.help/ja/article/55s75yop44ob44od44oi44k544od44od44oi-1jg8n12/)

[タイムラインウィジェット](https://con-one.crisp.help/ja/article/44k44kk44og44op44kk44oz44km44kj44k444kn44od44oi-668dre/)

[お客様の声ウィジェット](https://con-one.crisp.help/ja/article/44gk5a6i5qey44gu5aow44km44kj44k444kn44od44oi-1c2jpjr/)

[テーブル](https://con-one.crisp.help/ja/article/44og44o844ow44or-9v90ox/)

[ソーシャルプルーフ](https://con-one.crisp.help/ja/article/44k944o844k344oj44or44ox44or44o844ov-yfiulq/)

[スクロールテキスト](https://con-one.crisp.help/ja/article/44k544kv44ot44o844or44og44kt44k544oi-h3c5uc/)