ボタンの使い方
ボタンの使い方
ボタンの色一つでも、クリック率が変わってきます。思わずクリックしたくなるように、色々と検証しながら作成をしていきましょう！
- コネクティッドワンでは、ボタンがウィジェットとして提供されています。
- ドラッグ＆ドロップの簡単な操作で、ウェブサイト内の任意の場所にボタンを追加できます。
- ボタンのテキスト、クリック時の動作、デザイン、アニメーションなどを細かく設定できます。
- さらに、ブロック型のボタンや、コールトゥアクション用のパーツも用意されており、簡単に利用できます。
ボタンの追加手順
1. ウィジェットの追加
コネクティッドワンの編集画面で、ボタンを追加したい場所に「ウィジェットを追加」します。
ウィジェットの一覧から 「ボタン」を選び、ドラッグ＆ドロップでウェブページ内の任意の場所に配置します。
ボタンの基本設定
1. ボタンテキストの編集
配置したボタンをクリックし、「編集」を選択します。
表示される設定画面の「ボタンテキスト」欄に、ボタンに表示したい文字を入力します（例：「詳細はこちら」）。
- テキストは2行にすることも可能です。
- テキストの太字設定や、左右・中央揃えの配置も行えます。
2. クリック時の動作設定
設定画面の「クリックで開く」項目で、ボタンをクリックしたときの動作を設定します。
設定できる動作
- ページ遷移：内部の「現行追加」ページを選択します。
- 外部リンク遷移：URLを入力します（例：公式サイトのURL）。
- リリック（ポップアップ表示など）を設定することも可能です。
- *
ボタンのデザイン設定
1. 基本デザイン
設定画面の「デザイン」タブで、ボタンの見た目を細かくカスタマイズできます。
設定できる内容
ボタンの色
- 「ボタンの地」背景色を設定します（初期設定ではグローバルスタイルの基調色）。
- 「ホバー色」で、カーソルを合わせたときの色を設定できます。
文字の色
- 「文字」テキストの色や、ホバー時の文字色を設定します。
境界線
- 「惑星枠」で境界線の色や太さを設定します。
**サイズと間隔 **
- 「文字と間の空き」でボタン内の余白を調整します。
- ボタン全体の幅も調整可能です。
丸角
- 「コーナー」でボタンの角の丸み具合を設定します。
グラデーション
- 「グラデーション」で、立体感を演出できます。
- 線形や放射状などの種類、開始色・終了色も細かく設定できます。
2. アニメーション
設定画面の「アニメーション」タブで、ボタンの表示時やマウスオーバー時の動きを設定できます。
選べる効果例
- フェードイン、ズームなど
- ホバー時に色が変化する
- テキストがスライドする
- ポップアップする動き など
3. 影の設定
- ボタンに影をつけることで、より立体的なデザインにできます。
- 外側の影、内側の影などを自由に設定できます。
- *
テキストの装飾
- アイコン追加
- 「文字」の前後にアイコンを追加することができます。
- *
代替方法
1. 日本語ブロック型
ブロックを追加する際に、「日本語ブロック型」の中からボタン風のパーツを選ぶこともできます。
2. コールトゥアクション
- 「コールトゥアクション」のパーツにも、ボタン型の要素が含まれています。
プレビューと保存
- 設定変更後は、プレビュー機能でボタンの見た目や動作を確認しましょう。
問題がなければ、「保存」ボタンをクリックして変更内容を確定します。
ウィジェット一覧
更新日 02/07/2025
ありがとうございます