第4章 ページを編集する

← 目次にもどる

いよいよ実際の編集です。前の章で開いた編集画面を使って、「ブロック(箱)」と「パーツ(部品)」を足したり書きかえたりしていきます。

このマニュアルでは、CMSの編集画面(フォーム形式)での編集を説明します。 実際のサイトの見た目を見ながら直したいときは 👉 5. 見たまま編集(ビジュアル編集) もあわせてご覧ください。

ワンポイント ページの開き方や、編集画面全体の構成(ヘッダー・中央・設定パネル)、状態バッジの意味は 👉 3. ページの構造を知る で説明しています。まだ読んでいない方は先にそちらをご覧ください。


ブロックを追加する

新しい区切り(箱)を足したいときは、「+ ブロックを追加」 をクリックします。 ※ビジュアル編集のブロック(赤枠)上での右クリックからもブロックの追加は行えます。 追加できるブロックの候補が一覧で出てくるので、置きたい種類を選びます。

  • 新しいブロック:通常・全幅・カラム・左/右・ヒーロー・記事一覧・カテゴリ一覧・フォームなど(3. ページの構造を知る で紹介した種類)から選んで、まっさらな箱を置きます
  • 共通ブロック:すでにある共通ブロック(ヘッダー・フッターなど)の一覧から選んで、同じ中身の箱を置きます

「ブロックを追加」を押して、候補の一覧が開いているところ

ワンポイント まずは「通常」ブロックを足して、その中にパーツを入れていくのが基本の流れです。


パーツを追加する

ブロック(箱)を足したら、その中に パーツ(部品) を入れていきます。

ブロックの中の 「+ パーツ追加」 をクリックすると、パーツの種類を選ぶ画面が出ます。 「テキストのみ」「画像のみ」「テキスト+画像」など、入れたい形を選びます。

パーツ追加の画面。パーツの種類が並んでいる

ワンポイント パーツは、選んだあとで種類を変えることもできます。パーツの上で右クリック(またはメニュー)から 「パーツの種類を変更」 を選ぶと、入力した内容を引き継いだまま別の形に切りかえられます。


パーツの中身を編集する

追加したパーツには、その形に合わせた入力欄が表示されます。

文章を入れる

文章の入力欄には、そのまま文字を入力します。 太字・色・リンクなどの装飾は、入力欄の上に出るツールバーから設定できます。

文章の入力欄と、上に並ぶ装飾ツールバー

画像を入れる

画像の欄では、「画像を選択」 から画像を選びます。 すでにアップロード済みの画像を選ぶか、新しくアップロードして使います。 (画像の管理について詳しくは 👉 8. 画像・動画を管理する

文字色を変える

パーツごとに、そのパーツ内の文字色をまとめて設定できます。パーツの設定欄にある 「文字色」 から選びます。 (ブロック設定にも同じ「文字色」項目がありますが、こちらは箱全体の初期色です。パーツ側の設定はそのパーツだけに適用されます)


ブロックの設定(背景色など)

ブロック(箱)ごとに、背景色などを設定できます。 ブロックの 「ブロック設定」 を開くと、次のような項目を調整できます。

  • 背景色:この箱だけ色をつけて目立たせる
  • ブロック名:わかりやすい名前をつける
  • 余白:箱の上・左右・下のすき間を、あり/なしで切りかえる

ブロック設定を開いた画面

ワンポイント 「共通ブロックにする」は、ブロック設定の中ではなく、ブロック一覧の各行にある 「共通にする」 ボタンから行います。


並べ替える

ブロックやパーツは、ドラッグ(つかんで移動) で順番を入れかえられます。 各行に表示される ハンドル(⠿ のような、たての点々のつまみ) をつかんで、 並べたい場所へドラッグして放すだけで、上下の順番が変わります。

ハンドル(⠿)をつかんでブロックを並べ替えているところ


保存する

編集した内容は、ヘッダーの 「一括保存」 をクリックすると、まとめて保存されます。 ボタンが「保存済み」に変われば、保存完了です。

「一括保存」ボタン

⚠️ 「一括保存」はCMS内に保存するだけです あくまでCMS内に作業内容を保存するだけで、この時点では、まだ実際のサイトには反映されていません(バッジが「未反映」になります)。


実際のサイトに反映する

保存した内容を本番サイトに出すには、ヘッダーの 「ページに反映」 をクリックします。 これで編集内容が実際のホームページに公開されます。

「ページに反映」のくわしいしくみ(公開・反映)については 👉 6. 公開のしくみ(サイトへの反映) をご覧ください。


そのほかの操作

ヘッダーやページ設定から、次の操作もできます。

操作 説明
プレビュー 公開前に、仕上がりを別タブで確認する
実ページ確認 公開中のページを、実際のサイトで開いて確認する(公開中のみ)
複製 このページをまるごとコピーして、新しいページを作る
削除 このページを削除する(※トップページは削除できません)

ページ設定(タイトル・URLなど)

設定パネルでは、次のようなページの基本情報を変更できます。

項目 説明
タイトル ページの名前
親ページ どのページの下にぶら下げるか(階層)
URLセグメント URLの区切りになる文字(例:about)。階層の1段分だけを入れます
スタイルテンプレート ページの見た目のひな形
会員限定(アクセス制限) このページを、登録した会員だけが見られるようにする設定(オプション機能)

ページ設定パネル

「会員限定(アクセス制限)」の詳しい使い方は 👉 10. 会員機能を使う(オプション) をご覧ください。

ワンポイント(適用スタイル表示バー) ページ設定パネルの上部には、今このページに当たっている「スタイルテンプレート」「ベーシックスタイル」「カラー・フォント」が表示されるバーがあります。個別に設定していない項目には「(システム既定)」と表示され、クリックするとその設定画面へ移動できます。今どんなデザインが適用されているかを確認したいときに便利です。


元に戻したい・履歴を確認したい(やり直し機能)

編集の途中で「さっきの内容に戻したい」というときは、ブロックやパーツを右クリックして 「履歴を見る」 を選びます。 これまでの変更内容が新しい順に一覧表示され、選んだ状態へ戻すことができます(直近10件まで)。

ワンポイント やり直しはブロック単位の機能です。1回分の履歴には、そのブロックの設定と、中に入っているパーツすべての内容がまとめて保存されます。ページ全体を一気に戻すものではありません。 また、対象は文章や画像などの中身の書きかえのみです。ブロックやパーツの追加・削除・並べ替えは、現時点ではこの「履歴を見る」では戻せません。


まとめ

  1. ページを開く(3章参照)
  2. ブロックを追加する(箱を置く)
  3. その中にパーツを追加する(部品を入れる)
  4. パーツの文章・画像を編集する
  5. 一括保存する(CMS内に保存)
  6. ページに反映する(実際のサイトへ公開)

← 目次にもどる / 次は 👉 5. 見たまま編集(ビジュアル編集)