ノーコードプログラミングのBubbleの解説をやっていきます。
Bubbleは僕もまだまだ勉強中な部分も非常に多いので備忘的な部分も多く含めているのをご了承ください。
背景画像変更
Bubbleの画面背景画像の変更はメニューの「Appearrance」タブの「Background Style」から変更することができます。
そんな「Background Style」には「None」「Flat Color」「Gradient」「Image」「Video」の項目があります。
背景画像の変更「Background Style」
今回はそんなBubbleの「Background Style」である背景画像変更の「Image」に設定した画像がどこに保存されているかを解説していきます。
「Data」
File Manager
「Static Image」を「Image」にして画像を挿入すると「Data」メニューの「File Manager」に保存されます。
「Bubble」で背景画像の保存先を確認しよう
1-1.今回のを実行すると次のような感じになります。
画像追加先:
![Bubble_BackgroundStyle_画像追加先](https://katojishi.com/wp-content/uploads/2023/10/1-4-2.gif)
画像削除方法:
![Bubble_BackgroundStyle_画像削除](https://katojishi.com/wp-content/uploads/2023/10/1-1-2.gif)
1-2.画面上のどこでもいいので「右クリック → Edit」 or 「ダブルクリック」でメニューを開きます。
![Bubble_メニュー1](https://katojishi.com/wp-content/uploads/2023/09/1-2-1.jpg)
![Bubble_メニュー2](https://katojishi.com/wp-content/uploads/2023/09/1-2-2.jpg)
1-3.メニューの「Appearrance」タブの「Background Style」が今回の変更対象です。
(デフォルト値は「None」(背景色無し)です。
![Bubble_BackgroundStyle_None](https://katojishi.com/wp-content/uploads/2023/09/1-2-3.jpg)
![Bubble_BackgroundStyle_プルダウン](https://katojishi.com/wp-content/uploads/2023/09/1-3-2-2.jpg)
1-4.背景である「Background Style」の「Image」の「Static Image」を押下して画像を選択すると背景画像が設定されます。
![Bubble_BackgroundStyle_メニュー](https://katojishi.com/wp-content/uploads/2023/09/1-4-2-2.jpg)
![Bubble_BackgroundStyle_StaticImage_画像選択](https://katojishi.com/wp-content/uploads/2023/09/1-5-1-1.jpg)
![Bubble_BackgroundStyle_StaticImage_画像選択](https://katojishi.com/wp-content/uploads/2023/09/1-5-8.jpg)
1-5.左メニューの「Data」メニューを押下するとデータベース画面へ遷するので、「File Manager」タブを押下するとアップロードした画像の保存先へ飛ぶことができます。
![Bubble_BackgroundStyle_画像追加先1](https://katojishi.com/wp-content/uploads/2023/10/1-4-1-1.jpg)
![Bubble_BackgroundStyle_画像追加先2](https://katojishi.com/wp-content/uploads/2023/10/1-4-2.jpg)
![Bubble_BackgroundStyle_画像追加先3](https://katojishi.com/wp-content/uploads/2023/10/1-4-3.jpg)
1-6.削除したい画像にチェックを入れて「Delete」を押下するとダイアログが出るので、ダイアログで「CONFIRM」を押下すると画像を削除することができます。
(キャッシュが残っているのか削除してすぐは画像が残っている場合が多いです)
![Bubble_BackgroundStyle_画像削除1](https://katojishi.com/wp-content/uploads/2023/10/1-6-1-1.jpg)
![Bubble_BackgroundStyle_画像削除2](https://katojishi.com/wp-content/uploads/2023/10/1-6-2.jpg)
![Bubble_BackgroundStyle_画像削除3](https://katojishi.com/wp-content/uploads/2023/10/1-6-3.jpg)
今回はここまで。
次回は背景動画について解説していきます。
コメント