第5章 見たまま編集（ビジュアル編集）
前の章では、フォーム形式でブロックやパーツを編集しました。 この章では、実際のサイトの見た目を横に表示しながら編集する「ビジュアル編集」を紹介します。 「どこを直すとどう変わるか」が目で見てわかるので、とても直感的です。
ビジュアル編集とは
ページ編集画面を開くと、最初から画面の横に実際のページの見た目（プレビュー）が表示されています。 これが「ビジュアル編集」の画面です。
このプレビューの中で気になる場所をクリックすると、 その部分の編集欄がすぐに開くしくみです。「見ながら直す」ができます。
ワンポイント プレビューは、たたんで小さくしまっておくこともできます。たたんだあとにもう一度表示したいときは、「ビジュアル編集を開く」 ボタンで再表示できます。
ワンポイント ここに表示されるのは下書き（作業中）の状態です。 編集するとプレビューにもすぐ反映されますが、この時点ではまだ実際のサイトには出ていません。 本番に出すには、あとで「反映」する必要があります。
クリックして編集する
プレビューの中のブロックやパーツをクリックすると、 右側の編集フォームで、その部分が自動的に開いてスクロールします。
- 直したい文章や画像を、プレビュー上で見つけてクリック
- → 右側でその編集欄が開く
- → 文章や画像を書きかえる
ワンポイント プレビューの上でマウスを重ねる（ホバーする）と、 右側の一覧の対応する場所も色づいて、どこを指しているかがわかりやすくなります。
右クリックのメニュー
プレビューの中で右クリックすると、その場所に対する操作メニューが出ます。 パーツの上で右クリックした場合と、ブロックの上（パーツのないところ）で右クリックした場合とで、出てくる項目が異なります。
パーツの上で右クリックしたとき
| メニュー | できること |
|---|---|
| このブロックにパーツ追加 | 同じブロックの中に新しいパーツを足す |
| このパーツを編集 | クリックしたときと同じく、右側の編集欄を開く |
| パーツの種類を変更 | パーツの形を、中身を引き継いだまま別の形に変える |
| パーツを複製 | 同じパーツをもう1つ作り、すぐ後ろに置く |
| パーツを削除 | そのパーツを消す |
| 配置の履歴を見る | パーツやブロックの追加・削除・並べ替えなどを、前の状態に戻す |
ブロックの上で右クリックしたとき
| メニュー | できること |
|---|---|
| ブロックを後ろに追加 | クリックした場所のとなりに新しいブロックを足す |
| このブロックを編集 | 右側の編集欄で、そのブロックの設定を開く |
| ブロックを複製 | 同じブロックを中のパーツごともう1つ作り、すぐ後ろに置く（ヘッダー・フッターには出ません） |
| ブロックを削除 | そのブロックを消す |
| 中身の履歴を見る | そのブロックの文章・画像・設定の書きかえを、前の状態にもどす |
| 配置の履歴を見る | ブロックやパーツの追加・削除・並べ替えなどを、前の状態にもどす |
ワンポイント 「パーツの種類を変更」が選べるのは、文章や画像を組み合わせた通常のパーツだけです。メニュー・スライダー・ログインパーツなど、特別な役割を持つパーツは種類の変更ができません。 ただしヒーロー（A 全面写真／B 分割／C 額縁）は、ヒーローどうしであれば種類を変更できます（候補にはヒーローだけが並びます）。 複製と履歴のくわしい説明は 👉 4. ページを編集する の「複製する」「元に戻したい・履歴を確認したい」をご覧ください。
ドラッグで並べ替える
プレビューの中でも、ブロックやパーツをドラッグ（つかんで移動）して 順番を入れかえることができます。実際の見た目を見ながら並べ替えられます。
並べ替えたいブロックやパーツにマウスを重ねる（ホバーする）と、 つまむための ハンドル（⠿ のような、たての点々のつまみ） が表示されます。 このハンドルをつかんでドラッグすると、順番を入れかえられます。
- ブロックのハンドルをつかめば、ブロックごと移動できます
- パーツのハンドルをつかめば、パーツを別のブロックへ移すこともできます
ワンポイント ハンドル以外の場所をドラッグしても動きません。かならずハンドル（⠿）をつかんで移動してください。
並べ替えできない・落とせない場合があります
ドラッグで並べ替えを試したときに動かない場合は、次のいずれかに当てはまっていないか確認してください。
- ヘッダー・フッター・左右のサイドバーは、位置が固定されているため動かせません
- 共通ブロック（全ページ共通のブロック）の中には、新しいパーツを追加で落とし込めません
- 横幅の広いレイアウト専用のパーツ（大きな見出し画像・スライダーなど）は、カラム分けされた狭いブロックやサイドバーには落とせません
これらは誤操作ではなく、レイアウトが崩れないようにするための仕様です。
見えにくいパーツをつかむ（青い札）
背景に重ねた飾りのパーツなど、ほかの要素の下に隠れていたり、大きさがほとんどなかったりして、プレビューの上から直接クリックできないパーツがあります。 こうしたパーツは、ブロックにマウスを重ねると、ブロックの左下に青い札（例：「⠿ カスタムHTML #171 ○○（2番目）」）が表示されます。
- 札をクリックすると、そのパーツの編集欄が開きます
- 札を右クリックすると、パーツのメニューが出ます
- 札をドラッグすると、パーツを移動できます（共通ブロックの中のパーツは除く）
札には、パーツの番号と、ブロックの中で何番目のパーツかが表示されます。同じ種類の札がいくつも並んだときは、この番号で見分けてください。
ブロックの「CSS」「装飾」の目印
「このブロックの CSS」や「装飾」が設定されているブロックには、プレビューの右下に黄色い札（「CSS · 装飾 2」など）が表示されます。 この札は編集画面の中だけに出るもので、実際のサイトには表示されません。 （「装飾」「このブロックの CSS」については 👉 4. ページを編集する の「ブロックの設定」をご覧ください）
パソコン表示／スマホ表示を切りかえる
プレビューの上部で、「PC表示」 と 「スマホ表示」 を切りかえられます。
- PC表示：パソコンで見たときのレイアウト
- スマホ表示：スマートフォンで見たときのレイアウト（幅を狭くして表示）
スマホでの見え方も確認しながら編集できるので、両方チェックしておくと安心です。
プレビューの表示幅を変える（S / auto / L）
プレビューの右上には、プレビュー欄そのものの幅を選べる 「S」「auto」「L」 のボタンがあります。
- S：やや狭い幅で表示
- auto：画面の幅に合わせて自動調整
- L：やや広い幅で表示
編集フォームを広めに使いたいときは S、見た目をしっかり確認したいときは L、といったように好みで選べます。
ワンポイント スマホ表示を選んでいる間は、この幅切替は効きません（スマホの画面幅にあわせて自動的に固定されます）。ボタンを押しても幅が変わらないときは、PC表示に戻っているかご確認ください。
「プレビューが最新ではない」と出たとき
編集を進めていると、まれに 「表示中のプレビューが最新ではないようです」 といったメッセージが出ることがあります。
これは、プレビューの表示内容と、実際の編集内容にズレが出たときのお知らせです。 いちど 「反映」 してから、もう一度操作すると解消します。
本番サイトに反映する
ビジュアル編集で直した内容も、フォーム編集と同じく、 最後に 「ページに反映」 をクリックすることで、実際のサイトに公開されます。
反映のくわしいしくみは 👉 6. 公開のしくみ（サイトへの反映） をご覧ください。
まとめ
- ページ編集画面には、最初から実際の見た目（プレビュー）が表示されている
- プレビューをクリックすると、その部分の編集欄が開く
- 右クリックで、追加・複製・削除・種類変更・履歴などの操作ができる
- 上からクリックできないパーツは、ブロック左下の青い札からつかめる
- PC表示／スマホ表示を切りかえて両方の見え方を確認できる
- プレビューの幅は S／auto／L で調整できる（スマホ表示中は幅固定）
- 直したら最後に 「ページに反映」 で本番へ
← 目次にもどる ／ 次は 👉 6. 公開のしくみ（サイトへの反映）