アイキャッチ画像

WordPressのビジュアルエディターが、Gutenbergというブロックエディターに変わって驚いたという方も多いですよね。

今回は、Gutenberg(ブロックエディター)の基本的な使い方を、初心者でも分かりやすく解説していきます。

Gutenbergとは?

WordPress Gutenberg(ブロックエディター)画面

Gutenbergとは、WordPress5.0以降のバージョンから適用されたエディターです。

WordPress4.9以前のバージョンを使っている方は、Gutenbergプラグインを有効化することで使えるようになります。

WordPress Gutenbergプラグイン

Gutenbergは、活版印刷の生みの親であるヨハネス・グーテンベルグという人から由来しています。

Gutenberg(ブロックエディター)の特徴

Gutenberg(ブロックエディター)の特徴は、コンテンツごとにブロックで分けられていることです。

WordPress Gutenberg(ブロックエディター)画面

ブロックエディターでは以下のような操作を行うことができます。

  • ブロック単位で編集できる
  • ブロックの入れ替えが簡単にできる
  • よく使うブロックは「再利用ブロック」に登録することで便利になる
  • 複数のブロックをまとめて移動・削除することができる

また、ビジュアルエディターで書いた記事を編集する時、「クラシックブロック」として変換されるので、互換性もサポートされていることが特徴です。

旧エディターをそのまま使い続けたい場合は?

WordPress Classic Editor

旧エディターでしか対応していないプラグインやテーマを使い続けている場合は、「Classic Editor」プラグインを有効化することで、旧エディターを使えるようになります。

Gutenbergの基本的な使い方

プロフィール用アイコン
みきてぃ東西線

Gutenbergの編集画面は、以下のようになっているよ!

WordPress Gutenberg(ブロックエディター)画面

※2020年8月現在。

編集スペース

WordPress Gutenberg(ブロックエディター)画面

コンテンツを編集するためのスペースです。

左上のメニュー

WordPress Gutenberg 左上のメニュー
  • ブロックの追加ボタン:ブロックを追加します。
  • 元に戻すボタン:編集した内容を1つ手前に戻します。
  • 進むボタン:編集した内容を1つ先に進みます。
  • コンテンツ構造ボタン:その記事内のコンテンツ構造を確認できます。
  • ブロックナビゲーション:各ブロックに移動することができます。

右上のボタン

WordPress Gutenberg 右上のメニュー1
  • 下書き保存:記事を下書き保存します。
  • プレビュー:編集中の記事をプレビューで確認できます。
  • 公開する(更新):記事を公開、または一度公開した記事を更新します。
  • 歯車マーク:右サイドメニューを表示/非表示にすることができます。
  • ハンバーガーメニュー:編集モードの変更など、その他の設定を行います。
WordPress Gutenberg 右上のメニュー2

一度公開した記事は、「公開する」ボタンから「更新」ボタンに変わります。

また、公開した記事を下書きに戻すこともできます。

右サイドメニュー

WordPress Gutenberg 右サイドメニュー

記事を設定するメニューです。

WordPress Gutenberg 右サイドメニュー

また、特定のブロックを選択した場合、ブロックの設定メニューが表示されます。

操作方法

ブロックを追加して編集する

「ブロックの追加」ボタンをクリックします。

WordPress Gutenberg 左上のメニュー

ブロックメニューが表示されます。数多くのブロックから1つ選択しますが、今回は試しに「段落」を選択します。

WordPress Gutenberg ブロックメニュー

ブロックが追加されたら、テキストを入力します。

こうすることで、ブロックにテキストが挿入されます。

WordPress Gutenberg 編集スペース

通常は、Enterキーで新たなブロックに追加して改行されますが、ShiftキーとCtrlキーを押しながらEnterキーを押すことで、同一ブロック内で改行されます。

WordPress Gutenberg(ブロックエディター)画面

ブロックを移動する方法

移動したいブロックをクリックし、矢印をクリックするか、真ん中の点マークをクリックし、ドラッグ&ドロップして、好きな場所へ移動します。

WordPress Gutenberg ブロック移動時の操作1

ドラッグ&ドロップでブロックを移動する

注意点

WordPress5.5では、矢印マークを押しながら「ドラッグ&ドロップ」でブロックを移動する仕様に変わっています。

