アクションを促すボタンをスタイルする.
各ボタンの目立ち具合を決めます。ソリッドボタンは最も望む1つのアクションを示し、隣のアウトラインボタンは競合せずに代替案を提供します。このページではそのペアのスタイル方法と各設定の変更内容を説明します。ボタンの追加とリンク設定はボタンの追加をご覧ください。
動画では下記の手順に従います。Apply nowをメインボタンにし、アウトラインの2つ目のボタンを追加しています。
メインと2つ目のボタンをスタイルする
ページ上のボタン(例: Apply now)から始めます。
- ボタンにホバーしてMore > Settingsを開きます。
- 設定するのはTypeで、Primaryにします。
- 設定するのはSizeで、LargeにしてSaveをクリックします。
- ボタンに再度ホバーしてMore > Cloneを開きます。コピーは元のすぐ下に表示されます。
- コピーのMore > Settingsを開きます。Titleを変更します(例:
Download brochure)。あわせてLinkも変更します。 - オンにするのはOutline styleで、Saveをクリックします。
- ツールバーのSaveをクリックします。
アクションごとにスタイルを選ぶ
| アクション | スタイル | 例 |
|---|---|---|
| 最も望む1つのアクション | ソリッドのPrimary | Apply now |
| 代替案 | Outline style、同じType | Download brochure |
| 軽微なアクション | Link。テキストリンクのような見た目 | Read the terms |
| 警告または最終手順 | DangerまたはWarning | Cancel my booking |
1セクションにソリッドボタンは1つにし、訪問者がクリック場所を一目でわかるようにします。ラベルは結果を表す文言にします。"Get started"のように。"Click here"は避けます。"Send message"のように。"Submit"は避けます。
表示内容
カラムには2つの大きなボタンが積み重なります。テーマのプライマリー色のソリッドボタンと、同色の枠線・テキストのアウトライン付きです。ソリッドボタンが先に目を引きます。編集中はリンクが開きません。テストするにはページを保存し、ビューメニュー(目のアイコン)を開いてPreviewを選びます。
設定
| 設定 | 動作 | デフォルト |
|---|---|---|
| Type | 色のスタイル。Primary、Secondary、Success、Info、Warning、Danger、Link、Light、Dark。色はテーマから取得します | Primary |
| Outline style | 色付きの枠線とテキスト(塗りなし) | オフ |
| Size | Normal、Large、Small | Normal |
| Block button | カラムの全幅にボタンを広げます | オフ |
| Link target | Same windowまたはNew window。Linkに値がある場合にのみ表示されます | Same window |
テーマ作成者向け：各TypeはBootstrapクラスbtn-<type>(例: btn-primary)を追加します。Outline styleオン時はbtn-outline-<type>になります。ただしLinkは常にbtn-linkのままです。Largeはbtn-lg、Smallはbtn-sm、Block buttonはbtn-blockを追加します。
スタイルが表示されない場合
- アウトライン付きボタンに枠線がありません。 TypeがLinkで、常にテキストリンクのように見えるため、Outline styleは効果がありません。アウトライン付きボタンには別のTypeを選びます。
- ボタンがほとんど消えています。 Lightは白に近いため、白いセクションに溶け込みます。より濃いTypeを選ぶか、セクションに背景色を付けます。
- リンクが同じタブで開きます。 Link targetがSame windowで、Linkに値がある場合にのみ表示されます。先にLinkを入力し、次にNew windowを選びます。