ブロックエディター(Gutenberg)の使い方【WordPress最新版】

WordPress ブロックエディターの使い方
ブロックエディター(Gutenberg)の使い方がわからない…

このような悩みを解決します。

本記事の内容
  • ブロックエディターの使い方
  • ブロックエディターを使いこなすコツ
本記事の信頼性

今回は、ブロックエディター(Gutenberg)の使い方を紹介します。

この記事を書いている私はブログを始めて3年目であり、同時にWordPress歴も3年目になります。

そして、ブロックエディターをメインエディターとして使っていた時期もあったため、ブロックエディターの機能は一通り熟知しています。

当記事ではブロックエディターの使い方をかなり詳しく解説しているため、記事を読み終わった後にはブロックエディターの使い方がわかるようになっているはずですよ。

ブロックエディターの使い方は画像メインで紹介していくため、初心者でも理解しやすいはずです!



ブロックエディターの基本的な使い方

ブロックエディター(Gutenberg)の基本的な使い方

ブロックエディターの基本的な使い方は、次の通りです。

  • ブロックエディターの基本設定
  • タイトルの入力
  • 見出しの作成
  • 本文の執筆
  • 文字の装飾
  • 画像の挿入
  • 記事のプレビュー
  • 記事の下書き保存
  • 記事の投稿・公開

それぞれの項目ごとに紹介していきますね。

実際に手を動かしながら記事を読むことで、使い方に関する理解度が深まります。そのため、記事と一緒にブロックエディターを使うことをおすすめします。

ブロックエディターの基本設定

ブロックエディターの基本設定は、画面右上のツールボタンをクリックすれば開けます。

ブロックエディターのツールボタン

ブロックエディターの基本設定では、次にあげる3つの項目を変更できます。

  • 表示
  • エディター
  • ツール

ブロックエディターの基本設定>表示

基本設定の「表示」では、ブロックエディターの表示方法を変更できます。

ブロックエディターの表示設定

変更できる項目は、次の3つです。

  • トップツールバー
  • スポットライトモード
  • フルスクリーンモード
トップツールバー

トップツールバーをONにすることで、ブロックの編集ボタンが画面上部に固定されます。

そのため、いつも同じ位置からブロックのカスタマイズを行えるようになります。

ブロックエディターのトップツールバー
スポットライトモード

スポットライトモードをONにすることで、選択しているブロックだけが強調されるようになります。

そのため、編集しているブロックを認識しやすくなります。

ブロックエディターのスポットライトモード
フルスクリーンモード

フルスクリーンモードをONにすることで、記事作成に必要ないダッシュボードのメニューなどが閉じます。

そのため、画面にはエディターだけが表示され、記事作成に集中できるようになります。

ブロックエディターのフルスクリーンモード

ブロックエディターの基本設定>エディター

基本設定の「エディター」では、ビジュアルエディターとコードエディターを切り替えられます。

ブロックエディターのエディター設定
ビジュアルエディター

ビジュアルエディターとはコードを見やすく表示し、編集をしやすくしたエディターのことです。

ブロックエディターのビジュアルエディター
基本的にはビジュアルエディターを使って記事作成を進めていきます。
コードエディター

コードエディターとは、コードを直接編集するためのエディターです。

ブロックエディターのテキストエディター
コードエディターで作業をするには『HTML』というプログラミング言語を身につける必要があります。

ブロックエディターの基本設定>ツール

基本設定の「ツール」では、主にブロックエディターの編集を行います。

ブロックエディターのツール設定
「ツール」ではブロックエディターの編集以外にも、ガイドやヘルプの確認なども可能です。

エディターの編集を行う項目は、次の2つです。

  • ブロックマネージャー
  • オプション
ブロックマネージャー

ブロックマネージャーでは、追加するブロックの種類を自分好みにカスタマイズできます。

ブロックエディターのブロックマネージャー
オプション

オプションでは、記事の詳細設定をカスタマイズできます。

ブロックエディターのオプション

タイトルの入力

記事タイトルはエディターの一番上に入力します。

ブロックエディターで記事タイトルを入力

見出しの作成

見出しの作成方法は、ブロックの追加ボタンをクリックし「見出し」を選択すれば作れます。

ブロックエディターで見出しの作成

本文の執筆

本文はエディターの中央部分に書き進めていきます。

