こんにちは！ノーコーダーのIKDです。
今回は、bubbleであるとお洒落になるアイコンの配置方法・編集方法などをお伝えしていきます。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
アイコンの配置方法
まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。
アイコンの配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ＆ドロップするだけです！
出来ましたか？
アイコンの編集方法
次は、アイコンの編集方法をみていきましょう。
- アイコンの種類を変更できます。めちゃめちゃたくさんあるので、選び放題です。
- チェックを入れると回転します。
- クリックできなくできます。
- マウスを上に載せると文字が出るようになります。
アイコンはこの数倍あります。
回ります。
設定した文字が出ます。確認は、左上のプレビューから行えます。
どうですか？前回解説した、テキストの使い方よりもシンプルでわかりやすいんじゃないでしょうか？
最後は、スタイルの編集のやり方について解説していきます。
スタイルの編集
ここでは、アイコンの色や枠線の表示などを変更するスタイルの主な編集機能についてお伝えしていきます。
- スタイルを空白に設定すると自分でカスタムできるようになります。
- アイコンの色を変更できます。
- 背景に色をつけたり、画像を配置できます。
- アイコンを囲む枠の上下左右を個別に設定できるようになります。
- 枠線を点線などに変更できます。
- アイコンを囲む枠の角を丸くできます。
- 先ほど『アイコンの編集④』でやったテキストに影がつきます。
- アイコンの内側や外側に影がつけられます。
- W:幅 H:高さ X,Y:開始位置 が設定できます。
わかりづらいところは、画像で確認していきましょう。
⑤,⑥を適応すると、このようになります。
⑦にチェックを入れると、若干テキストが薄暗くなります。
⑧を編集すると、このように押し込めるボタンっぽく出来ます。これを利用してシンプルなボタンも作れそうですね。
まとめ
アイコンは、アプリをアプリらしくする上では欠かせない存在です。
統一感を出すためにも、アイコンは是非使えるようにしておきましょう！
今回は以上です！また次回お会いしましょう〜
コメント
[…] 【bubble】オシャレなアイコン(icon)の使い方 こんにちは！ノーコーダーのIKD… […]