Bubbleのスタイル

このページでは、デザインを決める時にも必要な設定となるBubbleのスタイルについて記載

①Styleとは

各エレメントの見た目を設定する画面

②Buttonエレメント

４種類のスタイルが用意されている

「₊Add styile 」で新規スタイルを作成できる

③Buttonエレメントの新しいスタイルの作成と設定

1. 新規スタイルを追加し、ボタンの見た目を任意で設定する
2. 完了したら、スタイル用のページを作成する
   1. ページ名：style
3. ボタンを任意の位置に設置し、エディター>styleにて作成したボタンのスタイルを選択

④Style作成の補足

1. エディター>styleの選択にない設定（個別に設定）をしたい場合

   1. Remove styleで、現在のスタイルを削除すると、エディター上で個別に設定変更させることができる

2. 変更したデザインをもとにスタイルを作成したい場合

   1. エディター>styleの選択メニュの最下部にある「Create a new style」から新しいスタイルを作成作成できる

3. 作成したスタイルを「デフォルト」に設定したい場合

   1. Stylesの画面へ移動>デフォルトにしたいボタンを選択>Make this style the defaule for all new Buttonsをクリックする

4. 新規スタイルの名前のつけかた

   1. 「デフォルトのスタイルよりも上」にStyleで表示させたい時、「最初に'_'」をつけると良い
   2. 一目で、「フォントサイズ、色、フォントファミリー、形状」がわかるようにつけると良い
      1. 例）_14_Blue_Times_round20
   3. テキストエレメントは多くのstyleが必要になるため、「わかりやすい情報」でstyleを保存しておく必要がある

⑤スタイルを使用するメリット

作業効率がUPする

• 共通したスタイルであれば、「一度の修正」で一括反映されるため
• Reusable element（数ページに設置したヘッダーを一括で編集できるGroup)と同じメリットがある