header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix Studio エディタ:テキストマスクを追加・カスタマイズする

6分
テキストマスクは、訪問者の注意を引く短いテキストに最適なツールです。テキストの背景(塗りつぶし)を画像、動画、またはグラデーションに設定して、ページ上でより目立たせることができます。
動画塗りつぶしを使用したテキストマスクの例を含む GIF
この記事では、以下の項目について説明します:

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

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

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

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

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

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

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

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

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

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

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

  1. エディタでテキストマスク要素を選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. デザイン」までスクロールダウンします。
  4. テキストマスクのデザイン方法を選択します:
動画塗りつぶしを使用したテキストマスクの例を含む GIF
「要素を追加」パネルでテキストマスクにマウスオーバーした際に表示される動画プレビュー
表示するテキストを入力する「テキストを編集」パネルのスクリーンショット