テキストの個別スタイル設定（範囲選択）
テキストの個別スタイル設定（範囲選択）
> こんな質問に答えます:
> - 文字の色やサイズを部分的に変えたい
> - 特定のテキストだけフォントを変更するには？
> - テキストにアニメーションを付けたい
> - 文字を太くしたり装飾する方法は？
> 別名・よくある呼び方: 文字装飾、テキスト色変更、フォント変更、文字サイズ変更、部分的なスタイル、範囲選択スタイル
> 設定場所: ブロックエディタ内でテキストを範囲選択 → ツールバーの「Lw フォント設定」「アニメーション設定」ボタン
> このページのURL: https://lite-word.com/manual/inline-styling/
カスタマイザーではサイト全体のフォントを一括設定できますが、特定のテキストだけフォントやサイズ、装飾を変えたい場合は、テキストを範囲選択してスタイルを適用できます。
使い方
基本の手順
- ブロックエディタで、スタイルを変更したいテキストを範囲選択する
- ツールバーに表示される 「Lw フォント設定」ボタン（カスタマイズアイコン）をクリック
- ポップアップパネルが開くので、変更したい項目を設定
- 設定はリアルタイムで反映される
フォント設定（Lw フォント設定ボタン）
3つのタブで構成されています。
基本設定タブ
| 設定項目 | 説明 | 備考 |
|---|---|---|
| フォントファミリー | テキストのフォントを変更 | 無料12種 + プレミアム23種から選択 |
| フォントサイズ（PC） | PCでの文字サイズ | 0.1倍〜4倍（元のサイズに対する倍率） |
| フォントサイズ（スマホ） | スマホでの文字サイズ | PC・スマホで別々に設定可能 |
| フォントの太さ | 文字の太さ | 100(極細)〜900(極太) |
| 行間（PC） | 行と行の間隔 | 0.8〜3 |
| 行間（スマホ） | スマホでの行間 | PC・スマホで別々に設定可能 |
| 字間（PC） | 文字と文字の間隔 | 0〜0.3 |
| 字間（スマホ） | スマホでの字間 | PC・スマホで別々に設定可能 |
余白・配置タブ
| 設定項目 | 説明 | 備考 |
|---|---|---|
| 余白（上） | テキストの上の余白 | -0.5em〜2em |
| 余白（下） | テキストの下の余白 | -0.5em〜2em |
| 余白（左） | テキストの左の余白 | -0.5em〜2em |
| 余白（右） | テキストの右の余白 | -0.5em〜2em |
| テキスト配置（PC） | 左寄せ・中央・右寄せ・両端揃え | PC用 |
| テキスト配置（スマホ） | スマホでの配置 | PC・スマホ別で設定可能 |
装飾タブ
| 設定項目 | 説明 | 備考 |
|---|---|---|
| 下線スタイル | テキストの下に装飾線を追加 | 11種類のデザインから選択 |
| 下線の色 | 下線の色 | 赤・青・黄・緑・メインカラーなど |
| 下線の太さ | 下線の太さ | 0.05em〜1em |
| 下線の位置 | 下線の上下位置 | -0.4em〜0.5em |
| 縁取り（PC） | テキストに縁取りを追加 | 1px〜10px |
| 縁取り（スマホ） | スマホでの縁取り | PC・スマホ別で設定可能 |
| 縁取りの色 | 縁取りの色 | 白・赤・メインカラー・アクセント・カラー1〜3 |
アニメーション設定
テキストにスクロールアニメーションを追加できます。
設定手順
- アニメーションを付けたいテキストを範囲選択
- ツールバーの「アニメーション設定」ボタンをクリック
- ポップアップで各項目を設定
設定項目
| 設定項目 | 説明 | 選択肢 |
|---|---|---|
| 発動条件 | アニメーションが動くタイミング | 無効 / スクロール時 / 初回表示時 |
| アニメーション種類 | 動きの方向 | なし / 下から / 右から / 左から / 上から |
| アニメーション時間 | 動きの速さ | 0.1秒〜5.0秒 |
| 表示開始距離 | スクロール時の発動位置 | 10px〜200px（デフォルト80px） |
| 移動距離 | テキストの移動量 | 10px〜200px（デフォルト40px） |
| 遅延時間 | アニメーション開始までの待ち時間 | なし / 0.1秒〜5.0秒 |
使い方のヒント
おすすめの使い方
- 見出しだけフォントファミリーを変えて目立たせる
- キャッチコピーのフォントサイズを大きくする
- 重要なキーワードに下線装飾を付ける
- CTAボタン周りのテキストにアニメーションを付けて注目を集める
- PC・スマホで別のサイズにして、どちらでも読みやすくする
注意点
- 装飾を付けすぎると読みにくくなるので、ポイントを絞って使う
- アニメーションは1ページに多すぎると表示が重くなる
- 「すべてリセット」ボタンで設定を一括クリアできる
リセット方法
設定を元に戻したい場合：
- スタイルを解除したいテキストを範囲選択
- ツールバーの「Lw フォント設定」を開く
- 「すべてリセット」ボタンをクリック
- すべてのスタイルが解除される
FAQ
Q. カスタマイザーのフォント設定とどう違いますか？
A. カスタマイザーはサイト全体のフォントを一括設定します。範囲選択のフォント設定は、特定のテキストだけ個別にスタイルを変更できます。
Q. フォント設定は全てのブロックで使えますか？
A. テキストが入力できるブロック（段落、見出し、リストなど）で使用できます。
Q. スマホとPCで別のサイズにできますか？
A. はい。フォントサイズ・行間・字間・縁取り・テキスト配置はすべてPC・スマホ別々に設定できます。
Q. プレミアム限定の機能はありますか？
A. プレミアムフォント（23種の追加日本語フォント）が選択可能になります。それ以外の機能は無料でも使えます。アニメーション機能は拡張機能のアニメーション設定がONの場合に使用可能です。
関連ページ
最終更新: 2026-03-16