ブロックエディターで本文を入力

本文作成の時に使う基本的なコマンドは下記の通りです。

新規ブロックの追加
Enter
ブロックの中で改行
Shift+Enter

それでは本文作成の基本として、本文を執筆する際によく使うブロックを6つ紹介していきますね。

  • 段落の作成
  • リンクの作成
  • リスト(箇条書き)の作成
  • 引用文の作成
  • テーブル(表)の作成
  • HTMLの挿入

段落の作成

段落の作成方法は、ブロックの追加ボタンをクリックし「段落」を選択すれば作れます。

ブロックエディターで段落の作成

なお、通常の文章は「段落」で作成していきます。

ブロックを作成すると、初期の状態では「段落」が設定されています。そのため段落を使う場合には、そのまま文を書き始めればOKです。

アンカーテキスト(リンク)の作成

アンカーテキスト(リンク)の作成方法は、まずはじめに「段落」でリンクの文字列を作成します。

次に、リンクの文字列を選択した状態で、ブロック編集ボタンから「リンクボタン」をクリックします。

ブロックエディターでリンクの文字列を作成

あとは、リンク先のURLを入力すれば完了です。

ブロックエディターでリンク先を指定
リンク先のページを別タブで開きたい場合には「新しいタブで開く」にチェックを入れましょう。

リスト(箇条書き)の作成

リストの作成方法は、ブロックの追加ボタンをクリックし「リスト」を選択すれば作れます。

ブロックエディターでリストの作成
番号付きのリストを使いたい場合には、ブロックの編集ボタンから「番号付きリストに変換」をクリックすればOKです。

引用文の作成

引用文の作成方法はブロックの追加ボタンをクリックし、一般ブロックの中から「引用」を選択すれば作れます。

ブロックエディターで引用の作成

テーブル(表)の作成

テーブルの作成方法はブロックの追加ボタンをクリックし、フォーマットの中から「表」を選択します。

ブロックエディターで表を作成

するとデータの入力画面が表示されますので、列数と行数を入力し「表を作成」をクリックすればテーブルの完成です。

HTMLの挿入

HTMLの挿入方法はブロックの追加ボタンをクリックし、フォーマットの中から「カスタムHTML」を選択すれば追加できます。

ブロックエディターでカスタムHTMLの作成
一度カスタムHTMLで作成したブロックは、ビジュアルエディターでの表示には変更できないので注意しましょう。

文字の装飾

文字の装飾は、ブロックエディターの右サイドバーにある「ブロック」から行えます。

ブロックエディターで文字の装飾

変更できる項目は、次の3つです。

  • テキスト設定
  • 色設定
  • 高度な設定

テキスト設定

テキスト設定では、フォントサイズの変更が行えます。

  • デフォルト
  • 標準
  • 特大
  • カスタム

フォントサイズは上記の7種類から選べ、カスタムではpx単位で好きなフォントサイズに変更できます。

ドロップキャップをONにすると、文頭の文字だけが大きく表示されます。

色設定

色設定では、文字色と文字の背景色を変更できます。

ブロックエディターで文字色の変更

高度な設定

高度な設定では、ブロックに任意のクラスを追加できます。

ブロックエディターでクラスの追加

画像の挿入

画像の挿入方法はブロックの追加ボタンをクリックし、一般ブロックの中から「画像」を選択します。

ブロックエディターで画像の作成

「アップロード」をクリックし、掲載したい画像を選択すれば完了です。

ブロックエディターで画像の挿入
掲載したい画像をドラッグ・アンド・ドロップしてもOKです。

他にも便利な画像の挿入方法が2つありますので、サクッと紹介していきますね。

ギャラリー機能の利用

ギャラリー機能を利用することで、画像を横並びに表示できます。

ギャラリーの例

ギャラリーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「ギャラリー」を選択します。

ブロックエディターでギャラリーを作成

あとは、横並びにしたい画像を続けてアップロードしていくだけでOKです。

ブロックエディターでギャラリーの画像をアップロード

カバー機能の利用

カバー機能を利用することで、画像に文字をかぶせて表示できるようになります。

カバーの例

カバーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「カバー」を選択します。

ブロックエディターでカバーを作成

あとは「アップロード」から画像を選択し、かぶせたい文字を入力すれば完了です。

