ノーコード bubble_ロゴ、Text 、Styleの設定
ノーコードbubbleで作ったごく簡単なトップページ。左にずらっと並んだどのUI Builder（ユーアイ ビルダー）を使って作ったかの解説です。詳しい操作方法ではなくここではイメージを掴んで頂ければと思います。
Text、Button、Iconなど適切なUI Builderを選択して右の画面にでクリックやドラッグ&ドロップしてサイトを制作していきます。
９つのUI Builder で作ったページ
- サイトの一番上、ヘッダーと言われる白い帯
- 左上のロゴ（桜マーク）
- それぞれのページに飛ぶリンクメニュー１〜３
- 右上のカート（クリックするとショッピング履歴、マイページの小窓が開きます）
- 右上の３本線、ハンバーガーメニュー（パソコンでは表示されずスマホで見た時に表示されます。その時は左のメニュー１〜３が非表示に）
- メイン画像（ミモザの花）
- サイトの説明テキスト「ノーコードBubbleの練習」
以上９つ（メニューが３つとして）のパーツから出来ているトップページです。
左上のロゴ（桜マーク）
左のUI Builderの中の「Image 」を選んでから編集画面でクリックするとImageA(Aは順番にBC~と名前が付きます。変更出来ます）の黒い窓が現れます（開かない場合も度々あるのでその場合はサイトに置いたImageをダブルクリックなど）。ここで色々な設定が出来ます。
今あるロゴを変更します。clearで一旦削除します。
（新規はこの状態から始まります）Uploadをクリック、
窓が開くのでファイルを選びます。
サイトの説明テキスト「ノーコードBubbleの練習」
Textを選んで編集画面でポチッとすると色々な設定が出来る黒い窓が現れます。一番上の所に書いた文字がサイト上に表示されます。黒い窓をスクロールした下の方で、、
styleがありここを空欄にすると文字のフォント、サイズ、太さ、揃え方、色、文字の間隔などの設定が表示されます。
色を赤、Letter spacingを１から５に変更してみました。Letter spacingは文字と文字の隙間を調整するものでゆったりした感じになります。逆に−２などにすると窮屈な印象になります。
Styleを設定する
プログラミングで言うCSS、デザインを決める作業です。
CSSって？
CSS（Cascading Style Sheets カスケーディング・スタイル・シート）とはウェブページのデザインやレイアウト、見栄えを変えるためのコンピュータ言語です。
CSS有りと無しを比べるとこんな感じです。「なし」は初期のHPみたいになっています。背景の緑色もCSSでカラー指定しているのです。
テキストを選択した状態でstyleの中のBody（Body Copydでも何でもOKです）を選んでみます。この「Body」には文字の大きさ、色などbubbleがあらかじめ設定したデザインがあります。Edit styleを見るとその内容が分かります。
このようなページが開きます。左がstyles（つまりデザイン）になっていて、先ほど選んだBodyも確認できます。Bodyのデザイン内容が右です。
ここの設定を変えて
左のタブのDesignを選ぶと
編集ページに戻れます。戻ってみると「ノーコード〜」の文字の色がstylesで設定したものに変更されています。
左からTextを選んで右の画面でポチッとして
何か適当に文字を打って、黒い窓の下の方の
styleをBodyにします。今後このプロジェクト内で文字を書いてstyleでBodyを選んだ物は全部このデザインが適用されます。
じゃあ、いくつかstyleを作っておいて使い分けるとデザインの統一感が出るし楽だね
style考え方
style名をA、B、Cとしそれぞれのデザイン内容を設定をします（設定は他にも項目がありますがここでは３項目だけで）。一番右がそのstyleを当てて出来た結果です。
「今週の注目商品」にはstyle Bを、「ワニ」と「説明あああ〜」にはstyle Cを、「詳しくはこちら」のボタンにはstyle Aを当てました。
styleを変更すればそのstyleを当てている文字全部のデザインを一気に変更出来るので管理が楽です。Bのサイズと色、Cの色を変更しました。
