ブロックエディター（Gutenberg）の使い方【WordPress最新版】
このような悩みを解決します。
- ブロックエディターの使い方
- ブロックエディターを使いこなすコツ
今回は、ブロックエディター（Gutenberg）の使い方を紹介します。
この記事を書いている私はブログを始めて3年目であり、同時にWordPress歴も3年目になります。
そして、ブロックエディターをメインエディターとして使っていた時期もあったため、ブロックエディターの機能は一通り熟知しています。
当記事ではブロックエディターの使い方をかなり詳しく解説しているため、記事を読み終わった後にはブロックエディターの使い方がわかるようになっているはずですよ。
ブロックエディターの基本的な使い方
ブロックエディターの基本的な使い方は、次の通りです。
- ブロックエディターの基本設定
- タイトルの入力
- 見出しの作成
- 本文の執筆
- 文字の装飾
- 画像の挿入
- 記事のプレビュー
- 記事の下書き保存
- 記事の投稿・公開
それぞれの項目ごとに紹介していきますね。
ブロックエディターの基本設定
ブロックエディターの基本設定は、画面右上のツールボタンをクリックすれば開けます。
ブロックエディターの基本設定では、次にあげる3つの項目を変更できます。
- 表示
- エディター
- ツール
ブロックエディターの基本設定＞表示
基本設定の「表示」では、ブロックエディターの表示方法を変更できます。
変更できる項目は、次の3つです。
- トップツールバー
- スポットライトモード
- フルスクリーンモード
トップツールバー
トップツールバーをONにすることで、ブロックの編集ボタンが画面上部に固定されます。
そのため、いつも同じ位置からブロックのカスタマイズを行えるようになります。
スポットライトモード
スポットライトモードをONにすることで、選択しているブロックだけが強調されるようになります。
そのため、編集しているブロックを認識しやすくなります。
フルスクリーンモード
フルスクリーンモードをONにすることで、記事作成に必要ないダッシュボードのメニューなどが閉じます。
そのため、画面にはエディターだけが表示され、記事作成に集中できるようになります。
ブロックエディターの基本設定＞エディター
基本設定の「エディター」では、ビジュアルエディターとコードエディターを切り替えられます。
ビジュアルエディター
ビジュアルエディターとはコードを見やすく表示し、編集をしやすくしたエディターのことです。
コードエディター
コードエディターとは、コードを直接編集するためのエディターです。
ブロックエディターの基本設定＞ツール
基本設定の「ツール」では、主にブロックエディターの編集を行います。
エディターの編集を行う項目は、次の2つです。
- ブロックマネージャー
- オプション
ブロックマネージャー
ブロックマネージャーでは、追加するブロックの種類を自分好みにカスタマイズできます。
オプション
オプションでは、記事の詳細設定をカスタマイズできます。
タイトルの入力
記事タイトルはエディターの一番上に入力します。
見出しの作成
見出しの作成方法は、ブロックの追加ボタンをクリックし「見出し」を選択すれば作れます。
本文の執筆
本文はエディターの中央部分に書き進めていきます。
本文作成の時に使う基本的なコマンドは下記の通りです。
- 新規ブロックの追加
- Enter
- ブロックの中で改行
- Shift+Enter
それでは本文作成の基本として、本文を執筆する際によく使うブロックを6つ紹介していきますね。
- 段落の作成
- リンクの作成
- リスト（箇条書き）の作成
- 引用文の作成
- テーブル（表）の作成
- HTMLの挿入
段落の作成
段落の作成方法は、ブロックの追加ボタンをクリックし「段落」を選択すれば作れます。
なお、通常の文章は「段落」で作成していきます。
アンカーテキスト（リンク）の作成
アンカーテキスト（リンク）の作成方法は、まずはじめに「段落」でリンクの文字列を作成します。
次に、リンクの文字列を選択した状態で、ブロック編集ボタンから「リンクボタン」をクリックします。
あとは、リンク先のURLを入力すれば完了です。
リスト（箇条書き）の作成
リストの作成方法は、ブロックの追加ボタンをクリックし「リスト」を選択すれば作れます。
引用文の作成
引用文の作成方法はブロックの追加ボタンをクリックし、一般ブロックの中から「引用」を選択すれば作れます。
テーブル（表）の作成
テーブルの作成方法はブロックの追加ボタンをクリックし、フォーマットの中から「表」を選択します。
するとデータの入力画面が表示されますので、列数と行数を入力し「表を作成」をクリックすればテーブルの完成です。
HTMLの挿入
HTMLの挿入方法はブロックの追加ボタンをクリックし、フォーマットの中から「カスタムHTML」を選択すれば追加できます。
文字の装飾
文字の装飾は、ブロックエディターの右サイドバーにある「ブロック」から行えます。
変更できる項目は、次の3つです。
- テキスト設定
- 色設定
- 高度な設定
テキスト設定
テキスト設定では、フォントサイズの変更が行えます。
- デフォルト
- 小
- 標準
- 中
- 大
- 特大
- カスタム
フォントサイズは上記の7種類から選べ、カスタムではpx単位で好きなフォントサイズに変更できます。
色設定
色設定では、文字色と文字の背景色を変更できます。
高度な設定
高度な設定では、ブロックに任意のクラスを追加できます。
画像の挿入
画像の挿入方法はブロックの追加ボタンをクリックし、一般ブロックの中から「画像」を選択します。
「アップロード」をクリックし、掲載したい画像を選択すれば完了です。
他にも便利な画像の挿入方法が2つありますので、サクッと紹介していきますね。
ギャラリー機能の利用
ギャラリー機能を利用することで、画像を横並びに表示できます。
ギャラリーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「ギャラリー」を選択します。
あとは、横並びにしたい画像を続けてアップロードしていくだけでOKです。
カバー機能の利用
カバー機能を利用することで、画像に文字をかぶせて表示できるようになります。
カバーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「カバー」を選択します。
あとは「アップロード」から画像を選択し、かぶせたい文字を入力すれば完了です。
記事の仕上がりを確認
記事の仕上がりは、エディターの右上にある「プレビュー」から確認できます。
記事の下書き保存
記事を下書き保存するには、エディターの右上にある「下書き保存」をクリックします。
記事の投稿・公開
記事を投稿するには、エディターの右上にある「公開」をクリックします。
すると確認画面が表示されますので、再度「公開」をクリックすれば記事の投稿は完了です。
記事の予約投稿をする方法
記事の予約投稿をする場合には、公開の確認画面で設定できる「公開」の欄を、”今すぐ”から投稿したい日付に合わせます。
あとは「予約投稿」をクリックすれば、設定した日付に記事を自動で投稿してくれます。
【エリア別】ブロックエディターの使い方
ブロックエディターはエリアごとに分類すると、次の3つにわけられます。
- ヘッダーメニューエリア
- メインエリア
- サイドメニューエリア
それぞれのエリアごとに、使い方を紹介していきますね。
ヘッダーメニューエリアの使い方
ヘッダーメニューエリアには、次の5つの機能があります。
- ブロックの追加ボタン
- ツールボタン
- 戻るボタン
- 進むボタン
- コンテンツ構造
- ブロックナビゲーション
それぞれの機能の使い方は、下記の表を参考にしてみてください。
| ブロックの追加ボタン | 全種類のブロックから、任意のブロックを選択して追加 |
|---|---|
| ツールボタン | ブロックの編集とブロックの選択を切り替え |
| 戻るボタン | 1つ前の作業に戻る |
| 進むボタン | 1つ後の作業に進む |
| コンテンツ構造 | 記事の中の文字数や見出しの数を表示 |
| ブロックナビゲーション | 作成したブロックをブロックの種類ごとに表示 |
メインエリアの使い方
メインエリアでは、本文の作成を行います。
サイドメニューエリアの使い方
サイドメニューエリアでは、下記の7項目を編集できます。
- 記事の公開状態
- パーマリンク
- カテゴリー
- タグ
- アイキャッチ画像
- 抜粋
- ディスカッション
それぞれの項目の使い方や編集方法は、下記の表を参考にしてみてください。
| 記事の公開状態 | 記事の表示状態や公開日時を設定 |
|---|---|
| パーマリンク | 記事のパーマリンクを設定。パーマリンクの設定方法は、設定したいパーマリンクを「URLスラッグ」の欄に入力すればOK |
| カテゴリー | 記事を配属するカテゴリーを設定。カテゴリーの設定方法は、配属したいカテゴリーにチェックを入れれば完了 |
| タグ | 記事に設定したいタグを設定。設定したいタグを入力欄に入れれば、タグの設定はOK。なお、複数のタグを設定したい場合には「,（コンマ）」で区切ります |
| アイキャッチ画像 | 記事のアイキャッチ画像を設定。「アイキャッチ画像を設定」をクリックし、設定したいアイキャッチ画像を選択すれば完了 |
| 抜粋 | 記事の要約文であり、記事一覧などに表示される。テーマによっては抜粋が表示されないため、基本的には空欄でOK |
| ディスカッション | コメントとピンバックの許可を設定。許可したい項目にチェックを入れれば、設定は完了 |
ブロックの使い方
ブロックの使い方は、主に次の7つです。
- ブロックの挿入
- ブロックの編集
- ブロックの移動
- ブロックの複製
- ブロックの削除
- ブロックをグループでまとめる
- 再利用ブロックに追加
それぞれの使い方を紹介していきますね。
使い方①：ブロックの挿入
ブロックの使い方1つ目は、ブロックの挿入です。
ブロックを挿入するには、挿入したいブロックの隙間にカーソルを乗せます。
するとブロックの追加ボタンが表示されるので、ボタンをクリックしてブロックを挿入します。
使い方②：ブロックの編集
ブロックの使い方2つ目は、ブロックの編集です。
ブロックの編集を行うにはエディターの右サイドバーにある「ブロック」と、ブロックの編集ボタンから編集できます。
使い方③：ブロックの移動
ブロックの使い方3つ目は、ブロックの移動です。
ブロックの移動は、ブロックの変更ボタンの左側に表示されている「矢印ボタン」から行えます。
使い方④：ブロックの複製
ブロックの使い方4つ目は、ブロックの複製です。
ブロックを複製するには、複製したいブロックを選択した状態で詳細設定をクリックし「複製」を選択します。
すると、選択していたブロックの下に同じブロック要素が複製されます。
使い方⑤：ブロックの削除
ブロックの使い方5つ目は、ブロックの削除です。
ブロックを削除する方法は、削除したいブロックの詳細設定をクリックし「ブロックを削除」をクリックするだけです。
使い方⑥：ブロックをグループでまとめる
ブロックの使い方6つ目は、ブロックをグループでまとめる方法です。
ブロックをグループでまとめるには「Shiftキー」を押しながらまとめたいブロックを選択し、詳細設定ボタンをクリック。
そして設定欄の中の「グループ化」を選択すれば、選択したブロックをひとまとめにできます。
使い方⑦：再利用ブロックに追加
ブロックの使い方7つ目は、再利用ブロックに追加する方法です。
再利用ブロックとはブロックの内容を保存し、他の記事でも複製できるようにしたブロックのことです。
再利用ブロックに追加する方法は、ブロックの変更ボタンの中から詳細設定をクリックし「再利用ブロックに追加」を選択すれば追加できます。
ブロックの種類
ブロックの種類は、大きく分けて次の6つに分類されています。
- テキストブロック
- メディアブロック
- デザインブロック
- ウィジェットブロック
- 埋め込みブロック
それぞれのブロックの使い方を、簡単に紹介していきますね。
テキストブロック
テキストブロックには、次の10コのブロックが該当します。
- 段落
- 見出し
- リスト
- 引用
- コード
- クラシック
- 整形済みテキスト
- プルクオート
- テーブル
- 詩
それぞれのブロックの使い方は、下記の表を参考にしてみてください。
| 段落 | 通常の文章を書く時に使うブロック |
|---|---|
| 見出し | 見出しを作る時に使うブロック |
| リスト | 箇条書きにまとめる時に使うブロック |
| 引用 | 他サイトなどから情報を引用する時に使うブロック |
| コード | コードを記載する時に使うブロック |
| クラシック | 旧エディタの「クラシックエディター」を使うためのブロック |
| 整形済みテキスト | HTMLの「preタグ」を使うためのブロック |
| プルクオート | 装飾付きの引用ブロック。とはいえ、他サイトから情報を引用する時は基本的に「引用ブロック」を使うため、プルクオートの使用頻度はそれほど高くない |
| テーブル | 表を作成するためのブロック |
| 詩 | セリフや詩を記載する時に使うブロック |
メディアブロック
メディアブロックには、次の7コのブロックが該当します。
- 画像
- ギャラリー
- 音声
- カバー
- ファイル
- メディアと文章
- 動画
それぞれのブロックの使い方は、次の表を参考にしてみてください。
| 画像 | メディアライブラリから画像を追加するためのブロック |
|---|---|
| ギャラリー | 画像を横並びに表示するためのブロック |
| 音声 | 音声ファイルを掲載するためのブロック |
| カバー | 文字を被せた画像を作成するためのブロック |
| ファイル | 様々な形式のファイルを掲載するためのブロック |
| メディアと文章 | 画像とテキストを横並びにした表示するためのブロック |
| 動画 | 動画を掲載するためのブロック |
デザインブロック
デザインブロックには、次の7コのブロックが該当します。
- ボタン
- カラム
- グループ
- 続きを読む
- ページ区切り
- 区切り
- スペーサー
それぞれのブロックの使い方は、下記の表を参考にしてみてください。
| ボタン | クリックボタンを作成するためのブロック |
|---|---|
| カラム | 2カラムや3カラムのレイアウトを作るためのブロック |
| グループ | グループブロックを作成するためのブロック |
| 続きを読む | 「続きを読む」を挿入することで、続きを読む以降の文章が省略された状態で記事一覧などに表示されるようになります。そして省略された文章の代わりに、続きを読むボタンが設置されます。 |
| ページ区切り | 区切り線を引くためのブロック |
| 区切り | 区切り線を引くためのブロック（ページ区切りとは、デザインが少し異なる） |
| スペーサー | ブロックとブロックの間にスペースを作るためのブロック |
ウィジェットブロック
ウィジェットブロックには、次の11コのブロックが該当します。
- ショートコード
- アーカイブ
- カレンダー
- カテゴリー
- カスタムHTML
- 最新のコメント
- 最新の投稿
- RSS
- 検索
- ソーシャルアイコン
- タグクラウド
それぞれのブロックの使い方は、下記の表を参考にしてみてください。
| ショートコード | ショートコードを挿入するためのブロック |
|---|---|
| アーカイブ | 月別のアーカイブを挿入するためのブロック。なお、アーカイブの詳細設定はブロックの編集画面から変更できます |
| カレンダー | 日別のカレンダーを挿入するためのブロック |
| カテゴリー | サイトに存在するカテゴリーをリスト形式で表示するためのブロック |
| カスタムHTML | 任意のHTMLコードを入力するためのブロック |
| 最新のコメント | 記事に寄せられた最新のコメントを表示するためのブロック |
| 最新の投稿 | 新着記事を表示するためのブロック |
| RSS | 任意のRSSフィードを掲載するためのブロック |
| 検索 | サイト内検索を行うための検索窓を設置するためのブロック |
| ソーシャルアイコン | 任意のSNSと連携するためのボタンを設置するためのブロック |
| タグクラウド | 記事に付与されているタグを表示するためのブロック |
埋め込みブロック
埋め込みブロックでは、下記のように様々なサービスのコンテンツを追加できます。
例として、使用頻度の高い埋め込みブロックだけ紹介していきますね。
| 埋め込み | 記事で表示したいURLを埋め込むためのブロック |
|---|---|
| Twitterの投稿を埋め込むためのブロック | |
| Youtube | Youtubeの動画を埋め込むためのブロック |
| Facebookの投稿を埋め込むためのブロック | |
| Instagramを埋め込むためのブロック |
ブロックエディターを使いこなすコツ
ブロックエディターを使いこなすコツは、下記の2つです。
- ブロックエディター対応テーマを使う
- ブロック拡張系プラグインを導入する
それぞれのコツについて紹介していきますね。
ブロックエディター対応テーマを使う
ブロックエディター対応のテーマを使うことにより、ブロックエディターでの記事作成を効率的に進められるようになります。
ブロックエディターに対応しているおすすめのWordPressテーマは、下記の記事で紹介しています。
今後ブロックエディターをメインエディターとして使っていく場合には、ぜひブロックエディター対応テーマに変更することをおすすめします。
ブロック拡張系プラグインを導入する
ブロック拡張系のプラグインを導入することで、標準のブロックに合わせて便利なブロックを使えるようになります。
おすすめのブロック拡張系プラグインは下記の記事で紹介していますので、よければ一度読んでみてください。
WordPressでブロックエディターの使い方をマスターしよう！
これで「ブロックエディターの使い方」の内容は終わりです。
クラシックエディターからブロックエディターに移行した場合には、最初の頃は使いづらさを感じるかもしれません。
しかし、ブロックエディターも使っていくうちに徐々に使いやすくなっていきます。
今後は積極的にブロックエディターを使い、ブロックエディターの使い方をマスターしましょう。
当ブログでは、ブロックエディターにおすすめなWordPressテーマを紹介しています。
ブロックエディターをメインに使う場合には、ぜひ一度読んでみてください。
最後まで読んでいただきありがとうございました。