ブロックエディターでカバーをアップロード

記事の仕上がりを確認

記事の仕上がりは、エディターの右上にある「プレビュー」から確認できます。

ブロックエディターで記事のプレビュー

記事の下書き保存

記事を下書き保存するには、エディターの右上にある「下書き保存」をクリックします。

ブロックエディターで下書き保存
下書き保存された記事はサイトには表示されないため、作成途中の記事を保存しておくときに便利な機能ですね

記事の投稿・公開

記事を投稿するには、エディターの右上にある「公開」をクリックします。

ブロックエディターで記事を公開

すると確認画面が表示されますので、再度「公開」をクリックすれば記事の投稿は完了です。

ブロックエディターで記事を完全公開
公開の最終確認を省略したい場合には、確認画面の一番下に表示されている「公開前チェックを常に表示する。」からチェックを外せばOKです。

記事の予約投稿をする方法

記事の予約投稿をする場合には、公開の確認画面で設定できる「公開」の欄を、”今すぐ”から投稿したい日付に合わせます。

あとは「予約投稿」をクリックすれば、設定した日付に記事を自動で投稿してくれます。

ブロックエディターで予約投稿する方法

【エリア別】ブロックエディターの使い方

エリア別ブロックエディター(Gutenberg)の使い方

ブロックエディターはエリアごとに分類すると、次の3つにわけられます。

  • ヘッダーメニューエリア
  • メインエリア
  • サイドメニューエリア
ブロックエディターのエリアごとの使い方

それぞれのエリアごとに、使い方を紹介していきますね。

ヘッダーメニューエリアの使い方

ヘッダーメニューエリアには、次の5つの機能があります。

  • ブロックの追加ボタン
  • ツールボタン
  • 戻るボタン
  • 進むボタン
  • コンテンツ構造
  • ブロックナビゲーション

それぞれの機能の使い方は、下記の表を参考にしてみてください。

ブロックの追加ボタン 全種類のブロックから、任意のブロックを選択して追加
ツールボタン ブロックの編集とブロックの選択を切り替え
戻るボタン 1つ前の作業に戻る
進むボタン 1つ後の作業に進む
コンテンツ構造 記事の中の文字数や見出しの数を表示
ブロックナビゲーション 作成したブロックをブロックの種類ごとに表示

メインエリアの使い方

メインエリアでは、本文の作成を行います。

本文の作成方法はこれまでに紹介したため、具体的な書き方は省略します。

サイドメニューエリアの使い方

サイドメニューエリアでは、下記の7項目を編集できます。

  • 記事の公開状態
  • パーマリンク
  • カテゴリー
  • タグ
  • アイキャッチ画像
  • 抜粋
  • ディスカッション

それぞれの項目の使い方や編集方法は、下記の表を参考にしてみてください。

記事の公開状態 記事の表示状態や公開日時を設定
パーマリンク 記事のパーマリンクを設定。パーマリンクの設定方法は、設定したいパーマリンクを「URLスラッグ」の欄に入力すればOK
カテゴリー 記事を配属するカテゴリーを設定。カテゴリーの設定方法は、配属したいカテゴリーにチェックを入れれば完了
タグ 記事に設定したいタグを設定。設定したいタグを入力欄に入れれば、タグの設定はOK。なお、複数のタグを設定したい場合には「,(コンマ)」で区切ります
アイキャッチ画像 記事のアイキャッチ画像を設定。「アイキャッチ画像を設定」をクリックし、設定したいアイキャッチ画像を選択すれば完了
抜粋 記事の要約文であり、記事一覧などに表示される。テーマによっては抜粋が表示されないため、基本的には空欄でOK
ディスカッション コメントとピンバックの許可を設定。許可したい項目にチェックを入れれば、設定は完了

ブロックの使い方

ブロックエディター(Gutenberg)のブロックの使い方

ブロックの使い方は、主に次の7つです。

  • ブロックの挿入
  • ブロックの編集
  • ブロックの移動
  • ブロックの複製
  • ブロックの削除
  • ブロックをグループでまとめる
  • 再利用ブロックに追加

それぞれの使い方を紹介していきますね。

使い方①:ブロックの挿入

ブロックの使い方1つ目は、ブロックの挿入です。

ブロックを挿入するには、挿入したいブロックの隙間にカーソルを乗せます。

