【Bubble】テキストの色や太さ、大きさなどを部分的に変える方法

テキストの色や太さ、大きさなどを部分的に変える方法

こんにちは!EPICs合同会社です!

今回も記事をご覧いただきありがとうございます!

本記事ではノーコードツール「Bubble」で開発をしているアプリ内にて、「テキストの色や太さなどを部分的に変える方法」を解説します!

今回の解説にて、「テキストの色を変えたいけど、全部の色が変わっちゃう、、、」というようなお悩みが解消できると思います!

動画解説バージョンはこちら!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

下記の画像のように同じテキストボックス内の文字の表示形式を部分的に変える方法をお伝えします!

実装手順

以下の手順で実装します。

  1. 方法①Rich text editor
  2. 方法②BBコードを利用

方法①Rich text editor

配置しているテキストの一部分だけ、表示方法を変える一つ目の方法は「Rich text editor」を利用する方法です。

まずは色などを変更したいテキストを選択しましょう。次に「Appearance」の中にある「Rich text editor」を開きます。

この「Rich text editor」内で色や太さ、大きさを変えることが可能です!

「Rich text editor」では紹介した、「色」「太さ」「大きさ」以外にも、「フォント」「斜線」「テキストのリンク化」などなど、様々な編集が行えます!

是非どんな活用ができるか試してみてください!

方法②BBコードを利用

二つ目はBBコードを利用する方法です。

BBコードとはすごく簡単に言うと、テキストの表示形式を変更できるHTMLコードを簡略したようなものです!

正確なBBコードの意味を理解したい方はこちらを参照してみてください!

こちらも同じく表示形式を変更したいテキストを選択して「Appearance」を開きます。

次に入力テキストの前後にBBコードを加えましょう。

色を変えるときの加え方、太さを変えるときのBBコードの加え方は下記です!

活用内容入力方法入力例
カラーネームを指定して色を変える場合[color=#FFAAFF](色を変えたいテキスト)[/color](テキスト)[color=red]こん[/color]にちは
カラーコードを指定して色を変える場合[color=#FFAAFF](色を変えたいテキスト)[/color](テキスト)[color=#FFAAFF]こん[/color]にちは
太文字にする場合[B](太くしたいテキスト)[/B](テキスト)[B]こん[/B]にちは
色を変えて太文字にもする場合[B][color=#FFAAFF](太さと色を変えたいテキスト)[/color][/B](テキスト)[B][color=#FFAAFF]こん[/color][/B]にちは

Bubble上で、上記の「色も変えて太文字にもする場合」の設定をすると下記のようになります!
※「こんにちは」の「こん」だけ色と太さが変わる設定をしています。

これでBBコードを直接入力する方法も以上です!

最後に

今回2つの方法を紹介させていただきました。

基本はRich text editorが簡単かつある程度の状況下であれば不便なく活用できるとは思います。

しかしながら二つ覚えたほうがいい理由は一定の条件下で色を変えたい場合などはBBコードを直接打ち込むことでしか対応ができないことなどもあります。そのため両方の方法を覚えていただけるとより汎用性はあるスキルになるかと思います!

本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次