こんにちは!ノーコーダーのIKDです。
今回は、bubbleで知らないと損する画像の配置方法・編集方法などをお伝えしていきます。
画像は現在のサイトの肝です!しっかりと使えるようにしましょう。
bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
画像の配置方法
まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。
![](http://nocodewalker.com/wp-content/uploads/2020/09/名称未設定のデザイン-2-1024x576.png)
画像の配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ&ドロップするだけです!
![](http://nocodewalker.com/wp-content/uploads/2020/09/名称未設定のデザイン-11-1024x576.png)
これでOKです!
画像の編集方法
次は、画像の編集方法をやっていきましょう!
![](http://nocodewalker.com/wp-content/uploads/2020/09/①-7-1024x576.png)
- 画像をアップロードできます。
- 画像が表示されなかった時に出てきる言葉を設定できます。
- 画像をクリックできなくできます。
HTMLができる人は、理解しやすいと思います。
②には、どんな画像なのかをわかりやすく設定しておくのがいいでしょう。
最後は、画像のスタイルを編集する方法を解説していきます。
スタイルの編集方法
ここでは、画像の枠線の表示などを変更するスタイルの主な編集機能についてお伝えしていきます。
画像は、ほかに比べるとやることが少ないので、わかりやすいと思います!
![](http://nocodewalker.com/wp-content/uploads/2020/09/①-8-1024x576.png)
- スタイルを空白に設定すると自分でカスタムできるようになります。
- 画像の上にマウスが置かれた時に表示するテキストを設定できます。
- 写真の上下左右の4辺を各自いじることができます(ドットにしたり、角を丸くしたり)
- ③の作業が4辺一気に変更できます。
- 角を丸くできます。
- 画像に影を落とすことができます。
主な機能はこんな感じです!
まとめ
これまで、テキスト編やボタン編などを読んでくれている方には、特に難しい内容ではないと思います!
まだ、そちらの記事を読んでいない方は、そちらの方も参考にしてみてください。
また、実際に自分でいじってみることが上達への近道です。英語に怖がらず、頑張りましょう!
今回は以上です!また次回お会いしましょう〜
コメント
[…] […]