![『青春18きっぷ』で乗れる観光列車「HIGH RAIL 1375」](https://mikit-tz.com/wp-content/uploads/2024/07/high-rail-1375-eyecatch.jpg)
【WordPress】Gutenberg(ブロックエディター)の基本的な使い方
![アイキャッチ画像](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-eyecatching.png)
WordPressのビジュアルエディターが、Gutenbergというブロックエディターに変わって驚いたという方も多いですよね。
今回は、Gutenberg(ブロックエディター)の基本的な使い方を、初心者でも分かりやすく解説していきます。
Gutenbergとは?
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img1.png)
Gutenbergとは、WordPress5.0以降のバージョンから適用されたエディターです。
Gutenbergは、活版印刷の生みの親であるヨハネス・グーテンベルグという人から由来しています。
「Gutenberg」プラグインは必要?
「Gutenberg」プラグインは、ブロックエディターの試験機能をいち早く試すことができるプラグインですが、ベータ機能である以上、不具合が出るリスクも高いです。
そのため、「Gutenberg」プラグインは必要ありません。
Gutenberg(ブロックエディター)の特徴
Gutenberg(ブロックエディター)の特徴は、コンテンツごとにブロックで分けられていることです。
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img3.png)
ブロックエディターでは以下のような操作を行うことができます。
- ブロック単位で編集できる
- ブロックの入れ替えが簡単にできる
- よく使うブロックは「再利用ブロック」に登録することで便利になる
- 複数のブロックをまとめて移動・削除することができる
また、ビジュアルエディターで書いた記事を編集する時、「クラシックブロック」として変換されるので、互換性もサポートされていることが特徴です。
旧エディターをそのまま使い続けたい場合は?
![WordPress Classic Editor](https://mikit-tz.com/wp-content/uploads/2020/08/wp-classic-editor1.png)
旧エディターでしか対応していないプラグインやテーマを使い続けている場合は、「Classic Editor」プラグインを有効化することで、旧エディターを使えるようになります。
≫Classic Editorは少なくとも2024年までサポート/旧エディターに戻す方法【WordPress】
WordPress5.8以降
![WordPress ブロックウィジェット](https://mikit-tz.com/wp-content/uploads/2023/02/wordpress-classic-widget2-800x413.jpg)
WordPress5.8以降は、ウィジェットの編集画面もGutenberg(ブロックエディター)に切り替わっています。
お使いのテーマによっては新ウィジェット画面に対応していない場合もありますので、その場合は「Classic Widgets」プラグインを使って従来のウィジェット画面に戻すようにしましょう。
Gutenbergの基本的な使い方
![プロフィール用アイコン](https://mikit-tz.com/wp-content/uploads/2019/05/profile.png)
Gutenbergの編集画面は、以下のようになっているよ!
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img1.png)
※2020年8月現在。
編集スペース
コンテンツを編集するためのスペースです。
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img4.png)
左上のメニュー
![WordPress Gutenberg 左上のメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img5.png)
ブロックの追加ボタン | ブロックを追加します。 |
---|---|
元に戻すボタン | 編集した内容を1つ手前に戻します。 |
進むボタン | 編集した内容を1つ先に進みます。 |
コンテンツ構造ボタン | その記事内のコンテンツ構造を確認できます。 |
ブロックナビゲーション | 各ブロックに移動することができます。 |
右上のボタン
![WordPress Gutenberg 右上のメニュー1](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img6.png)
下書き保存 | 記事を下書き保存します。 |
---|---|
プレビュー | 編集中の記事をプレビューで確認できます。 |
公開する(更新) | 記事を公開、または一度公開した記事を更新します。 |
歯車マーク | 右サイドメニューを表示/非表示にすることができます。 |
ハンバーガーメニュー | 編集モードの変更など、その他の設定を行います。 |
一度公開した記事は、「公開する」ボタンから「更新」ボタンに変わります。
![WordPress Gutenberg 右上のメニュー2](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img7.png)
また、公開した記事を下書きに戻すこともできます。
右サイドメニュー
記事を設定するメニューです。
![WordPress Gutenberg 右サイドメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img8-260x400.png)
また、特定のブロックを選択した場合、ブロックの設定メニューが表示されます。
![WordPress Gutenberg 右サイドメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img9-188x400.png)
操作方法
ブロックを追加して編集する
「ブロックの追加」ボタンをクリックします。
![WordPress Gutenberg 左上のメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img10.png)
ブロックメニューが表示されます。数多くのブロックから1つ選択しますが、今回は試しに「段落」を選択します。
![WordPress Gutenberg ブロックメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img11-218x400.png)
ブロックが追加されたら、テキストを入力します。
こうすることで、ブロックにテキストが挿入されます。
![WordPress Gutenberg 編集スペース](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img12.png)
通常は、Enterキーで新たなブロックに追加して改行されますが、ShiftキーとCtrlキーを押しながらEnterキーを押すことで、同一ブロック内で改行されます。
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img3.png)
ブロックを移動する方法
移動したいブロックをクリックし、矢印をクリックするか、真ん中の点マークをクリックし、ドラッグ&ドロップして、好きな場所へ移動します。
![WordPress Gutenberg ブロック移動時の操作1](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img13.png)
ドラッグ&ドロップでブロックを移動する
WordPress5.5では、矢印マークを押しながら「ドラッグ&ドロップ」でブロックを移動する仕様に変わっています。
※ここでは、WordPress5.4バージョン系列におけるやり方について解説します。
6つの点マークをクリックしながら、ドラッグします。
![WordPress Gutenberg ブロック移動時の操作1](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img14.png)
青い線が出たらドロップします。
![WordPress Gutenberg ブロック移動時の操作2](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img15.png)
ブロックの移動が完了しました。
![WordPress Gutenberg ブロック移動時の操作3](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img16.png)
矢印でブロックを移動する場合
移動したいブロックをクリックし、上矢印、または下矢印を表示します。今回は、ブロックを下に移動してみます。
![WordPress Gutenberg ブロック移動時の操作4](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img17.png)
ブロックが下に移動しました。
![WordPress Gutenberg ブロック移動時の操作5](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img18.png)
ブロックの前・後にブロックを追加したい場合
ブロックを選択し、右端のボタンをクリックすることで、メニューが表示されます。
「前に挿入」または「後に挿入」で、ブロックを追加することができます。
![WordPress Gutenberg ブロック追加時の操作1](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img19.png)
もしくは、ブロックをカーソルに合わせて、表示された「ブロックの追加」ボタンをクリックすることで追加できます。
![WordPress Gutenberg ブロック追加時の操作2](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img20.png)
複数のブロックを移動・削除したい場合は?
ブロックをクリックしながら、領域をドラッグすることで複数のブロックをまとめて選択できます。
![WordPress Gutenberg 複数ブロックを選択](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img21.png)
右サイドメニューの簡単な使い方
![WordPress Gutenberg 右サイドメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img8.png)
ステータスと公開状態
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態1](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img22.png)
表示状態
記事を公開/非公開、またはパスワードを保護して公開するかを決めることができます。
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態2](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img23-394x400.png)
公開
記事を今すぐ公開するか、日時を指定して予約投稿することができます。
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態3](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img24-246x400.png)
ブログのトップに固定
チェックを入れた場合、その記事は公開日に関係なく先頭に表示されます。
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態4](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img25.png)
レビュー待ち
記事作成後、管理人によるチェックを待っている状態にする設定です。
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態5](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img26.png)
寄稿者権限のユーザーが使用する設定ですので、通常はチェックを入れなくても構いません。
ゴミ箱に移動
編集中の記事をゴミ箱に移動します。
![WordPress Gutenberg 右サイドメニュー ステータスと公開状態6](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img27.png)
パーマリンク
記事のURLとなるパーマリンクを設定します。
![WordPress Gutenberg 右サイドメニュー パーマリンク](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img28.png)
カテゴリー
記事にカテゴリーを指定できます。
![WordPress Gutenberg 右サイドメニュー カテゴリー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img29.png)
タグ
記事にタグを指定できます。
![WordPress Gutenberg 右サイドメニュー タグ](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img30.png)
アイキャッチ画像
記事の最初に表示されるアイキャッチ画像を設定します。
![WordPress Gutenberg 右サイドメニュー アイキャッチ画像](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img31.png)
抜粋
記事タイトルと共に表示する記事の抜粋内容を入れます。
![WordPress Gutenberg 右サイドメニュー 抜粋](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img32.png)
ディスカッション
記事ごとのコメント、ピンバック、トラックバックを許可するかどうか設定できます。
![WordPress Gutenberg 右サイドメニュー ディスカッション](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img33.png)
記事を保存する
記事をいったん下書きする場合は、「下書き保存」をクリックすることで、下書きとして保存されます。
![WordPress Gutenberg 右上のメニュー3](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img34.png)
記事を公開したい場合は、「公開」をクリックします。
![WordPress Gutenberg 右上のメニュー4](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img35.png)
記事公開前チェック画面が表示されますので、公開状態や公開日時などの設定を確認してから、「公開」をクリックします。
▼画像をクリックで拡大
![WordPress Gutenberg 記事公開前チェック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img36-162x400.png)
以下の画面が表示されたら、記事の公開は完了です。
▼画像をクリックで拡大
![WordPress Gutenberg 記事公開完了画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img37-163x400.png)
まとめ
というわけで、今回は「Gutenberg(ブロックエディター)の基本的な使い方」を解説しました。
Gutenbergは、ビジュアルエディターとは違い、ブロック単位で編集することができるので、簡単な操作だけで記事を編集することもできます。
今回の記事が、お役に立てればと思います。