※ここでは、WordPress5.4バージョン系列におけるやり方について解説します。

6つの点マークをクリックしながら、ドラッグします。

WordPress Gutenberg ブロック移動時の操作1

青い線が出たらドロップします。

WordPress Gutenberg ブロック移動時の操作2

ブロックの移動が完了しました。

WordPress Gutenberg ブロック移動時の操作3

矢印でブロックを移動する場合

移動したいブロックをクリックし、上矢印、または下矢印を表示します。今回は、ブロックを下に移動してみます。

WordPress Gutenberg ブロック移動時の操作4

ブロックが下に移動しました。

WordPress Gutenberg ブロック移動時の操作5

ブロックの前・後にブロックを追加したい場合

ブロックを選択し、右端のボタンをクリックすることで、メニューが表示されます。

「前に挿入」または「後に挿入」で、ブロックを追加することができます。

WordPress Gutenberg ブロック追加時の操作1

もしくは、ブロックをカーソルに合わせて、表示された「ブロックの追加」ボタンをクリックすることで追加できます。

WordPress Gutenberg ブロック追加時の操作2

複数のブロックを移動・削除したい場合は?

WordPress Gutenberg 複数ブロックを選択

ブロックをクリックしながら、領域をドラッグすることで複数のブロックをまとめて選択できます。

右サイドメニューの簡単な使い方

WordPress Gutenberg 右サイドメニュー

ステータスと公開状態

WordPress Gutenberg 右サイドメニュー ステータスと公開状態1

表示状態

WordPress Gutenberg 右サイドメニュー ステータスと公開状態2

記事を公開/非公開、またはパスワードを保護して公開するかを決めることができます。

公開

WordPress Gutenberg 右サイドメニュー ステータスと公開状態3

記事を今すぐ公開するか、日時を指定して予約投稿することができます。

ブログのトップに固定

WordPress Gutenberg 右サイドメニュー ステータスと公開状態4

チェックを入れた場合、その記事は公開日に関係なく先頭に表示されます。

レビュー待ち

WordPress Gutenberg 右サイドメニュー ステータスと公開状態5

記事作成後、管理人によるチェックを待っている状態にする設定です。

寄稿者権限のユーザーが使用する設定ですので、通常はチェックを入れなくても構いません。

ゴミ箱に移動

WordPress Gutenberg 右サイドメニュー ステータスと公開状態6

編集中の記事をゴミ箱に移動します。

パーマリンク

WordPress Gutenberg 右サイドメニュー パーマリンク

記事のURLとなるパーマリンクを設定します。

カテゴリー

WordPress Gutenberg 右サイドメニュー カテゴリー

記事にカテゴリーを指定できます。

タグ

WordPress Gutenberg 右サイドメニュー タグ

記事にタグを指定できます。

アイキャッチ画像

WordPress Gutenberg 右サイドメニュー アイキャッチ画像

記事の最初に表示されるアイキャッチ画像を設定します。

抜粋

WordPress Gutenberg 右サイドメニュー 抜粋

記事タイトルと共に表示する記事の抜粋内容を入れます。

ディスカッション

WordPress Gutenberg 右サイドメニュー ディスカッション

記事ごとのコメント、ピンバック、トラックバックを許可するかどうか設定できます。

記事を保存する

記事をいったん下書きする場合は、「下書き保存」をクリックすることで、下書きとして保存されます。

WordPress Gutenberg 右上のメニュー3

記事を公開したい場合は、「公開」をクリックします。

WordPress Gutenberg 右上のメニュー4

記事公開前チェック画面が表示されますので、公開状態や公開日時などの設定を確認してから、「公開」をクリックします。

WordPress Gutenberg 記事公開前チェック
▲画像をクリックで拡大

以下の画面が表示されたら、記事の公開は完了です。

WordPress Gutenberg 記事公開完了画面
▲画像をクリックで拡大

まとめ

というわけで、今回は「Gutenberg(ブロックエディター)の基本的な使い方」を解説しました。

Gutenbergは、ビジュアルエディターとは違い、ブロック単位で編集することができるので、簡単な操作だけで記事を編集することもできます。

今回の記事が、お役に立てればと思います。

スポンサーリンク