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