bubble

【bubble】魅力的なテキスト(text)の使い方

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

今回は、bubbleの操作で欠かすことが出来ないテキストの配置方法・編集方法などをお伝えしていきます。

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

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

テキストの配置方法

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

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

簡単ですよね?

テキストの編集方法

次は、テキストの編集方法をみていきましょう。

  1. テキストボックスの名前を変更できます。主にワークフローを設計するときに使用するので、出来るだけわかりやすい名前を付けましょう。
  2. テキストの本文を編集できます。
  3. テキストが長すぎる場合、設定したテキストボックスの高さに表示量を調整してくれます。
  4. テキストが予想していたテキストボックスの高さよりも低かった場合に自動でサイズを調整してくれます。
  5. BBコードの入力を受付けないようになります。
    BBコードとは
  6. リンクやメールアドレスの形式を自動で反映してくれます。
    下記画像参照

⑥にチェックを入れると

このようにリンクやメールアドレスが表示されます。

その次のワークフローはbubbleにおいて非常に重要な機能なのですが、話すと長くなるのでこちらの記事を参考にしてください。

最後は、文字の大きさや色などの設定方法を解説していきます。

スタイルの編集

最後は、文字の大きさや色などを変更するスタイルの主な編集機能についてお伝えしていきます。

画像のように、Styleをクリックして、bodyの上にある空白の部分をクリックします。

そうすると、以下のような画面に切り替わるので、重要な機能を個別に解説していきます。

  1. フォントの種類を選択できます。
  2. フォントのサイズを調整できます。
  3. Bは文字を太く、Iは斜め(イタリック調)に、Uは下線を引けます。
  4. テキストをそれぞれ左から、左揃え、中央揃え、右揃えにできます。
  5. フォントの色を調整できます。
  6. 単語と単語の幅を調整できます。
  7. 文字の高さ方向の空白を調整できます。
  8. 文字の横方向の空白を調整できます。
  9. テキストの背景に色をつけたりできます。
  10. テキストボックスを囲むことができます。
  11. テキストボックスの角を丸められます。

⑨,⑩,⑪は少しわかりにくいので、以下の画像を参考にしてください。

背景の色を変えられる
テキストボックスをドットで囲み、角を丸くできる

まとめ

始めたばかりのうちは、これだけ知っていればテキストを十分に活用することができます。

まずは機能に慣れるためにも、英語に怯まず色々な機能を触ってみることが習得へと繋がります。

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

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

【bubble】各機能の解説 まとめ①Visual elements|NoCode Walker へ返信する コメントをキャンセル

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