Editor X:テキストマスクを追加・カスタマイズする

読了時間:6分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
テキストマスクは、訪問者の注意を引く短いテキストに最適なツールです。テキストの背景(塗りつぶし)を画像、動画、またはグラデーションに設定して、より目立たせることができます。
動画塗りつぶしを使用したテキストマスクの例を含む GIF
この記事では、下記の項目について説明します:

テキストマスクを追加する

「要素を追加」パネルに移動して、新しいテキストマスク要素を追加します。好きなデザインを選択し、ページにドラッグします。後で要素設定パネルから詳細にカスタマイズすることができます。
役立つヒント:
モバイルで最高のサイトパフォーマンスを得るために、ページごとに追加するテキストマスクは最大 10個までにすることをおすすめします。

テキストマスクを追加する方法:

  1. Editor X 上部にある「要素を追加 をクリックします。
  2. テキスト」をクリックします。
  3. テキストマスク」をクリックします。
  4. 好きなテキストマスクデザインをページにドラッグします。
    ヒント:一部のデザインには背景動画が含まれています。デザインにマウスオーバーすると、実際の動作を確認できます。
  5. この要素に表示するテキストを入力します:
    1. 追加した新しいテキストマスクをクリックします。
    2. テキストを編集」をクリックします。
    3. 表示するテキストを入力します。
Editor X の「要素を追加」パネルのスクリーンショットでテキストマスクデザインにマウスオーバーして背景動画を表示しています

テキストマスクのテキストを変更する

テキストマスクに表示されているテキストはいつでも編集できます。キーボードの Enter キーを使用すると、テキストに必要な行数を作成できます。

テキストマスクのテキストを変更する方法:

  1. エディタでテキストマスクをクリックします。
  2. テキストを編集」をクリックします。
  3. テキストを入力」下にテキストを入力します。
テキストマスクに表示されるテキストを編集できる「テキストを変更」パネルのスクリーンショット
ヒント:
要素設定パネルからテキストの大文字と小文字を制御します(以下テキストマスクをデザインする を参照ください)。たとえば、テキスト全体を大文字または小文字にすることができます。

テキストマスクのサイズを変更する

テキストマスクはサイズを調整して、ページに完全にフィットさせることができます。
テキストマスクのサイズを変更する方法は 2通りあります:

テキストマスクをデザインする

要素設定パネルから、必要に応じて、テキストマスクの既存のデザインを調整したり、ゼロから作成したりできます。面白いメディアやグラデーションの塗りつぶしを追加したり、文字と行の間隔を変更したりすることができます。

テキストマスクをデザインする方法:

  1. エディタでテキストマスクをクリックします。
  2. Editor X 上部にある「要素設定パネル」アイコン  をクリックします。
  3. デザイン」タブ  をクリックします。
  4. テキストマスクのデザインを選択します:
「デザイン」タブをクリックしてテキストマスクをデザインしている、要素設定パネルのスクリーンショット。

お役に立ちましたか?

|