するとブロックの追加ボタンが表示されるので、ボタンをクリックしてブロックを挿入します。

ブロックエディターでブロックの挿入

使い方②:ブロックの編集

ブロックの使い方2つ目は、ブロックの編集です。

ブロックの編集を行うにはエディターの右サイドバーにある「ブロック」と、ブロックの編集ボタンから編集できます。

ブロックエディターでブロックの編集

使い方③:ブロックの移動

ブロックの使い方3つ目は、ブロックの移動です。

ブロックの移動は、ブロックの変更ボタンの左側に表示されている「矢印ボタン」から行えます。

ブロックエディターでブロックの移動

使い方④:ブロックの複製

ブロックの使い方4つ目は、ブロックの複製です。

ブロックを複製するには、複製したいブロックを選択した状態で詳細設定をクリックし「複製」を選択します。

ブロックエディターでブロックの複製

すると、選択していたブロックの下に同じブロック要素が複製されます。

文字の装飾パターンをいくつか試したい場合には、ブロックを複製していろいろ試してみましょう!

使い方⑤:ブロックの削除

ブロックの使い方5つ目は、ブロックの削除です。

ブロックを削除する方法は、削除したいブロックの詳細設定をクリックし「ブロックを削除」をクリックするだけです。

ブロックエディターでブロックの削除

使い方⑥:ブロックをグループでまとめる

ブロックの使い方6つ目は、ブロックをグループでまとめる方法です。

ブロックをグループでまとめるには「Shiftキー」を押しながらまとめたいブロックを選択し、詳細設定ボタンをクリック。

そして設定欄の中の「グループ化」を選択すれば、選択したブロックをひとまとめにできます。

ブロックエディターでブロックのグループ化
ブロックをグループ化することで、ブロックの移動や編集を一括して行えますね

使い方⑦:再利用ブロックに追加

ブロックの使い方7つ目は、再利用ブロックに追加する方法です。

再利用ブロックとはブロックの内容を保存し、他の記事でも複製できるようにしたブロックのことです。

よく使うブロックを再利用ブロックとして登録しておくことで、毎回同じブロックを作る手間が省けますね

再利用ブロックに追加する方法は、ブロックの変更ボタンの中から詳細設定をクリックし「再利用ブロックに追加」を選択すれば追加できます。

ブロックエディターで再利用ブロックを作成
再利用ブロックを変更するとすべての記事に適用されてしまうため、変更を加える際には十分注意しましょう。

ブロックの種類

ブロックエディター(Gutenberg)のブロックの種類

ブロックの種類は、大きく分けて次の6つに分類されています。

  • テキストブロック
  • メディアブロック
  • デザインブロック
  • ウィジェットブロック
  • 埋め込みブロック

それぞれのブロックの使い方を、簡単に紹介していきますね。

ブロックの種類は、ブロックの追加ボタンからすべて確認できます。

ブロックエディターの全ブロックを確認

テキストブロック

テキストブロックには、次の10コのブロックが該当します。

  • 段落
  • 見出し
  • リスト
  • 引用
  • コード
  • クラシック
  • 整形済みテキスト
  • プルクオート
  • テーブル

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

段落 通常の文章を書く時に使うブロック
見出し 見出しを作る時に使うブロック
リスト 箇条書きにまとめる時に使うブロック
引用 他サイトなどから情報を引用する時に使うブロック
コード コードを記載する時に使うブロック
クラシック 旧エディタの「クラシックエディター」を使うためのブロック
整形済みテキスト HTMLの「preタグ」を使うためのブロック
プルクオート 装飾付きの引用ブロック。とはいえ、他サイトから情報を引用する時は基本的に「引用ブロック」を使うため、プルクオートの使用頻度はそれほど高くない
テーブル 表を作成するためのブロック
セリフや詩を記載する時に使うブロック

メディアブロック

メディアブロックには、次の7コのブロックが該当します。

  • 画像
  • ギャラリー
  • 音声
  • カバー
  • ファイル
  • メディアと文章
  • 動画

それぞれのブロックの使い方は、次の表を参考にしてみてください。

画像 メディアライブラリから画像を追加するためのブロック
ギャラリー 画像を横並びに表示するためのブロック
音声 音声ファイルを掲載するためのブロック
カバー 文字を被せた画像を作成するためのブロック
ファイル 様々な形式のファイルを掲載するためのブロック
メディアと文章 画像とテキストを横並びにした表示するためのブロック
動画 動画を掲載するためのブロック

