BLOCK MODE
ブロックエディター(ブロックモード)
「入力欄を埋める」から「書きながらつくる」へ。編集画面を選べるようになりました。
段落・見出し・表・カラムなどのブロックを、仕上がりに近い画面の上で並べます。どちらのモードで書いた記事も、切り替えたあとにそのまま開けます。
概要
ブロックエディターは、投稿の編集画面を「ブロックモード」に切り替える機能です。
段落・見出し・画像・表・カラムなどのブロックを、公開したときに近い見た目の画面の上で、文章を書く感覚で並べて記事をつくります。
これまでの「モジュールモード」(ページモジュールの入力欄を埋めて組み立てる編集画面)とは、環境設定の「投稿エディター」で切り替えます。
どちらのモードで書いても保存される中身は同じ形式なので、切り替えたあとも、これまでの記事をそのまま開いて直せます。
かんたんに言うと
ブロックモードは、ワープロで文章を書くのに近い編集画面です。
文字を打つとそのまま段落になり、「+」や「/」から見出し・画像・表などのブロックを呼び出して、書いている場所に差し込めます。
画面に出ているのは、公開したときに近い見た目です。
見出しの大きさや改行の具合を確かめながら書けるので、プレビューと編集画面を行き来する回数が減ります。
文字の色や背景、公開期間といった細かな設定は、選んだブロックごとに右のパネルで決めます。
モジュールモードとブロックモードは、保存される中身が同じです。
サイトに用意したページモジュールもブロックの一つとして並べられるので、デザインのルールを崩さずに、書きやすさだけを変えられます。
この機能のポイント
-
01
見たままに書ける
編集画面が公開ページに近い見た目です。見出し・表・カラムの仕上がりを確かめながら書けます。
-
02
30種類を超えるブロック
段落・見出し・リスト・引用・表・画像・ギャラリー・カラム・グループ・ボタン・埋め込みなどを「+」や「/」から追加できます。
-
03
モジュールモードと同じ保存形式
どちらのモードで書いた記事も、切り替えたあとにそのまま開けます。移行の作業はいりません。
-
04
ページモジュールもそのまま使える
サイトに用意したページモジュールも、ブロックの一つとして並べられます。入力はブロックの中か、右のパネルで行います。
-
05
HTMLで書くこともできる
記事全体を HTML で編集するコードエディターを備えています。ビジュアル編集に戻るときに、タグの閉じ忘れなどを行番号つきで知らせます。
-
06
ブロックの見た目を管理画面で決める
「ブロック管理」で、使うブロックの選択・アイコン・共通の SCSS とブロックごとの SCSS を設定できます。
使い方の流れ
-
ブロックモードに切り替える
環境設定の「投稿エディター」で「ブロックモード」を選びます。保存形式は同じなので、いつでも元に戻せます。
-
文章を書いて、ブロックを足す
文字を打つと段落になります。「+」や「/」から見出し・画像・表などを選び、書いている場所に差し込みます。
-
右のパネルで細かく整える
選んだブロックの文字の色・背景・アンカー・公開期間・下余白などを、右のパネルで設定します。
-
いつもどおり保存・公開する
下書き保存・公開申請・公開の流れは、モジュールモードと同じです。リビジョン履歴も残ります。
画面で見る機能の詳細
ブロックの追加
左上の「+」か、文中で「/」を打つと、ブロックの一覧が開きます。名前で探すこともでき、選んだブロックは書いている場所に入ります。
右のパネルでブロックを設定
選んだブロックの設定が右に出ます。カラムなら列の数・幅の比率・列の間隔、どのブロックでも公開・非公開、公開期間、下余白を決められます。
コードエディター(HTML で編集)
上部の「<>」で、記事全体を HTML で編集できます。ビジュアル編集に戻るときに構文を確かめ、誤りがあれば行番号つきで知らせます。
環境設定の「投稿エディター」
モジュールモード(従来)とブロックモードを選びます。保存される中身は同じ形式なので、切り替えたあとも記事はそのまま開けます。
できること
- モジュールモードとブロックモードの切り替え(環境設定の「投稿エディター」)
- 公開ページに近い見た目での編集
- 「+」「/」・ブロック間の「+」からのブロック追加
- 段落・見出し・リスト・引用・表・画像・ギャラリー・カラム・グループ・ボタン・埋め込みなどのブロック
- サイトのページモジュールをブロックとして配置
- 文字の色・サイズ・背景色・グラデーション・アンカー・追加クラスの設定
- ブロックごとの公開・非公開、公開期間、下余白
- 記事全体を HTML で編集するコードエディター(構文の確認つき)
- 一覧表示(リストビュー)・元に戻す/やり直し・集中モード
- 「ブロック管理」での使用ブロックの選択・アイコン・SCSS の設定
活用シーン
- お知らせやブログを、文章を書く感覚でどんどん更新したい
- ほかの CMS のブロック型の編集画面に慣れた担当者が、迷わず書けるようにしたい
- 見出しや表の仕上がりを確かめながら書き、プレビューとの行き来を減らしたい
- サイトのデザインルール(ページモジュール)は守りつつ、書きやすさだけを上げたい
※ ブロックモードは投稿の編集画面(管理画面のテンプレート「studio」)で使えます。固定ページは、これまでどおりモジュールモードで編集します。