Unity UGUI TextMeshProに背景色を付ける方法

Posted at 2025-03-14

以下のようにTextMeshProで文字の後ろに背景色を付ける方法を紹介します。

TextMeshProのTextコンポーネント

InspectorでTextMeshProのExtra SettingsのRich Textにチェックを入れます。

対象のテキストをmarkタグで囲みます。
mark=のあとにカラーコードを指定して背景色を好きな色にできます。

<mark=#FEE100>New Text</mark>

markタグの仕様では、通常テキストの前にmarkが表示されてしまいます。
以下のようにカラーコードに透明度を指定すると、後ろに表示されている文字も見えるようになります。

<mark=#FEE10050>New Text</mark>

今回の場合は、このように表示するのではなく、文字の後ろにmarkを表示させるようにしたいので、
Extra SettingsのGeometry SortingをReverseに変更します。

文字の後ろにmarkが表示されるようになりました。

paddingを設定することもできます。

<mark=#FEE100 padding="30,3 0, 0, 0">New Text</mark>

参考