Wix Studio エディタ:テキストマスクを追加・カスタマイズする
読了時間:6分
テキストマスクは、訪問者の注意を引く短いテキストに最適なツールです。テキストの背景(塗りつぶし)を画像、動画、またはグラデーションに設定して、ページ上でより目立たせることができます。
![動画塗りつぶしを使用したテキストマスクの例を含む GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/04/24/db147a66-dbda-4d8c-a879-9912fb80d41e/c0e9888b-fc57-4adc-98b0-c3b49f7e2f65.gif)
この記事では、以下の項目について説明します:
テキストマスク要素を追加する
「要素を追加」パネルに移動して、新しいテキストマスク要素を追加します。好きなデザインを選択し、ページにドラッグします。後で要素設定パネルから詳細にカスタマイズすることができます。
役立つヒント:
モバイルで最高のサイトパフォーマンスを得るために、ページごとに追加するテキストマスクは最大 10個までにすることをおすすめします。
テキストマスクを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「テキスト」をクリックします。
- 「テキストマスク」をクリックします。
- 好きなテキストマスクデザインをページにドラッグします。
ヒント:一部のデザインには背景動画が含まれています。デザインにマウスオーバーすると、実際の動作を確認できます。 - この要素に表示するテキストを入力します:
- 追加した新しいテキストマスクをクリックします。
- 「テキストを編集」をクリックします。
- 表示するテキストを入力します。
![「要素を追加」パネルでテキストマスクにマウスオーバーした際に表示される動画プレビュー](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/1eeb8097-d0e9-43e0-a739-b9345dc62c5c/cfd2a5b5-6eef-47c2-b7ba-77d2b5e39970.gif)
テキストマスクのテキストを変更する
テキストマスクに表示されているテキストはいつでも編集できます。キーボードの Enter キーを使用すると、テキストに必要な行数を作成できます。
テキストマスクのテキストを変更する方法:
- エディタでテキストマスク要素を選択します。
- 「テキストを編集」をクリックします。
- 「テキストを入力」下にテキストを入力します。
![表示するテキストを入力する「テキストを編集」パネルのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/20/d58a5800-e8cf-400f-aabf-fd683fa9b12a/0851a480-fcbd-4949-8657-9622ce4162e6.png)
ヒント:
要素設定パネルからテキストの大文字と小文字を制御します。たとえば、テキスト全体を大文字または小文字にすることができます(以下「テキストマスク要素をデザインする」を参照)。
テキストマスク要素をデザインする
要素設定パネルから、必要に応じてテキストマスクの既存のデザインを調整したり、ゼロから作成したりできます。面白いメディアやグラデーションの塗りつぶしを追加したり、文字と行の間隔を変更したりすることができます。
テキストマスクをデザインする方法:
- エディタでテキストマスク要素を選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」までスクロールダウンします。
- テキストマスクのデザイン方法を選択します:
画像または動画の塗りつぶしを設定する
グラデーション背景を設定する
テキストの書式と配置を設定する
テキストの大文字・小文字を変更する