メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
画像上のテキストを見やすくする方法は?
画像上のテキストを見やすくする方法は?

画像の上にテキストを配置した場合に画像のみを暗くさせたり明るくする手順をご紹介します。

Saika avatar
対応者:Saika
5か月以上前に更新

画像上のテキストの視認性を上げる

画像を使うことは、コンテンツを魅力的で興味深いものにするのに効果的です。ただし、画像とテキストを組み合わせると、テキストが読みづらくなることがあります。

この記事では、テキストの視認性を向上させるために、画像の上にテキストを置いて画像を暗くする方法を紹介します。

画像フィルターを使用する方法

  1. 画像ボックスの上にテキストボックスを配置します。

  2. 画像ボックスを選択し、スタイルバーの画像タブから「明るさ」を調整します。数値が低いほど暗くなります。

ボックスにRGBA値を指定する方法

  1. 画像ボックスにボックスを追加し、同じサイズにします(縦横ともに100%)。テキストボックスは追加したボックスの子ボックスになるようにします。

  2. 追加したボックスの塗りでRGBA値を変更します。A(Alpha)は色の透明度を表し、0が透明で1が不透明です。

    暗くする例(0, 0, 0, 0.75)

    明るくする例(255, 255, 255, 0.75)

Tips:画像ボックス(親ボックス)に不透明度を設定すると、子要素にも設定が反映されます。RGBA値で透明度を指定する方法か、画像を事前に別のツールで加工してから使用してください。

透過

こちらの回答で解決しましたか?