みなさんこんにちは！ Ryoです！
普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。
今回は以下のように、テキストをぼやけさせる方法について解説していきたいと思います。
Bubbleを習得している方々でも、テキストをぼやけさせる方法まで知っている人はあまりいないんではないでしょうか？
この方法を知っていればBubblerの人にも少し驚かれることでしょう。
実装も簡単なので、ぜひ習得してみてください。
では、いきましょう。
テキストカラーの設定
まず、ぼやけさせて表示したいテキストを適当に設置します。
そして、テキストを入力しましょう。
ここでは[.bubble]と入力します。
次に、テキストの色の設定を行います。
テキストのエディターのStyleのところで、Remove Styleを選択します。
そして、カラーコードを＃FFFFFFにしましょう。
また、透明度は以下の画像の部分を操作して0にしておきましょう。
テキストシャドウの設定
次にテキストシャドウを設定していきます。
そのために、エディターの[Show text shadow]にチェックを入れます。
次にチェックすることによって現れた、Blur radiousに16と入力します。
この値によってどれだけぼやけさせるかを調整することができます。
値を大きくすればするほど大きくぼやけさせることができ、値を0にするとぼやけがなくなります。
そして、カラーコードは#000000にしておきます。
これで完成です。
プレビューで確認してみると、以下の画像のようになっていると思います。
また、Blur radiousに32と入力すると、以下のようになります。
あとがき
いかがだったでしょうか？
今回紹介したテクニックは意外と知らない人が多かったのではないでしょうか？
Bubbleはやり方さえ知っていれば意外と細かいデザインもできるので、おもしろいツールだとつくづく思います。
今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な豆知識などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。
それではまた次回の記事でお会いしましょう！！
