ボタンの使い方

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

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

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

ボタンの追加手順

1. ウィジェットの追加

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

ボタンの基本設定

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

配置したボタンをクリックし、「編集」を選択します。
表示される設定画面の「ボタンテキスト」欄に、ボタンに表示したい文字を入力します（例：「詳細はこちら」）。

テキストは2行にすることも可能です。
テキストの太字設定や、左右・中央揃えの配置も行えます。

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

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

設定できる動作

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

ボタンのデザイン設定

1. 基本デザイン

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

設定できる内容

ボタンの色

「ボタンの地」背景色を設定します（初期設定ではグローバルスタイルの基調色）。
「ホバー色」で、カーソルを合わせたときの色を設定できます。

文字の色

「文字」テキストの色や、ホバー時の文字色を設定します。

境界線

「惑星枠」で境界線の色や太さを設定します。

サイズと間隔

「文字と間の空き」でボタン内の余白を調整します。
ボタン全体の幅も調整可能です。

丸角

「コーナー」でボタンの角の丸み具合を設定します。

グラデーション

「グラデーション」で、立体感を演出できます。
線形や放射状などの種類、開始色・終了色も細かく設定できます。

2. アニメーション

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

選べる効果例

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

3. 影の設定

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

テキストの装飾

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

代替方法

1. 日本語ブロック型

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

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

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

プレビューと保存

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

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

ウィジェット一覧

フリー画像素材の活用

注文概要の作成

ボタンの使い方

見出し&テキストの活用方法

画像の追加&設定方法

メニューを好きな場所に追加しよう！

フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜

クイズフォームの使い方

チェックアウトフォーム設定

カウントダウンタイマー機能を活用しよう！

ファイルマネージャー（アップロード&ダウンロード方法）

音声メディアを作ろう!

画像の埋め込み方法

スペーサー

プログレスバー

区切り線の設定

アコーディオン

更新日 12/04/2025