第4章 ページを編集する
いよいよ実際の編集です。前の章で開いた編集画面を使って、「ブロック（箱）」と「パーツ（部品）」を足したり書きかえたりしていきます。
このマニュアルでは、CMSの編集画面（フォーム形式）での編集を説明します。 実際のサイトの見た目を見ながら直したいときは 👉 5. 見たまま編集（ビジュアル編集） もあわせてご覧ください。
ワンポイント ページの開き方や、編集画面全体の構成（ヘッダー・中央・設定パネル）、状態バッジの意味は 👉 3. ページの構造を知る で説明しています。まだ読んでいない方は先にそちらをご覧ください。
ブロックを追加する
新しい区切り（箱）を足したいときは、「＋ ブロックを追加」 をクリックします。 ※見たまま編集の画面でブロックの上を右クリックしても追加できます（くわしくは 👉 5. 見たまま編集（ビジュアル編集））。 追加できるブロックの候補が一覧で出てくるので、置きたい種類を選びます。
- 新しいブロック：通常・全幅・カラム・左／右・ヒーロー・記事一覧・カテゴリ一覧・フォームなど（3. ページの構造を知る で紹介した種類）から選んで、まっさらな箱を置きます
- 共通ブロック：すでにある共通ブロック（ヘッダー・フッターなど）の一覧から選んで、同じ中身の箱を置きます
ワンポイント まずは「通常」ブロックを足して、その中にパーツを入れていくのが基本の流れです。
ワンポイント（新しいページのヘッダー・フッター） サイトに共通のヘッダー・フッター（全ページ共通のブロック）が用意されている場合、新しくページを作ると、自動でページの一番上に共通ヘッダー、一番下に共通フッターが置かれます。ページごとに置き直す必要はありません。
パーツを追加する
ブロック（箱）を足したら、その中に パーツ（部品） を入れていきます。
ブロックの中の 「＋ パーツ追加」 をクリックすると、パーツの種類を選ぶ画面が出ます。 「テキストのみ」「画像のみ」「テキスト＋画像」など、入れたい形を選びます。
ワンポイント パーツは、選んだあとで種類を変えることもできます。パーツの上で右クリック（またはメニュー）から 「パーツの種類を変更」 を選ぶと、入力した内容を引き継いだまま別の形に切りかえられます。 ヒーロー（A 全面写真／B 分割／C 額縁）どうしも、この方法で入力した写真や文章を引き継いだまま切りかえられます。
パーツの中身を編集する
追加したパーツには、その形に合わせた入力欄が表示されます。
文章を入れる
文章の入力欄には、そのまま文字を入力します。 太字・色・リンクなどの装飾は、入力欄の上に出るツールバーから設定できます。
画像を入れる
画像の欄では、「画像を選択」 から画像を選びます。 すでにアップロード済みの画像を選ぶか、新しくアップロードして使います。 （画像の管理について詳しくは 👉 8. 画像・動画を管理する）
文字色を変える
パーツごとに、そのパーツ内の文字色をまとめて設定できます。パーツの設定欄にある 「文字色」 から選びます。 （ブロック設定にも同じ「文字色」項目がありますが、こちらは箱全体の初期色です。パーツ側の設定はそのパーツだけに適用されます）
パーツ全体をリンクにする（全体リンク）
「商品紹介のカードのどこを押しても、商品ページへ移動する」のように、パーツ全体（またはブロック全体）を1つのリンクにできます。 パーツの 「スタイル設定」 を開き、いちばん下の 「全体リンク」 欄で設定します。
| 項目 | 説明 |
|---|---|
| リンク先 | 移動先のURL、またはサイト内のページを選びます。空欄にするとリンクなしに戻ります |
| このパーツ全体 | このパーツのどこを押してもリンク先へ移動します（カード1枚分など） |
| ブロック全体 | このパーツが入っているブロック（箱）のどこを押しても移動します（大きなバナーなど） |
| 新しいタブで開く | チェックを入れると、リンク先を別のタブで開きます |
ワンポイント - パーツの中にボタンや文字のリンクがある場合、そのリンクは全体リンクより優先され、そのまま押せます。ただし「ブロック全体」を選んだブロックでは、中のリンクが押せなくなることがあります。ブロック全体をリンクにするときは、中に別のリンクを置かないのがおすすめです。 - リンク先に使えるのは、
https://などで始まるURL、サイト内のページ、メールアドレス（mailto:）、電話番号（tel:）です。 - 見たまま編集（ビジュアル編集）の画面では、編集しやすいよう全体リンクは押しても移動しません。動きは「プレビュー」や実際のサイトで確認してください。
ブロックの設定（背景色など）
ブロック（箱）ごとに、背景色などを設定できます。 ブロックの 「ブロック設定」 を開くと、次のような項目を調整できます。
- 背景色：この箱だけ色をつけて目立たせる
- ブロック名：わかりやすい名前をつける
- 余白：箱の上・左右・下のすき間を、あり／なしで切りかえる
- 装飾：背景に輪や図形などの飾りを重ねる（サイトのデザインで用意された飾りから選びます・最大8個）
- このブロックの CSS：この箱だけの細かい見た目を、CSS（見た目を指定する専用の書き方）で調整する欄です（制作者向け）
ワンポイント（「装飾」「このブロックの CSS」について） この2つは、主にサイトを制作した弊社（または制作者の方）がデザインを仕上げるために使う欄です。すでに入っている内容は、消したり書きかえたりしないでください（見た目がくずれる原因になります）。 入っているブロックには、ブロック一覧のブロック名の横に黄色い札 「CSS」「装飾 ○」 が表示されます。札にマウスを重ねると、中身の一部を確認できます。 くわしい書き方は 👉 17. デザイナー・制作者向け：スタイルのしくみ詳細 をご覧ください。
ワンポイント 「共通ブロックにする」は、ブロック設定の中ではなく、ブロック一覧の各行にある 「共通にする」 ボタンから行います。
並べ替える
ブロックやパーツは、ドラッグ（つかんで移動） で順番を入れかえられます。 各行に表示される ハンドル（⠿ のような、たての点々のつまみ） をつかんで、 並べたい場所へドラッグして放すだけで、上下の順番が変わります。
複製する（同じものをもう1つ作る）
「同じ形のカードをもう1枚足したい」「このセクションをまるごと使い回したい」ときは、ブロックやパーツを複製できます。 複製したものは、元のすぐ後ろに置かれます。
ブロックを複製する
ブロック一覧の各行の右にある 「⋮」（メニュー） をクリックし、「ブロック複製」 を選びます。 ブロックの設定と、中に入っているパーツがまるごとコピーされます。
パーツを複製する
パーツの見出しの右にある 複製ボタン（2枚の紙が重なったアイコン） をクリックします。 パーツの種類・中身・スタイル設定がそのままコピーされます。
ワンポイント - パーツの複製でコピーされるのは、保存済みの内容です。書きかけの内容があるときは、先に「一括保存」してから複製してください。 - 共通ブロック（全ページ共通のブロック）を複製すると、共通ではないこのページ専用のコピーになります。コピーを直しても、ほかのページには影響しません。 - ヘッダー・フッターとグループ（ブロックをまとめる枠）は複製できません。グループの中のブロックは1つずつ複製できます。 - 見たまま編集（ビジュアル編集）の画面では、右クリックのメニューからも複製できます（👉 5. 見たまま編集（ビジュアル編集））。
保存する
編集した内容は、ヘッダーの 「一括保存」 をクリックすると、まとめて保存されます。 ボタンが「保存済み」に変われば、保存完了です。
⚠️ 「一括保存」はCMS内に保存するだけです あくまでCMS内に作業内容を保存するだけで、この時点では、まだ実際のサイトには反映されていません（バッジが「未反映」になります）。
実際のサイトに反映する
保存した内容を本番サイトに出すには、ヘッダーの 「ページに反映」 をクリックします。 これで編集内容が実際のホームページに公開されます。
「ページに反映」のくわしいしくみ（公開・反映）については 👉 6. 公開のしくみ（サイトへの反映） をご覧ください。
そのほかの操作
ヘッダーやページ設定から、次の操作もできます。
| 操作 | 説明 |
|---|---|
| プレビュー | 公開前に、仕上がりを別タブで確認する |
| 実ページ確認 | 公開中のページを、実際のサイトで開いて確認する（公開中のみ） |
| 複製 | このページをまるごとコピーして、新しいページを作る |
| 削除 | このページを削除する（※トップページは削除できません） |
ページ設定（タイトル・URLなど）
設定パネルでは、次のようなページの基本情報を変更できます。
| 項目 | 説明 |
|---|---|
| タイトル | ページの名前 |
| 親ページ | どのページの下にぶら下げるか（階層） |
| URLセグメント | URLの区切りになる文字（例：about）。階層の1段分だけを入れます |
| スタイルテンプレート | ページの見た目のひな形。指定しなければサイトの既定テンプレートが使われます（仕組みの全体像は 👉 13. デザイン設定 の「全体像：素材 → スタイルテンプレート → ページ・投稿」） |
| 会員限定（アクセス制限） | このページを、登録した会員だけが見られるようにする設定（オプション機能） |
「会員限定（アクセス制限）」の詳しい使い方は 👉 10. 会員機能を使う（オプション） をご覧ください。
ワンポイント（適用スタイル表示バー） ページ設定パネルの上部には、今このページに当たっている「スタイルテンプレート」「ベーシックスタイル」「カラー・フォント」が表示されるバーがあります。個別に設定していない項目には「（システム既定）」と表示され、クリックするとその設定画面へ移動できます。今どんなデザインが適用されているかを確認したいときに便利です。
元に戻したい・履歴を確認したい（やり直し機能）
編集の途中で「さっきの状態に戻したい」というときは、見たまま編集（ビジュアル編集）の画面でブロックやパーツを右クリックして、履歴を開きます。 履歴は、戻したい内容によって2種類あります。どちらも新しい順に一覧表示され、選んだ状態へ戻すことができます（直近10件まで）。
| メニュー | 戻せるもの |
|---|---|
| ↩ 中身の履歴を見る | そのブロックの中身の書きかえ（文章・画像・色などの設定）。ブロックの上で右クリックすると出ます |
| ↩ 配置の履歴を見る | ページの組み立て（ブロックやパーツの追加・削除・並べ替え・移動・複製）。ブロック・パーツどちらの上で右クリックしても出ます |
ワンポイント - 「中身の履歴」はブロック単位の機能です。1回分の履歴には、そのブロックの設定と、中に入っているパーツすべての内容がまとめて保存されます。ページ全体を一気に戻すものではありません。 - 「配置の履歴」はページ単位です。「いま」の1つ前の行を選ぶと、直前の操作を取り消せます。 - ほかの方が同じページの組み立てを変更したあとは、配置の履歴から戻せないことがあります（内容を上書きしてしまわないための仕様です）。
まとめ
- ページを開く（3章参照）
- ブロックを追加する（箱を置く）
- その中にパーツを追加する（部品を入れる）
- パーツの文章・画像を編集する
- 一括保存する（CMS内に保存）
- ページに反映する（実際のサイトへ公開）
← 目次にもどる ／ 次は 👉 5. 見たまま編集（ビジュアル編集）