【Bubble】画面の背景の画像をカスタマイズしようPart3 ~ ノーコードプログラミングを学ぼう ~ #9

Bubble

ノーコードプログラミングの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_画像追加先


画像削除方法:

Bubble_BackgroundStyle_画像削除




1-2.画面上のどこでもいいので「右クリック → Edit」 or 「ダブルクリック」でメニューを開きます。

Bubble_メニュー1


Bubble_メニュー2




1-3.メニューの「Appearrance」タブの「Background Style」が今回の変更対象です。
(デフォルト値は「None」(背景色無し)です。

Bubble_BackgroundStyle_None


Bubble_BackgroundStyle_プルダウン




1-4.背景である「Background Style」の「Image」の「Static Image」を押下して画像を選択すると背景画像が設定されます。

Bubble_BackgroundStyle_メニュー


Bubble_BackgroundStyle_StaticImage_画像選択


Bubble_BackgroundStyle_StaticImage_画像選択




1-5.左メニューの「Data」メニューを押下するとデータベース画面へ遷するので、「File Manager」タブを押下するとアップロードした画像の保存先へ飛ぶことができます。

Bubble_BackgroundStyle_画像追加先1


Bubble_BackgroundStyle_画像追加先2


Bubble_BackgroundStyle_画像追加先3




1-6.削除したい画像にチェックを入れて「Delete」を押下するとダイアログが出るので、ダイアログで「CONFIRM」を押下すると画像を削除することができます。

キャッシュが残っているのか削除してすぐは画像が残っている場合が多いです

Bubble_BackgroundStyle_画像削除1


Bubble_BackgroundStyle_画像削除2


Bubble_BackgroundStyle_画像削除3





今回はここまで。

次回は背景動画について解説していきます。

コメント