本文へスキップ

BLOCK MODE

ブロックエディター(ブロックモード)

「入力欄を埋める」から「書きながらつくる」へ。編集画面を選べるようになりました。
段落・見出し・表・カラムなどのブロックを、仕上がりに近い画面の上で並べます。どちらのモードで書いた記事も、切り替えたあとにそのまま開けます。

概要

ブロックエディターは、投稿の編集画面を「ブロックモード」に切り替える機能です。
段落・見出し・画像・表・カラムなどのブロックを、公開したときに近い見た目の画面の上で、文章を書く感覚で並べて記事をつくります。
これまでの「モジュールモード」(ページモジュールの入力欄を埋めて組み立てる編集画面)とは、環境設定の「投稿エディター」で切り替えます。
どちらのモードで書いても保存される中身は同じ形式なので、切り替えたあとも、これまでの記事をそのまま開いて直せます。

かんたんに言うと

ブロックモードは、ワープロで文章を書くのに近い編集画面です。
文字を打つとそのまま段落になり、「+」や「/」から見出し・画像・表などのブロックを呼び出して、書いている場所に差し込めます。

画面に出ているのは、公開したときに近い見た目です。
見出しの大きさや改行の具合を確かめながら書けるので、プレビューと編集画面を行き来する回数が減ります。
文字の色や背景、公開期間といった細かな設定は、選んだブロックごとに右のパネルで決めます。

モジュールモードとブロックモードは、保存される中身が同じです。
サイトに用意したページモジュールもブロックの一つとして並べられるので、デザインのルールを崩さずに、書きやすさだけを変えられます。

この機能のポイント

  • 01

    見たままに書ける

    編集画面が公開ページに近い見た目です。見出し・表・カラムの仕上がりを確かめながら書けます。

  • 02

    30種類を超えるブロック

    段落・見出し・リスト・引用・表・画像・ギャラリー・カラム・グループ・ボタン・埋め込みなどを「+」や「/」から追加できます。

  • 03

    モジュールモードと同じ保存形式

    どちらのモードで書いた記事も、切り替えたあとにそのまま開けます。移行の作業はいりません。

  • 04

    ページモジュールもそのまま使える

    サイトに用意したページモジュールも、ブロックの一つとして並べられます。入力はブロックの中か、右のパネルで行います。

  • 05

    HTMLで書くこともできる

    記事全体を HTML で編集するコードエディターを備えています。ビジュアル編集に戻るときに、タグの閉じ忘れなどを行番号つきで知らせます。

  • 06

    ブロックの見た目を管理画面で決める

    「ブロック管理」で、使うブロックの選択・アイコン・共通の SCSS とブロックごとの SCSS を設定できます。

使い方の流れ

  1. ブロックモードに切り替える

    環境設定の「投稿エディター」で「ブロックモード」を選びます。保存形式は同じなので、いつでも元に戻せます。

  2. 文章を書いて、ブロックを足す

    文字を打つと段落になります。「+」や「/」から見出し・画像・表などを選び、書いている場所に差し込みます。

  3. 右のパネルで細かく整える

    選んだブロックの文字の色・背景・アンカー・公開期間・下余白などを、右のパネルで設定します。

  4. いつもどおり保存・公開する

    下書き保存・公開申請・公開の流れは、モジュールモードと同じです。リビジョン履歴も残ります。

画面で見る機能の詳細

ブロックの追加

左上の「+」か、文中で「/」を打つと、ブロックの一覧が開きます。名前で探すこともでき、選んだブロックは書いている場所に入ります。

右のパネルでブロックを設定

選んだブロックの設定が右に出ます。カラムなら列の数・幅の比率・列の間隔、どのブロックでも公開・非公開、公開期間、下余白を決められます。

コードエディター(HTML で編集)

上部の「<>」で、記事全体を HTML で編集できます。ビジュアル編集に戻るときに構文を確かめ、誤りがあれば行番号つきで知らせます。

環境設定の「投稿エディター」

モジュールモード(従来)とブロックモードを選びます。保存される中身は同じ形式なので、切り替えたあとも記事はそのまま開けます。

できること

  • モジュールモードとブロックモードの切り替え(環境設定の「投稿エディター」)
  • 公開ページに近い見た目での編集
  • 「+」「/」・ブロック間の「+」からのブロック追加
  • 段落・見出し・リスト・引用・表・画像・ギャラリー・カラム・グループ・ボタン・埋め込みなどのブロック
  • サイトのページモジュールをブロックとして配置
  • 文字の色・サイズ・背景色・グラデーション・アンカー・追加クラスの設定
  • ブロックごとの公開・非公開、公開期間、下余白
  • 記事全体を HTML で編集するコードエディター(構文の確認つき)
  • 一覧表示(リストビュー)・元に戻す/やり直し・集中モード
  • 「ブロック管理」での使用ブロックの選択・アイコン・SCSS の設定

活用シーン

  • お知らせやブログを、文章を書く感覚でどんどん更新したい
  • ほかの CMS のブロック型の編集画面に慣れた担当者が、迷わず書けるようにしたい
  • 見出しや表の仕上がりを確かめながら書き、プレビューとの行き来を減らしたい
  • サイトのデザインルール(ページモジュール)は守りつつ、書きやすさだけを上げたい

※ ブロックモードは投稿の編集画面(管理画面のテンプレート「studio」)で使えます。固定ページは、これまでどおりモジュールモードで編集します。

まずはお気軽にご相談ください。

自由なデザインと、迷わない運用を。
Container で始めませんか。

WordPress・独自CMSからの移行もご相談ください。お客様のサイト規模・運用体制に合わせて個別にご提案します。