この文書はFramerを学ぶ国内ユーザーが韓国語資料の不足で苦労することを解決するため、公式ブログの内容を韓国語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆さんに少しでも役に立てばと思います。

テキストスタイルとは？

テキストスタイルはフォント、サイズ、色などテキストの視覚的属性を事前に定義して再利用できる機能です。
一度スタイルを作成すると、サイト全体で同じように適用することができます。

テキストスタイルの利点

• 修正が必要なとき、1か所だけ変更すれば全体に反映可能

• デザインシステムを一貫して維持

テキストスタイルの適用方法

適用方法

1. テキスト要素または一部のテキストを選択

2. 右側の属性パネルで Text → Styles をクリック

3. 望むスタイルを選択

スタイルの削除

属性パネルで適用されたスタイルの横にある × ボタンをクリック

テキストスタイルのブレークポイントを追加する

さまざまな画面サイズでテキストが自然に見えるように、ブレークポイントを設定できます。

設定方法

1. Assets → Stylesで希望のテキストスタイルをクリック

2. Edit Styleモーダルが開いたら、Breakpoints項目でAdd Breakpointをクリック

3. デフォルト提供: Desktop (L), Tablet (M), Mobile (S)

4. 各デバイスごとのフォントサイズ、行間隔、文字間隔、段落間隔を個別設定

テキストスタイルの管理方法

• 左側のパネルAssets → Stylesでプロジェクトに応じてスタイルを生成、修正、削除できます。

• 1つのテキストボックスで複数のスタイルを適用したい場合はMarkdownを活用してください。

リッチスタイルドテキスト（Markdownの活用）

1つのテキストブロック内で複数のスタイルを混合適用したい場合、Markdown形式を使用できます。
(例：文章の中で特定の単語だけをStrongまたはHighlightで強調)

適用方法

1. 特定のテキストをドラッグ選択

2. 右の属性パネルで個別スタイルを適用（例：1文の中で特定の単語だけをBoldで強調）

CMSテキストにもスタイルを適用する

CMSに入力されたテキストにも同様にテキストスタイルを適用できます。
CMSテキスト要素選択 → 属性パネルでテキストスタイル指定を行うことでブログ、ニュース、商品説明などコンテンツ中心サイトでもスタイルの一貫性を維持できます。

リンクテキストのスタイリング

リンクテキストは 基本, Hover, Active, Current 状態別にスタイルを指定できます。

1. テキスト要素選択後 Link 項目をクリック

2. リンクスタイル属性を指定（例: 色, 下線 など）

3. 各状態別に異なる色や効果設定が可能

特定テキストの色だけをオーバーライドする方法

テキスト全体にスタイルを適用した後でも、一部の色だけを変えたい場合は、色を変える単語や文章をドラッグして属性パネルで Colorだけを別途設定（新しいスタイルを作らずに、細部の強調が可能な点がメリット）すれば良いです。

この記事はFramer公式文書‘Using text styles’を翻訳・アレンジしたコンテンツです。