ブロックの基本操作
ブロックの基本操作
> こんな質問に答えます:
> - ブロックの追加方法がわからない
> - パーツを入れ替えたり削除するにはどうするの？
> - ブロックの色を変えたい
> - 無料で使えるブロックと有料のブロックの見分け方は？
> - LiteWordのブロックが一覧に出てこない
> 別名・よくある呼び方: パーツの使い方、ブロックの操作、ブロック挿入、ブロック編集、パーツ追加、パーツ削除
> このページのURL: https://lite-word.com/manual/block-basics/
LiteWordのカスタムブロックを使ってページを作成するための基本操作ガイド。ブロックの挿入・編集・移動・削除の方法と、無料/有料ブロックの見分け方を解説する。
「パーツ」とは？
LiteWordでは、ページを構成する各要素を 「ブロック」（＝パーツ） と呼ぶ。ファーストビュー、ボタン、料金表、お客様の声など、全147種類のブロックを組み合わせてページを作る。
やりたいこと別ガイド:
| やりたいこと | 操作方法 |
|---|---|
| パーツ（ブロック）を追加したい | → 1. ブロックの挿入方法 |
| パーツの内容・デザインを変更したい | → 2. ブロックの編集方法 |
| パーツの色を変えたい | → 4. ブロックの色を変える |
| パーツの順番を入れ替えたい | → 5. ブロックの移動・削除 |
| パーツを削除したい | → 5. ブロックの移動・削除 |
| どんなパーツがあるか知りたい | → 全ブロックリファレンス（147種） |
| ヘッダー・フッターを変えたい | → ヘッダー設定 / フッター設定 |
| ロゴを変えたい | → ロゴの設定方法 / ページごとに変える |
| ブロックがうまく動かない | → よくある質問 |
カテゴリ別ブロックガイド
目的に合ったブロックの使い方を知りたい場合は、以下のカテゴリ別ガイドを参照。
| カテゴリ | 内容 | ページ |
|---|---|---|
| ファーストビュー | ページ上部のヒーロー画像（全19種） | FVブロック |
| ボタン・CTA | リンクボタン・CTAセクション（全18種） | ボタン・CTA |
| 見出し・テーブル | 見出し装飾・料金表・ビフォーアフター（全46種） | 見出し・テーブル |
| コンテンツ・画像 | テキスト+画像・バナー・ギャラリー（全22種） | コンテンツ・画像 |
| 記事一覧 | 投稿・お知らせの自動一覧表示（全7種） | 記事一覧 |
| リスト | 箇条書き・カード型一覧・リンク集（全12種） | リスト |
| FAQ・ステップ・フォーム | FAQ・手順説明・お客様の声・フォーム（全24種） | FAQ・ステップ等 |
| 会社概要 | 会社情報テーブル・プロフィール・メッセージ（全7種） | 会社概要 |
| 共通設定 | 全ブロック共通のサイドバー設定 | 共通サイドバー |
設定手順
1. ブロックの挿入方法
- 固定ページまたは投稿の編集画面を開く
- ブロックを追加したい場所にカーソルを置く
- 「+」ボタン（ブロック挿入ボタン）をクリック
- ブロック一覧から 「LiteWord」カテゴリ を探す
- 使いたいブロックをクリックして挿入する
ポイント:
- LiteWordのブロックはすべて「LiteWord」カテゴリにまとめられている
- ブロック名で検索することもできる（例: 「FV」「CTA」「ボタン」）
- よく使うブロックは「よく使うブロック」カテゴリに自動で表示される
2. ブロックの編集方法
- 編集したいブロックをクリックして選択する
- 画面右側の サイドバーパネル に設定項目が表示される
- テキスト・画像・リンクなどの内容を変更する
- サイドバーで色・レイアウト・アニメーションなどのスタイルを調整する
- 「更新」（または「公開」）で保存する
ポイント:
- サイドバーが表示されない場合は、画面右上の歯車アイコンをクリック
- ブロックを選択した状態で「ブロック」タブを確認する
3. 共通のサイドバー設定
すべてのLiteWordブロックに共通するサイドバー設定がある。
| 設定項目 | 説明 |
|---|---|
| 横幅 | ブロックの横幅を指定（PC/スマホ個別設定可） |
| マージン | ブロックの外側の余白 |
| パディング | ブロックの内側の余白 |
| 背景色 | ブロック全体の背景色 |
| 枠線 | ブロックの外枠の色・太さ |
| 角丸 | ブロックの角を丸くする設定 |
| アニメーション | スクロール時のアニメーション効果 |
→ 詳細: 共通サイドバー設定
4. ブロックの色を変える
- 変更したいブロックをクリックして選択する
- 画面右側のサイドバーパネルを開く
- 「背景色」 でブロック全体の背景色を変更する
- 「テキスト色」 がある場合は、テキストの色を変更する
- カラーパレットから選ぶか、カラーコード（例: #FF5500）を直接入力する
ポイント:
- カスタマイザーで設定した「メインカラー」「アクセントカラー」がパレットに表示される
- 個々のブロックで設定した色は、カスタマイザーの共通設定より優先される
5. ブロックの移動・削除
移動する場合:
- ブロックを選択する
- ブロック上部に表示されるツールバーの 上下矢印 をクリックして移動する
- またはブロック左側の ドラッグハンドル（6つの点のアイコン）をドラッグ＆ドロップする
削除する場合:
- ブロックを選択する
- ブロックツールバーの 「...」（3点メニュー） をクリック
- 「ブロックを削除」 を選択する
6. 無料ブロックと有料ブロックの見分け方
ブロック一覧で、有料ブロックには ロックアイコン が表示される。
| 表示 | 意味 |
|---|---|
| ロックアイコンなし | 無料ブロック — そのまま使える |
| ロックアイコンあり | 有料ブロック — プレミアム、個別購入、またはテンプレート購入が必要 |
有料ブロックの種類:
- プレミアム（premium） — 月額980円のプレミアムプランで利用可能
- 個別購入（paid） — 必要なブロックだけ個別に購入（買い切り）
- テンプレート（template） — テンプレート購入者のみ利用可能
→ 全ブロックのティア一覧: 全ブロックリファレンス
→ プランの違い: プラン比較
よくある質問
Q: LiteWordのブロックが一覧に表示されません
A: LiteWordテーマが有効になっているか確認する。外観 → テーマ でLiteWordが「有効」になっていない場合、ブロックは表示されない。
Q: ブロックの中のテキストが編集できません
A: ブロックをダブルクリックしてテキスト編集モードに入る。一部のブロックではサイドバーパネルからテキストを編集する仕様になっている。
Q: ブロックを挿入したが何も表示されない
A: ブロックの必須項目（画像やテキスト）が未入力の可能性がある。サイドバーパネルで各項目を設定する。
Q: 同じブロックを複数回使えますか？
A: はい。同じブロックを同一ページ内に何度でも挿入できる。それぞれ独立して設定を変更可能。
Q: ブロックの表示がプレビューと公開ページで違います
A: エディター上ではアニメーションや一部のレスポンシブ表示が再現されない。必ず「プレビュー → 新しいタブでプレビュー」で実際の見た目を確認する。Xserverのキャッシュが効いている場合、変更反映にタイムラグがあることもある。
Q: ブロックにロックアイコンが付いていて使えません
A: 有料ブロック（プレミアム/個別購入/テンプレート）は購入前はロックされている。プラン比較で自分に合ったプランを確認する。
Q: ブロックの設定をリセットしたいです
A: ブロックを削除して、同じブロックを再度挿入すると初期値に戻る。または、サイドバーの各項目を手動でデフォルト値に戻す。
Q: スマホでの表示を確認したいです
A: エディター左下のデバイスアイコン（PC/タブレット/スマホ）でエディター上の見た目を切り替えられる。ただし正確な表示は「プレビュー → 新しいタブでプレビュー」でブラウザの検証ツール（F12）を使うか、実際のスマホで確認するのが確実。
関連ページ
| ページ | 内容 |
|---|---|
| 全ブロックリファレンス | 全147ブロックの一覧・ティア・プレビューリンク |
| 共通サイドバー設定 | 全ブロック共通の横幅・余白・背景・アニメーション設定 |
| 固定ページの編集 | 固定ページの作成・編集方法 |
| 投稿の編集 | ブログ投稿の作成・編集方法 |
| カラー・フォント設定 | テーマ全体のカラー・フォント設定 |
| レスポンシブガイド | PC/タブレット/スマホ表示の調整方法 |
| トラブルシューティング | よくある問題と解決法 |
最終更新: 2026-03-16 18:00