Editor X:テキストを追加・カスタマイズする
読了時間:7分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
テキストはサイトの最も重要な部分の一つです。訪問者の注意を引くような興味深く魅力的なテキストを作成し、さまざまなブレイクポイントでの表示と動作をカスタマイズしましょう。
この記事では、下記の項目について説明します:
テキストを追加する
エディタ上部の「追加」パネルからテキストを追加します。「追加」パネルには、サイトに一致するスタイル別テキストが表示されます。
テキストを追加する方法:
- Editor X 上部にある「要素を追加」 をクリックします。
- 「テキスト」をクリックします。
- テキスト要素をページにドラッグします。
- テキストのスタイル:サイトのスタイルに合った見出しまたは段落を追加します。
- タイトル:ページで使用するさまざまなタイトルの候補から 1つ選択します。
- 折りたたみ可能テキスト:この要素は、一見圧倒されるような長いテキストに最適です。テキストの一部が非表示になり、訪問者はクリックして続きを読むことができます。
- テキストマスク:テキストを追加し、画像、動画、またはグラデーションを使用してテキストを塗りつぶして目立たせます。
- 「テキストを編集」をクリックし、テキストを入力します。
スペルチェック:
Editor X は、サイトにテキストを追加するたびにブラウザのスペルチェックを使用します。個別に有効にする必要はなく、テキスト要素内に入力して、動作を確認できます。スペルチェックが機能しない場合は、ブラウザでスペルチェックが有効になっていることを確認してください。
テキストの書式を設定する
書式設定は、より明確なコミュニケーションのためにテキストを整理するのに役立ちます。テキストの位置を揃えたり、箇条書きにしたり、番号を付けたりしましょう。また、斜体、下線、ハイライト、太字などを追加してテキストを目立たせることもできます。
ブレイクポイントごとにテキストの書式を変更できます。
テキストの書式を設定する方法:
- 書式を設定するテキストボックスをクリックします。
ヒント:Shift キーを押しながら複数のテキストボックスを選択し、書式設定を行います。 - 「テキストを編集」をクリックします。
- (要素設定パネル内で)次のツールを使用してテキストの書式を設定します:
書式設定ツール | 説明 | 手順 |
---|---|---|
スタイル | これらのスタイルはサイトに合わせて作成されています。スタイルを編集して変更内容を保存し、サイトで再度使用することができます。 | 「スタイル」ドロップダウンメニューをクリックし、スタイルを選択します。書式設定ツールを使用してスタイルをカスタマイズし、「スタイルを更新」をクリックして変更内容を保存します。 |
フォント | 豊富なフォントから選択できます。また、フォントをアップロードして言語フォントを追加することもできます。 | 「フォント」ドロップダウンをクリックし、フォントを選択します。 |
文字の大小 | ブレイクポイント全体のテキストの最大サイズと最小サイズを設定します。 | 「文字の大小」アイコンをクリックし、最小サイズと最大サイズを入力します。 |
フォントサイズ | 特定のフォントサイズを設定します。 | 「文字サイズ」ドロップダウンをクリックし、サイズを設定します。 |
太字 | テキストを太字にします。 | 「太字」アイコンをクリックします。 |
斜体 | テキストを斜体にします。 | 「斜体」アイコンをクリックします。 |
下線 | テキストに下線を引きます。 | 「下線」アイコンをクリックします。 |
色 | テキストの色を変更します。 | 「色」アイコンをクリックし、色を選択します。 |
ハイライト | テキストの背景に色を追加してハイライトします。 | 「ハイライト」アイコンをクリックし、色を選択します。 |
リンクテキスト | テキストにハイパーリンを設定することで、訪問者がクリックしたときにリンク先に移動します。 | 「リンク」アイコンをクリックしてリンク先を選択し、リンクの詳細を入力します。 |
配置 | テキストを左揃え、中央揃え、右揃え、またはテキストボックス全体に均等に配置します。 | 配置アイコンをクリックします。 |
行間隔 | テキストボックスの行間隔を変更します。特定の値を設定するか、自動間隔調整を使用することができます。 | 「行間隔」アイコンをクリックして間隔を設定するか、「自動間隔調整」をクリックしてテキストボックスを自動的に調整します。 |
文字間隔 | テキストボックスの文字間隔を変更します。 | 「文字間隔」アイコンをクリックし、文字間のスペースを設定します。 |
箇条書き | 箇条書きを追加してリストを作成します。 | 「箇条書き」アイコンをクリックして箇条書きを追加します。 |
番号付きリスト | 番号付きリストを作成します。 | 「番号付きリスト」アイコンをクリックして番号を追加します。 |
インデント | テキストをインデントします。 | 「左寄せ」または「右寄せ」をクリックして、インデント(字下げ)のサイズを変更します。 |
テキスト方向 | テキストの方向を左から右または右から左に変更します。 | 「テキストの方向を変更」アイコンをクリックします。 |
ヘッディングタグ | 見出しタグを使用してコンテンツを構造化し、サイトの SEO を改善し、アクセシビリティを向上させます。 | 「見出しタグ」ドロップダウンをクリックし、タグを選択します。 |
注意:
- 2つの段落にまたがるテキストにリンクを追加することはできません。つまり、Enter キーで改行された 2つの単語または文は、別々の段落として機能するため、両方とも同時にリンクすることができません。Enter キーで改行する代わりに、 Shift + Enter を使用して行間を作成すると、段落をまたぐテキストにリンクを追加することができます。
- リンクされたテキストを選択し、「下線」アイコンをクリックすると、ハイパーリンクが設定されたテキストの下線を削除できます。
- Wix は Editor X 内のフォントのライセンスを所有しています。これらのフォントは Wix サイト内でのデジタル使用のみ許可されています。詳細は Wix 利用規約をご覧ください。フォントをダウンロードして使用することはできませんが、オープンソースのバージョンを見つけてコンピュータにインストールすることはできます。外部 URL で見つけたフォントにはご注意ください。これらのフォントは Wix が所有していないため、作成者に連絡して、使用許可を得る必要があります。
箇条書き・段落番号の色を変更する
テキストに 1つの色を選択し、箇条書きの点または番号付きリストの番号に別の色を選択して、リストをより面白くします。
箇条書き・段落番号の色を変更する方法:
- 該当するテキストボックスをクリックします。
- 「テキストを編集」をクリックします。
- 点または番号の色を選択します:
- テキストボックス内のテキスト全体(箇条書きの点や番号付きリストの番号を含む)をハイライトします。
- 希望の色を選択します。
注意:テキストボックス内のすべてのテキストが、選択した色に変わります。
- テキストに異なる色を選択します:
- 該当するテキスト(箇条書きの点や番号付きリストの番号を含まない)をハイライトします。
- 希望の色を選択します。
注意:テキストは新しい色に変更されますが、点と番号は手順 3 で選択した色のままです。
複数のブレイクポイントにおけるレスポンシブテキスト
Editor X では、すべての画面サイズでテキストがどのように表示されるかを設定できます。以下は、完璧なテキストを作成するのに役立つ便利なツールです。
文字サイズの変更
「文字の大小」アイコン をクリックして、ブレイクポイントにまたがる文字の最大サイズと最小サイズを設定します。つまり、文字サイズは訪問者の画面に合わせて調整されますが、常に定義した範囲内に収まることを意味します。
これは、テキストが他の要素と重なったり、必要以上にスペースを占有することなく、すべての画面に収まるようにするのに役立ちます。
ヒント:
最小サイズと最大サイズを設定しても、テキストが追加の行に折り返される場合は、テキストボックスの幅を増やして、テキストがサイズ変更できるようにしてください。
テキストのスタック
小さい画面でサイトを表示すると、要素がサイズ変更され、重要な情報が失われることがあります。 スタックを利用すると、各要素にスペースを与えるフレックスボックスを作成することで、画面サイズに関わらず、テキストが他の要素と重なることはありません。
スタックは、見出しと段落など、常に一緒に表示されるテキストボックスにも便利です。すべてのブレイクポイントで一緒に表示されます。
スタックを使用するには、テキスト要素を複数選択し、「スタック」をクリックします。
固定とフルードのサイズ変更の違い
エディタ右側にある要素設定パネルを使用して、ブレイクポイントが変更されたときのテキストのサイズ変更方法を設定します。
- 固定:メニューは各ブレイクポイントで固定サイズを維持します。
- フルード:テキストの幅は、ブレイクポイントのサイズに応じて変わります。
お役に立ちましたか?
|