デザインブロック

デザインブロックには、次の7コのブロックが該当します。

  • ボタン
  • カラム
  • グループ
  • 続きを読む
  • ページ区切り
  • 区切り
  • スペーサー

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

ボタン クリックボタンを作成するためのブロック
カラム 2カラムや3カラムのレイアウトを作るためのブロック
グループ グループブロックを作成するためのブロック
続きを読む 「続きを読む」を挿入することで、続きを読む以降の文章が省略された状態で記事一覧などに表示されるようになります。そして省略された文章の代わりに、続きを読むボタンが設置されます。
ページ区切り 区切り線を引くためのブロック
区切り 区切り線を引くためのブロック(ページ区切りとは、デザインが少し異なる)
スペーサー ブロックとブロックの間にスペースを作るためのブロック

ウィジェットブロック

ウィジェットブロックには、次の11コのブロックが該当します。

  • ショートコード
  • アーカイブ
  • カレンダー
  • カテゴリー
  • カスタムHTML
  • 最新のコメント
  • 最新の投稿
  • RSS
  • 検索
  • ソーシャルアイコン
  • タグクラウド

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

ショートコード ショートコードを挿入するためのブロック
アーカイブ 月別のアーカイブを挿入するためのブロック。なお、アーカイブの詳細設定はブロックの編集画面から変更できます
カレンダー 日別のカレンダーを挿入するためのブロック
カテゴリー サイトに存在するカテゴリーをリスト形式で表示するためのブロック
カスタムHTML 任意のHTMLコードを入力するためのブロック
最新のコメント 記事に寄せられた最新のコメントを表示するためのブロック
最新の投稿 新着記事を表示するためのブロック
RSS 任意のRSSフィードを掲載するためのブロック
検索 サイト内検索を行うための検索窓を設置するためのブロック
ソーシャルアイコン 任意のSNSと連携するためのボタンを設置するためのブロック
タグクラウド 記事に付与されているタグを表示するためのブロック

埋め込みブロック

埋め込みブロックでは、下記のように様々なサービスのコンテンツを追加できます。

例として、使用頻度の高い埋め込みブロックだけ紹介していきますね。

埋め込み 記事で表示したいURLを埋め込むためのブロック
Twitter Twitterの投稿を埋め込むためのブロック
Youtube Youtubeの動画を埋め込むためのブロック
Facebook Facebookの投稿を埋め込むためのブロック
Instagram Instagramを埋め込むためのブロック

ブロックエディターを使いこなすコツ

ブロックエディターを使いこなすコツは、下記の2つです。

  • ブロックエディター対応テーマを使う
  • ブロック拡張系プラグインを導入する

それぞれのコツについて紹介していきますね。

ブロックエディター対応テーマを使う

ブロックエディター対応のテーマを使うことにより、ブロックエディターでの記事作成を効率的に進められるようになります。

ブロックエディターに対応しているおすすめのWordPressテーマは、下記の記事で紹介しています。

今後ブロックエディターをメインエディターとして使っていく場合には、ぜひブロックエディター対応テーマに変更することをおすすめします。

ブロック拡張系プラグインを導入する

ブロック拡張系のプラグインを導入することで、標準のブロックに合わせて便利なブロックを使えるようになります。

ブロックエディターを使う場合には、確実にプラグインを導入した方が使いやすくなりますね

おすすめのブロック拡張系プラグインは下記の記事で紹介していますので、よければ一度読んでみてください。

WordPressでブロックエディターの使い方をマスターしよう!

ブロックエディター(Gutenberg)まとめ

これで「ブロックエディターの使い方」の内容は終わりです。

クラシックエディターからブロックエディターに移行した場合には、最初の頃は使いづらさを感じるかもしれません。

しかし、ブロックエディターも使っていくうちに徐々に使いやすくなっていきます。

今後は積極的にブロックエディターを使い、ブロックエディターの使い方をマスターしましょう。

当ブログでは、ブロックエディターにおすすめなWordPressテーマを紹介しています。

ブロックエディターをメインに使う場合には、ぜひ一度読んでみてください。

最後まで読んでいただきありがとうございました。