画像とテキストを重ねると、背景の明るさやコントラストによってテキストが読みにくくなる場合があります。この記事では、画像のみを暗くしたり明るくしたりしてテキストを読みやすくする2つの方法を紹介します。
フィルターで画像を暗くする方法
画像ボックスの上にテキストボックスを配置したあとに、画像自体の暗さ・明るさを調整する方法です。
黒の透過ボックスを画像に重ねる方法
画像ボックスとテキストボックスの間に半透明のボックスを挟み、ボックスの色暗さ・明るさと透明度で見え方を調整する方法です。
画像ボックスを含む親ボックス内に新しいボックスを追加します。
以下の方法で同じ大きさのボックスを重ねます。
・新しいボックスのサイズを縦横100%に設定する
・親ボックスの配置を縦横中央寄せにする1で追加したボックスの中にテキストボックスを入れ、子ボックスにします。
1で追加したボックスを選択し、右パネルの[ボックス]タブを開きます。右パネルが閉じている場合は右パネルを開いてください。
1で追加したボックスの色と透明度を調整します。[背景色]の項目でカラーパレットを開き、上下の矢印ボタンでRGBA値の入力モードに切り替えます。
それぞれ4つの数値は、赤・緑・青・透明度（0が透明で1が不透明）を表します。目的に合わせて、次のような数値例を入力します。暗くする例： (0, 0, 0, 0.4)
明るくする例： (255, 255, 255, 0.75)
公開済みのサイトを編集していた場合は、公開パネルでサイトを更新します。公開パネルでサイトを更新するまで、公開サイトには変更内容が反映されません。
注意：手順4で、ボックスの透明度を右パネルの[透明度]から設定すると、不透明度が子要素のテキストにも反映されます。テキストの視認性を保ちたい場合は、手順通りRGBA値で透明度を指定する方法を取ってください。
透過 スタイル フィルター エフェクト