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