テキストスタイルは、フォント、サイズ、文字間、行高などのテキスト設定をまとめて管理できる機能です。
一度登録したテキストスタイルは、新しいテキストにもワンクリックで同じスタイルを適用でき、デザイン作業を効率化できます。
注意：リッチテキストボックスにはテキストスタイルを適用できません。
ユースケース
サイト全体でテキストのトーンを統一する
あらかじめ見出しや本文のテキストスタイルを登録しておくことで、ページごとに設定をやり直す必要がなくなり、サイト全体のトーンを揃えます。
頻繁に使うスタイルを整理する
見出し、本文、キャプションなどをテキストスタイルとして登録しておくことで、よく使うスタイルを一覧から素早く選べます。 作業のたびにフォントやサイズを個別に調整する手間を省きます。
チーム制作時のテキストスタイルの統一管理
プロジェクト内で共通のテキストスタイルを使うことで、メンバーごとの設定のばらつきを防ぎます。
スタイルパネルでテキストタブを開く
登録済みのテキストスタイルは、スタイルパネルのテキストタブで確認できます。
画面左のナビゲーションで[スタイル]アイコン
をクリックし、左パネルでスタイルパネルを表示します。[テキスト]タブを選択すると、登録済みのテキストスタイルが一覧で表示されます。
テキストスタイルを登録する
Tips: 見出しや本文などのよく使うスタイルは初めに設定しておくとより効率的に制作できます。
スタイルパネルから登録する
右上部の[+]、または[+追加する]ボタンをクリックします。
即座に、[New Style]という名称のテキストスタイルが追加されます。
表示されたスタイル設定パネルで、登録する項目を設定します。
タイポグラフィ設定から登録する
テキストボックスを選択します。
右パネルで[テキスト]タブを開きます。
[タイポグラフィ]設定の[テキストスタイル]入力欄をクリックします。
[テキストスタイルを登録]をクリックします。
即座に、[New Style]という名称のテキストスタイルが追加されます。
スタイル設定パネルが表示され、選択したテキストボックスのフォント・サイズなどの各種設定が引き継がれます。必要に応じて、項目を再設定して登録を完了します。
テキストスタイルパネルの設定項目
タイポグラフィ設定の以下の設定項目をテキストスタイルとして登録可能です。
※色、シャドウ、整列位置は各テキストボックスごとに個別設定となります。
Tips: 色を登録して効率的に管理したい
サイト内で使用している色を登録して管理する機能として、「カラースタイル」があります。機能の詳細や操作方法は、カラースタイルを設定するを参照してください。
テキストスタイルを適用する
テキストボックスを選択します。複数選択する場合は、Shiftキーを押しながらクリックします。
右パネルで[テキスト]タブを選択します。
[タイポグラフィ]の[テキストスタイル]入力欄をクリックします。
適用したいテキストスタイルを選択します。
テキストスタイルを解除する
テキストスタイルを解除後も、対象のテキストへのフォントやサイズなどの設定値は保持されます。
登録済みのテキストスタイルを編集する
スタイルとして登録後もテキストスタイルの設定項目の編集が可能です。変更内容は、このスタイルを適用している全てのテキストに反映されます。
編集したいテキストスタイルをクリックします。
スタイル設定パネルで、変更したい設定項目を編集します。
変更した設定は即座に反映されます。
登録済みのテキストスタイルを削除する
テキストスタイルを削除後も、そのスタイルを適用しているテキストの設定値は保持されます。
編集したいテキストスタイルをクリックします。
スタイル設定パネル右上の3点メニューから [スタイルを削除] をクリックします。
テキストスタイルの適用箇所を確認する
テキストスタイルがどのテキストに適用されているかを確認できます。
テキストスタイルの使用ページを確認する
確認したいテキストスタイルをクリックします。
スタイル設定パネル下部の[使用状況]の下矢印をクリックします。
表示されている数字が、該当のテキストスタイルが適用されているテキストボックスの数です。
使用ページが一覧で表示されます。
テキストスタイルの適用ボックスを確認する
ページ内でテキストスタイルが適用されているボックスの確認ができます。
確認したいページを開きます。
確認したいテキストスタイルにカーソルを当てると、該当のテキストボックスがハイライト表示されます。
ブレイクポイントごとにテキストスタイルを変更する
テキストスタイルには、ブレイクポイントごとの設定を登録できます。レスポンシブデザインを効率的に調整したいときに便利です。
画面下部のツールバーで、変更したいブレイクポイント（タブレット・モバイルなど）を選択します。
スタイルパネルのテキストタブを開きます。
そのブレイクポイントで設定を変えたいテキストスタイルを選択します。
スタイル設定パネルで、フォントサイズや行高など変更したい項目を調整します。
変更された項目はハイライト表示されます。設定を元に戻したい場合は、項目名横の矢印アイコンをクリックします。
よくある質問
Q. 登録済みスタイルを適用したテキストボックスを、他のプロジェクトへコピー&ペースト移動するとどうなりますか？
Q. 登録済みスタイルを適用したテキストボックスを、他のプロジェクトへコピー&ペースト移動するとどうなりますか？
A. 他のプロジェクトへコピー&ペースト移動した場合、下記の条件で移動します。
サイズやフォントなど、設定されたスタイルを維持した状態でペーストされます。
テキストスタイルへ自動登録されることはありません。
テキストスタイルで管理したい場合は、移動先のプロジェクトで改めて登録する必要があります。
Q. バージョン管理機能の対象データに入りますか？
Q. バージョン管理機能の対象データに入りますか？
A. テキストスタイルは、変更箇所や変更者などの情報を「バージョン」として保存し、復元できるバージョン管理機能の対象データになります。必要に応じて復元できます。