レスポンシブ対応ガイド
レスポンシブ対応ガイド
> こんな質問に答えます:
> - スマホでの表示を調整したい
> - PCとスマホで別のレイアウトにしたい
> - スマホだけ非表示にする方法は？
> - タブレットの表示が崩れる
> 別名・よくある呼び方: スマホ対応、モバイル対応、PC表示、スマホ表示、デバイス別設定、画面サイズ、ブレークポイント
> このページのURL: https://lite-word.com/manual/responsive-guide/
LiteWordはレスポンシブデザインを標準搭載しており、PC・タブレット・スマホで自動的にレイアウトが最適化される。このページでは、ブレークポイントの仕組みとデバイスごとに設定できる項目をまとめて解説する。
ブレークポイント一覧
LiteWordでは画面の横幅に応じて、3つのデバイスモードが自動的に切り替わる。
| デバイス | 画面幅 | 主な変化 |
|---|---|---|
| PC | 1081px以上 | フルレイアウト表示。PCメニュー・横並びレイアウト |
| タブレット（TB） | 500px〜1080px | ヘッダーがハンバーガーメニュー（ドロワー）に切替。レイアウトが縮小 |
| スマホ（SP） | 500px以下 | モバイル最適化表示。1カラム化・フォントサイズ縮小 |
ブレークポイントの境界
- 1081px — PC表示とタブレット表示の境界。この幅を下回ると、PCメニューがドロワーメニューに自動切替される
- 500px — タブレット表示とスマホ表示の境界。この幅を下回ると、スマホ専用のスタイルが適用される
> これらのブレークポイントはテーマ側で固定されており、ユーザーが変更することはできない。
デバイス別に設定できる項目の一覧
LiteWordではさまざまな設定をデバイスごとに個別指定できる。以下に一覧でまとめる。
フォントサイズ（PC / タブレット / スマホ）
サイト全体のフォントサイズは、カスタマイザーの「共通設定 - フォント」で PC・タブレット・スマホの3段階 で個別に設定できる。
| 設定場所 | PC | タブレット | スマホ | 範囲 |
|---|---|---|---|---|
| 固定ページのフォントサイズ | font_page_size_pc |
font_page_size_tb |
font_page_size_sp |
12px〜20px |
| 投稿ページのフォントサイズ | font_single_size_pc |
font_single_size_tb |
font_single_size_sp |
12px〜20px |
| ページ個別のフォントサイズ | font_size_pc |
font_size_tb |
font_size_sp |
12px〜20px |
設定場所:
- サイト全体: 外観 → カスタマイズ → 「共通設定 - フォント」 → フォント設定を開く
- ページ個別: 固定ページ編集画面 → 「ページ独自のデザイン設定」→ フォント設定
> 詳細: カラー・フォント設定
テキスト個別スタイル（PC / スマホ）
テキストを範囲選択して適用する「Lwフォント設定」では、以下の項目を PC・スマホで別々に設定 できる。
| 設定項目 | PC設定 | スマホ設定 | 範囲 |
|---|---|---|---|
| フォントサイズ | フォントサイズ（PC） | フォントサイズ（スマホ） | 0.1倍〜4倍 |
| 行間 | 行間（PC） | 行間（スマホ） | 0.8〜3 |
| 字間 | 字間（PC） | 字間（スマホ） | 0〜0.3 |
| テキスト配置 | テキスト配置（PC） | テキスト配置（スマホ） | 左寄せ / 中央 / 右寄せ / 両端揃え |
| 縁取り | 縁取り（PC） | 縁取り（スマホ） | 1px〜10px |
使い方: エディタ内でテキストを範囲選択 → ツールバーの「Lwフォント設定」ボタン → 各タブで設定
> 詳細: テキストの個別スタイル設定
ブロック共通サイドバーのデバイス別設定
全てのLiteWordカスタムブロックで共通して使えるサイドバー設定の中に、デバイス別に値を指定できる項目がある。
| 設定項目 | PC | タブレット | スマホ | 範囲 |
|---|---|---|---|---|
| マージン（上下の外側余白） | PC | TB | SP | 0〜80px（4px刻み） |
| パディング（上下左右の内側余白） | PC | TB | SP | 0〜80px（4px刻み） |
| 角丸 | PC | TB | SP | 0〜80px（4px刻み） |
| 枠線の太さ | PC | TB | SP | 0〜20px |
| 配置（横幅のalign） | PC | TB | SP | 左寄せ / 中央 / 右寄せ |
| 配置（position関連） | PC | TB | SP | static / relative / absolute / fixed / sticky |
| テキスト フォントサイズ | PC | SP | — | 0.1倍〜4.0倍 |
| テキスト 行間 | PC | SP | — | 0.8〜3.0 |
| テキスト 文字間 | PC | SP | — | 0〜0.3em |
使い方: ブロックを選択 → 右サイドバー「ブロック」タブ → 各パネルのデバイス切替アイコンをクリックして切り替え
> 詳細: ブロック共通サイドバー設定
FV（ファーストビュー）画像のPC/SP別設定
ほぼすべてのFVブロックで、背景画像をPCとスマホで別々に設定できる。スマホ用画像を設定しない場合はPC画像が使われるが、横長の画像がスマホで見切れる可能性があるため、SP用も別途設定することを推奨。
| FVブロック | PC画像 | SP画像 | PC/TB/SP別の最小高さ |
|---|---|---|---|
| FV-1〜FV-7（無料） | 背景画像（PC） | 背景画像（SP） | 最小高さ（PC/TB/SP） |
| FV-13, FV-15, FV-16（プレミアム） | 画像（PC） | 画像（SP） | 最小高さ（PC/TB/SP） |
| FV-14（プレミアム） | 背景画像（PC） + 動画URL（PC） | 背景画像（SP） + 動画URL（SP） | 最小高さ（PC/TB/SP） |
| FV-17（プレミアム） | 背景/左装飾/右装飾 各PC | 背景/左装飾/右装飾 各SP | 最小高さ（PC/TB/SP） |
| FV-3（画像のみ） | 画像（PC） | 画像（SP） | なし（画像サイズに依存） |
設定場所: FVブロックを選択 → 右サイドバーの「ブロック」タブ
> 詳細: ファーストビュー（FV）ブロック
追従CTAボタンのデバイス別表示
追従CTAボタン（パターン1）は、表示するデバイスを選択できる。
| 選択肢 | 動作 |
|---|---|
| スマホとPCの両方で表示 | 全デバイスで表示（デフォルト） |
| スマホの時のみ表示 | 画面幅1080px以下でのみ表示 |
| PCの時のみ表示 | 画面幅1081px以上でのみ表示 |
パターン2の場合: PC用セクションとスマホ用セクションが別々に用意されている。PC用のボタンテキスト・URLを空にすれば、実質スマホのみ表示になる。
設定場所: 外観 → カスタマイズ → 「ページ下の追従CTAボタン」→ パターン1の設定 → レスポンシブ設定 → 追従CTAを開く
> 詳細: 追従CTAボタンの設定方法
ページ背景色のPC/SP別設定
固定ページの編集画面で、ページ全体の背景色とコンテンツエリアの背景色をPC/SPで個別に指定できる。
| 設定項目 | PC | スマホ |
|---|---|---|
| ページ全体の背景色 | color_page_bg_pc |
color_page_bg_sp |
| コンテンツエリアの背景色 | color_content_bg_pc |
color_content_bg_sp |
設定場所: 固定ページ編集画面 → 「ページ独自のデザイン設定」→ ページ背景設定
> 詳細: 固定ページ編集画面の設定
ブロックの「PC/SP表示切替」機能
全てのLiteWordカスタムブロックには、特定のデバイスでのみ表示する切替機能がある。PC用とスマホ用で完全に別のブロックを用意したい場合に使う。
使い方
- 表示を切り替えたいブロックをエディタで選択する
- ブロック上部のツールバーに表示される 「PCのみ表示」 または 「SPのみ表示」 ボタンをクリック
- 選択した状態が設定される。未設定時は両方のデバイスで表示される
| ボタン | 効果 |
|---|---|
| PCのみ表示 | PC（1081px以上）でのみ表示。タブレット・スマホでは非表示になる |
| SPのみ表示 | スマホ・タブレット（1080px以下）でのみ表示。PCでは非表示になる |
活用例
- PC用の横長バナー と スマホ用の縦長バナー を別々のブロックで用意し、それぞれに「PCのみ表示」「SPのみ表示」を設定する
- PCでは3カラムのレイアウト、スマホでは1カラムの別デザインにしたい場合
- PCとスマホでテキスト量や画像サイズを大きく変えたい場合
> 詳細: ブロック共通サイドバー設定
ヘッダーのPC/タブレット/スマホ自動切替
LiteWordのヘッダーは画面幅に応じて自動的にレイアウトが切り替わる。ユーザーが手動で設定する必要はない。
切替の仕組み
| 画面幅 | ヘッダーの表示 |
|---|---|
| 1081px以上（PC） | ロゴ + PCメニュー（横並び） + CTAボタンが表示される |
| 1080px以下（タブレット・スマホ） | PCメニューが非表示になり、ハンバーガーメニュー（ドロワー） に自動切替される |
ドロワーメニュー（モバイルメニュー）
画面幅が1080px以下になると、PCのナビゲーションメニューの代わりにハンバーガーアイコン（三本線）が表示される。タップするとドロワーメニューが開く。
- ドロワーに表示されるメニュー項目は、PCメニューと同じものが自動で使われる
- ページごとにドロワーの表示/非表示を切り替えることも可能（ページ編集画面 → 「ドロワー表示切替」）
- プレミアムプランではドロワー専用のメニューを別途割り当てられる
ページごとのヘッダー変更
ページ編集画面の「ページ独自のデザイン設定」で、以下をページ単位で上書きできる。
| 設定項目 | 説明 |
|---|---|
| ヘッダーパターン | そのページだけ別のパターンに変更、または非表示にする |
| メニュー選択 | そのページだけ別のメニューを表示する（プレミアム限定） |
| ロゴ | そのページだけ別のロゴに変更する |
| ドロワー表示切替 | そのページでドロワーメニューを非表示にする |
> 詳細: ヘッダー設定の概要 | ページごとのヘッダー上書き
横スクロール設定（テーブル対応）
テーブルや横に長いコンテンツがスマホではみ出す場合、ブロック共通サイドバーの「横スクロール」設定で対応できる。
| 設定 | 説明 |
|---|---|
| 横スクロールON/OFF | 横スクロールを有効化する |
| タブレット最小横幅 | タブレット時のスクロール開始幅（400〜1920px） |
| スマホ最小横幅 | スマホ時のスクロール開始幅（200〜1200px） |
設定場所: ブロックを選択 → 右サイドバー → 「横スクロール」パネル
FAQ
Q. ブレークポイントを変更できますか？
A. できません。LiteWordのブレークポイント（1081px / 500px）はテーマ側で固定されています。カスタムCSSで独自のメディアクエリを追加することは可能ですが、テーマの基本レイアウトは上記のブレークポイントに従います。
Q. PCとスマホで完全に別のデザインにしたい場合は？
A. ブロックの「PC/SP表示切替」機能を使います。PC用のブロックに「PCのみ表示」、スマホ用のブロックに「SPのみ表示」を設定すれば、デバイスごとに異なるブロックを表示できます。
Q. タブレットだけ別のデザインにできますか？
A. PC/SP表示切替は「PC（1081px以上）」と「SP（1080px以下）」の2段階です。タブレットはSP側に含まれます。タブレットだけ独立した設定はできませんが、カスタムCSSでメディアクエリ @media (min-width: 501px) and (max-width: 1080px) を使えば対応可能です。
Q. FVのスマホ用画像を設定しないとどうなりますか？
A. PC用の画像がそのままスマホでも表示されます。ただし、横長の画像はスマホでは見切れる可能性があるため、スマホ用に縦長またはスクエアの画像を別途設定することをおすすめします。
Q. 追従CTAをスマホだけに表示したい
A. パターン1の場合は、カスタマイザーの「レスポンシブ設定」→「スマホの時のみ表示」を選ぶだけでOKです。パターン2の場合は、PC用セクションのボタンテキスト・URLを空にすることで対応できます。
Q. フォントサイズをデバイスごとに変えるには？
A. 2つの方法があります。(1) カスタマイザーの「共通設定 - フォント」で固定ページ・投稿ページのフォントサイズをPC/TB/SPそれぞれ設定する。(2) テキストを範囲選択して「Lwフォント設定」でPC/SP別にサイズを指定する。
Q. PCでもハンバーガーメニューにしたい
A. LiteWordの標準機能では、PCメニューとドロワーメニューの切替ポイント（1080px）は変更できません。PCでもハンバーガーメニューにしたい場合は、ヘッダーパターンを「ショートコード」にして、カスタムHTMLで独自のメニューを実装する方法があります。
Q. マージン・パディングをPC/SP別に設定するには？
A. ブロックを選択 → 右サイドバーの「マージン」または「パディング」パネルを開く → デバイス切替アイコン（PC/TB/SPのアイコン）をクリックして切り替えてから値を設定します。PC・タブレット・スマホそれぞれに異なる余白を指定できます。
関連ページ
- カラー・フォント設定
- テキストの個別スタイル設定
- ブロック共通サイドバー設定
- ファーストビュー（FV）ブロック
- 追従CTAボタンの設定方法
- 固定ページ編集画面の設定
- ヘッダー設定の概要
- カスタマイズ・子テーマ・カスタムCSS
- トラブルシューティング
最終更新: 2026-03-16 15:00