STUDIOでテキストにグラデーションのマーカーを引くTIPS

STUDIOでテキストに細いアンダーラインではなく、↓のような文字に掛かる太いマーカーのようなアンダーラインを引く場合のTIPSです。単色のマーカーであれば検索すれば色々やり方出ておりますが、あんまりなかったグラデーションのマーカーを簡単に引く方法をご紹介します。

1. テキストBOXとマーカーのBOXをネガティブマージンで重ねる方法

まず、簡単に思いつくのはテキストBOXと、マーカーになるBOXを配置して、マーカーにネガティブマージンを入れるパターンです。

やり方を解説していきます。

1. テキストBOXと、アンダーラインになる色の付いた空のBOXを用意。この二つはグループ化して、アンダーラインBOXの横幅は100%に。

2. アンダーラインBOXの重なりをテキストBOXの下に来るようにする（テキストBOXが0なら、アンダーラインBOXは-1や-2に）。

3. アンダーラインBOXに上向きのネガティブマージンを入れる。

（注：ネガティブマージンとは、マージンをマイナスにすることで、余白を「削る」動きをします。この図ではアンダーラインBOXの「上のマージン」を-12にしているので、アンダーラインBOXが、テキストBOXに12px分重なる形になります。

■メリット

この方法は背景がグラデーションや画像であっても問題なく使えます。

■デメリット

この方法はテキストが改行する場合に対応できません。文字にアンダーラインが引かれているわけではなく、テキストBOXとアンダーラインBOXが重なっているだけだからです。なので「文章中の一部を目立たせる」目的では使えないため見出し等、使い道は限りられますね。

2. リッチテキストで色々工夫する方法

もう1つの方法はテキスト自体に書式を入れられるリッチテキストを活用する方法です。

メリット・デメリットから申し上げますと、ネガティブマージンで重ねる方法のメリットとデメリットが逆転します。即ち「文章の一部にアンダーラインを引くことができる反面、画像やグラデーション等のベタ塗り以外の背景では使いにくい」方法になります。

ではやり方を解説していきますが、先ほどより少しややこしいのでざっくり流れを説明しますと

1. アンダーラインを引きたい箇所に「太字」や「取り消し」等の書式を入れる

2. その書式の「インライン」の「塗り」を設定する
   ※これが後にアンダーラインの色になる。

3. 書式の「インライン」の「シャドウ」を設定する

こんな感じになります。順番に解説していきます。

1. 該当箇所に書式を設定する

まずはリッチテキスト内のアンダーラインを引きたい箇所を選択し、何らかの書式を選択します。ここで選んだ書式に対してアンダーラインが引かれるようになります。なので例えば太字にその設定を入れると、単純に太くすることができなくなるので、リッチテキスト内で使わない書式を選びましょう。

• 太字：△ （単体使用頻度が高い）

• イタリック：◯（太字と重複できる）

• 取消：×（完全NG。取り消し線を消せない）

• 下線：◯（太字と斜体と重複できるし、リッチな下線みたいな感じだし）

• コード：△（滅多に使わないが太字と重複できない）

• リンク：×（太字や斜体と重複できるが、リンク貼られちゃう。。。）

今回はイタリックを選んだパターンで解説します。

2. インラインの「塗り」を設定する

イタリックを入れた箇所を選択して、インラインや文字へのスタイルが設定できるようにします。

次にインラインの「塗り」を、アンダーラインにしたい色にします。次にイタリックを解除しておきます。

作業後の状態は以下です。

3. インラインのシャドウでアンダーラインを調整

このままではアンダーラインではなくテキスト全体が塗られた状態なので、上の方が白くなってくれればアンダーラインっぽくなりますよね。そこで、「内側のシャドウ」を使ってテキストの上側を白く塗りつぶします。

シャドウの設定として以下のようにします。

1. Colorは背景色と同じに（今回は白）

2. InsetをON（内側のドロップシャドウになる）

3. X、Blur、Spreadは0

4. Yは適宜（12だと上12px白く塗られる）

これで完成です。左右に少しアンダーラインをはみ出したい場合は、インラインのパディングで微調整しても良いと思います。

この設定が定義されれば、斜体を選んだ箇所は全てアンダーラインが入ります。一回設定してしまえばアンダーラインを引きたい箇所をイタリックにするだけなので簡単ですよね！

■デメリット

この方法は3番目の手順で内側のシャドウを使ってアンダーラインぽく見せているので、背景が画像やグラデーションだと、シャドウで塗りつぶせないので使うことができません。

一応リッチテキストのブレンドモードを設定することで対応できる場合もあると思いますが、狙った色を出すのは難しくなりますね。

いかがでしたでしょうか。ぜひ活用してみてください。