シニアから始めるbubble! TPを作りましょうPart 6.
記事学び
最後にフッターを作りましょう！フッターの内容は色々ありますが
今回はSNSのロゴから移動する設定をします。
・Groupフッターを作る
ContainersにあるGroupをドラッグ＆ドロップでGroup理念の下に
配置します。
Groupフッターとします。
Layout Container layout→Row
Horizontal alignment左から2番目をクリック
Min width 1200px
Make this element fixed-width のチェックを外す
Min height 60px
Make this element fixed-height のチェックを外す
Fit height to content にチェックを入れる
Appearance Background style→Flat color
Color #FFFFFF
Border style-all borders→solid width 1
Color #082747
出来ましたか？
次はSNSのロゴをフッターに作ります。
・SNSのロゴを作る
1.SNSのロゴ1個を作る
Group理念の中にVisual elementsにあるIcon をドラッグ＆ドロップで
配置します。
Layout Width 40px
Make this element fixed-width のチェックをする
Height 40px
Make this element fixed-height のチェックをする
Vertical alignment 中央をクリック
Appearance Icon→Twitterを検索
Icon color→#1CACE0
2.SNSロゴ3種類を作る
1.で作ったTwitterのロゴを2個コピーをします
Appearance IconでFacebookを検索します。
Icon color→＃385398
IconでYouTubeを検索します。
Icon color→＃FE0000
3種類のロゴをShiftを押さえて右クリックしてGroupにします。
Group elements in→Row containerでGroupにする
Group ロゴとします。
Layout Min width 200px Fit height to contentにチェックをする。 Min height 40px
3種類を均等に配置するためにContainer alignment 右から2番目をクリック
3.会社名
フッターの中にVisual elementsにあるTextをGroupロゴの左側に置く
文字・文字サイズ・Colorをお好きに作ってください
Center the text verticallyにチェックをしてください
会社名とGroupロゴを両端に配置するには どうするかをやってみて
ください！
・SNSに移動する
SNSのロゴをクリックしたら各SNSに移動するように設定をしましょう。
bubbleで動きを設定するにはWorkflowで設定します。
初めは分からないかもしれませんが真似をしてください
TwitterロゴのAppearanceのAdd workflowをクリックするとWorkflowに
移動します。
アイコンTwitterをクリックしたらどう動かすか！
動きをClick here to add an actionをクリックすると色々と出ます。
Navigation→Open an external websiteをクリック！
DestinationにTwitterのURLを入力したらTwitterに移動します。
プレビューで確認してください Facebook・YouTubeも同様に設定
してください
Facebook
YouTube
出来ましたか‼
これでTPの完成です。お疲れ様でした。
準備編～Part.6まで見ていただいて ありがとうございました。
bubbleはWorkflowとDateでSNS・売買できるサイトなど多くの
アプリ開発ができます。
お見苦し箇所もあり申し訳ございませんでした。
また機会がありましたら宜しくお願い致します。
