bubble

【bubble】画像をアップロードする方法

こんにちは!ノーコーダーのIKDです。

今回は、bubbleでの画像の配置方法・編集方法などをお伝えしていきます。

画像一つでアプリの印象がガラッと変わりますから、しっかりと使えるようになりましょう!

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

画像(image)の配置方法

まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。

画像の配置方法は、画像のようにimageをクリックし、右の空白にドラッグ&ドロップするだけです!

このように、透明の枠が出ていればおっけーです!

画像(image)の編集方法

次は、ざっと編集方法をみていきます。

  1. ここから画像をアップロードすることができます。
  2. オンライン上に転がっている画像のURLを入力すると表示することができます。
  3. bubbleから画像を探すことができます。(遅いし少ないのであまりお勧めしない)
  4. 画像が何らかの理由で表示されないときに代わりのテキストを設定できます。
  5. 画像をクリックできないようにできます。

③は、こんな感じで画像を検索できます。

画像を選択して、IMPORTをクリックすると

きちんと表示できました!

スタイルの編集方法

最後は、画像(image)のスタイル編集についてお伝えしていきます。

  1. ここを空欄にすると、独自にスタイルを設定できます。
  2. 画像の上にマウスをおいたときにテキストを表示できます。
  3. 上下左右の線を独自に設定できます。(線や点線で囲える)
  4. 上下左右の線を一括で設定できます。
  5. 画像の角を丸くできます。
  6. 画像の内外に影を設定できます。
  7. ページが表示されたときに画像を表示するかを選べます。
  8. 横幅を固定することができます。

特に変わった事はありませんね!この辺は特に設定しなくても問題ない部分ですが、百聞は一見に如かず、自分でも試してみましょう!

まとめ

今回は、画像(image)について解説してきました。

テキストやボタンと比べても、難しいところはあんまりなかったと思います!

画像は、bubbleでの設定というよりは、撮る段階・加工の段階で勝負が決まると思っています。

bubbleでは表示させるだけのイメージでいた方が、いいアプリができるかも知れません笑

今回は以上です!また次回お会いしましょう〜

ABOUT ME
IKD
UI/UXで差をつけろ | ノーコード関連のライター | プログラミングはたしなむ程度

COMMENT

メールアドレスが公開されることはありません。