Wixではタイトルやテキストを追加する際に「どれを入れたらいい？」と悩んだり、そもそものテキストの編集の仕方が分からないと、サイト作成を諦める人もいるのではないでしょうか？
この記事ではWix初心者の方でも読み進めながら分かるようにテキストの編集の仕方を解説していきます！
見出しのスタイル
Wixで追加できるテキストは以下になります。
- 見出し h1
- 見出し h2
- 見出し h3
- 見出し h4
- 見出し h5
- 見出し h6
- テキスト(大〜小)
見出しにはh1〜h6と種類があり、どの見出しを使うかでサイトのデザインやSEOなどに影響します。
特に決まりはないですがロゴはh1、大見出しはh2、一行のテキストはh6、二行以上の文章はテキストで入れ込むとWixでのサイト作成がスムーズに進みます。
※見出し、テキストを追加した後でもフォントやサイズなどは後から変更ができます。
見出しの決め方に迷う場合はサルワカさんの記事が参考になります。
パーツごとで最適な見出しを設定しましょう！
テキストの追加
さっそくテキストを追加して編集の仕方を覚えましょう！
サイト編集 → 画面左にあるツールバー → 「＋」の追加ボタン → テキスト をクリック。
基本的には「おすすめスタイル」内の「見出し h1」〜「見出し h6」・テキスト(大〜小)しか使いません。
テキストの編集
テキストを追加すると画像のような編集アイコンたちが現れます。
「テキスト編集」・「テキストサンプル」の他に下記が左から順にあります。
- アニメーション
- リンクを追加
- ヘルプ
- データに接続
次に各編集アイコンの使い方を見ていきましょう！
テキスト編集
テキストの入れ込みは画像の箇所で行います。
テキスト設定の編集項目は下記でそれぞれ解説します。
スタイル
「見出し h1」〜「見出し h6」・テキスト(大〜小)のスタイルに変更できます。
フォント
フォントの種類を選択できます。
Wixでは数多くのフォントがあらかじめ使用でき、使いたいフォントが見つからない場合は外部サイトやフォルダからフォントをダウンロードして使うこともできます！
→参考：Wix フォントの追加の仕方
文字サイズ
数値を変更することで文字サイズを調整できます。
テキストスタイル
テキストを太字・斜体・下線・文字色・背景色・リンクの設定ができます。
中央寄せ・左寄せ・右寄せ・箇条書きのような設定もこちらで設定可能。
エフェクト
テキストにエフェクトをつけれます。
影や立体的に見えるスタイルがすぐに設定可能。
文字と行の間隔
見出しやテキストの文字間隔や行の間隔を調整できます。
文字と行の間隔
デフォルトでは横書きのテキストを縦書きに変更できます。
SEO・アクセシビリティ
「見出し h1」〜「見出し h6」・テキスト(大〜小)のスタイルを再度変更できます。
※変更し直すと、フォントサイズやフォントの種類がデフォルトに戻ります。
テキストサンプル
検索バーやタグを選択するとテキストのサンプルを生成してくれます。
ただ使いづらいので使用することはないと思います。
アニメーション
アニメーションを設定し、テキストに動きをつけることができます。
使い方はこちらを参考にしてください。
リンクを追加
テキストにリンクを設定できます。
使えるテクニック
テキストは使用の頻度が1番高く、+αを加えることでサイトの機能がブラッシュアップできます。
ここでは+αで使える機能をご紹介します！
ホバー(マウスオン)時に文字の色を変える
下記のようにホバー時に色が変化するテキストを作成します ↓
ホバーしてね
テキスト編集の中にはホバー時に設定できる項目がないのでボタンで作成します！
サイト編集 → 画面から画面左にあるツールバー → 「＋」の追加ボタン → ボタン をクリック。
ボタンが追加できたら
デザインを変更 → デザインをカスタマイズ から編集をします。
背景の塗りつぶし数値を100%から0%に変更。そうすると背景になじみます。
あとはホバー時の背景も0%にし、テキストの色を変更するだけで完成です！
実際にホバーすると動画のようにテキストの色が 黒 → 赤 に変化するのが確認できます。
アニメーション
次によく使うテクニックとしてアニメーションを解説します！
下記のサンプル動画のような動きをつけます。
- 作り方はいたって簡単です！
- テキスト編集のアニメーションを選択。
- サンプルではフロートを使用してるのでフロートを選択。
- カスタマイズをクリック
そうするとアニメーションの設定項目が出てくるので、方向・エフェクト時間・待機時間などを設定して完成です！
アニメーションの種類はたくさんあるので色々と試しながらサイトに合う最適な物を探してみてください。
まとめ
今回はWixのテキスト編集の仕方を解説しました。
使い方に慣れたらここまで解説した内容を組み合わせることで、普通のテキストにも動きが生まれたり、見え方を変えることが出来ます！ぜひ、色々と試してみて下さい。
