ブロックエディタ（Gutenberg）は、WordPressで記事を編集するための機能です。文章や画像などのコンテンツをブロック単位で管理し、組み合わせることによって記事を作ります。ブロックエディタの使い方をマスターすれば、Webの専門知識がない初心者でも直感的に記事を書くことができます。
この記事では、ブロックエディタの使い方を解説するために、スクリーンショット画像を掲載しています。ご利用環境（WordPressのバージョンや使用テーマなど）によっては、実際の画面と異なる場合があります。
ブロックエディタ（Gutenberg）とは
「ブロックエディタ（Gutenberg）」は、WordPress 5.0以降で利用できる、記事の編集機能です。
WordPressで記事を作るためには「投稿」や「固定ページ」を利用しますが、両方ともブロックエディタを使って編集します。
ブロックエディタの特徴
ブログやホームページの記事には、見出し・段落・箇条書きリスト・画像・動画など、さまざまな要素を組み合わせることができます。このような個別のコンテンツ要素を「ブロック」単位で管理できるのが、ブロックエディタの大きな特徴です。
必要なコンテンツをブロック単位で組み合わせていくことによって、直感的に記事を作ることができます。
豊富なブロックを使い分ける
ブロックエディタには初期状態で60種類以上のブロックが用意されていて、表示したい内容に応じて使い分けます。たとえば、
- 文章………「段落」ブロック
- 画像………「画像」ブロック
- 見出し……「見出し」ブロック
- 箇条書き…「リスト」ブロック
というように、記事コンテンツを細かいブロックに分けることで、並べ替えや再利用などが可能になります。
使用するテーマやプラグインによっては、利用できるブロックの種類が増えることがあります。
このサイトで使っているテーマ「SWELL
」では、便利なオリジナルブロックが20種類も用意されています。
ページのメインコンテンツを編集できる
下の画像は、WordPressで作成した記事の例です。ブロックエディタで編集できるのは、各ページに共通する部分（ヘッダー・フッター・サイドバー）を除いた、Webページのメインコンテンツとなる部分です。
Gutenbergとは
ブロックエディタは「Gutenberg（グーテンベルク）」とも呼ばれます。活版印刷技術を発明したヨハネス・グーテンベルク（Johannes Gutenberg）にちなんで名付けられました。
活版印刷は、それまで一部の富裕層だけが所有していた書物を、一般の人々にまで広めるきっかけとなった技術だと言われています。
ブロックエディタの画面構成
ブロックエディタの画面は、以下のエリアから構成されています。
| ①ツールバー | ブロックの新規追加、元に戻す／やり直す、文書構造の確認など |
|---|---|
| ②保存／公開、オプション | 下書き保存、公開、オプション設定など |
| ③コンテンツ編集 | メインコンテンツの編集エリア |
| ④ブロックツールバー | ブロックごとの各種設定 |
| ⑤パネル | 記事全体／ブロックごとの各種設定 |
| ⑥パンくずリスト | 編集／選択中のブロックの位置を階層で表示 |
コンテンツ編集エリアで、さまざまなブロックを組み合わせて記事を書いていきます。ここで利用するブロックの種類に応じて「ブロックツールバー」や「パネル」の表示内容が変化します。
▼ブロックツールバーとパネルの比較
※段落ブロックと画像ブロックとで比較
パネルは、［記事全体の設定用］と［ブロックの設定用］とを切り替えることができます。
▼パネルの投稿タブとブロックタブを比較
※段落ブロックの場合
この記事では、主にコンテンツの編集によく使う次の項目について解説します。
- コンテンツ編集エリア
- ブロックツールバー
- パネル
ツールバーや、オプションの一部の機能については、下記ページで詳しく説明しています。
ブロックエディタを使うための準備
ブロックエディタは、投稿や固定ページの編集画面で使います。
この記事では、「投稿」を新規作成する様子を例にして、ブロックエディタの基本的な使い方を紹介します。「固定ページ」もほぼ同じ手順で編集できますが、別記事の固定ページの使い方と作り方でも詳しく説明しています。
準備として、WordPress管理画面［投稿］＞［新規追加］をクリックして、投稿の新規作成画面を開いておきましょう。
初めてブロックエディタを開いたときなどに、下のような「ガイド」が表示されることがあります。
ガイドを閉じた後、再び確認したい場合は、画面右上［オプション］＞［ウェルカムガイド］の順にクリックします。
ブロックエディタの基本的な使い方
ブロックエディタの基本的な使用手順は、次のとおりです。
下のような記事を実際に作成する様子をまじえながら、ブロックエディタの使い方を説明します。
記事タイトルの入力
まず、記事のタイトルを入力します。その記事において重要なキーワードを含めたタイトルにすると、検索エンジンからの来訪数アップが期待できます。
記事コンテンツの編集
記事に表示させたいコンテンツ要素に応じて、ブロックを使い分けます。今回は、以下のコンテンツ要素をブロック単位で入力します。
段落の追加・編集
記事タイトルの下に、あらかじめ「段落」ブロックが用意されています。ここに文章を入力します。
ブロック内での改行について
文章の途中で改行する場合は、[Shift]+［Enter］を押します。
ブロックのパネル
ブロック全体の設定を変更するには、主に画面右側の［パネル］を使います。段落ブロックのパネルでは、以下の設定ができます。
- タイポグラフィ（文字の体裁）の設定
- テキスト（文字）色の設定
- 背景色の設定
- 先頭文字の大きさの設定
- HTMLアンカーの設定
- 追加CSSクラスの設定
パネルが表示されない場合
もしパネルが表示されていない場合は、画面右上の［歯車］アイコンをクリックしてください。
ブロックツールバー
ブロック内の一部について設定を変更するには、［ブロックツールバー］を使います。段落ブロックのツールバーでは、以下の操作をすることができます。
- 文字揃え（左寄せ・中央寄せ・右寄せ）を変更する
- 太字・イタリックにする
- リンクを設定する
- インラインコードを設定する
- 文章中に画像を追加する
- キーボード入力を設定する
- 文字色を変更する
- 上付き・下付きを設定する
- 取り消し線を引く
ブロックツールバーの表示位置を変更したい場合
画面右上の［オプション］＞［トップツールバー］をクリックします。
トップツールバー機能のオン・オフによって、ブロックツールバーの表示位置が次のように変わります。
段落ブロックの「パネル」や「ブロックツールバー」については、段落ブロックの使い方で詳しく説明しています。
画像の追加・編集
次に画像を追加したいのですが、画面上にはブロックがありません。こんなときは、新しいブロックを追加する必要があります。
画像ブロックを追加する
ブロックの新規追加はいくつかの方法がありますが、今回は画面左上の［ブロックを追加］ボタンをクリックして「画像」ブロックを追加してみましょう。
次に、画像の追加方法を選択します。新しい画像を追加する場合は［アップロード］をクリックします。
| アップロード | パソコンなどに保存されている画像ファイルを転送できる |
|---|---|
| メディアライブラリ | すでにアップロードしている画像ファイルから選択できる |
| URL から挿入 | 他サイトに掲載されている画像ファイルのURLを指定できる |
画像サイズの変更
画像の幅や高さは、ドラッグ操作で変更することができます。
パネルでは、［画像サイズ］のプルダウンメニューで
- サムネイル
- 中
- 大
- フルサイズ
から選べるほか、［画像の寸法］では任意のサイズを数値で指定することができます。
Altテキスト（代替テキスト）の設定
Altテキストとは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示するための文字列です。そのため、基本的にはWebページ上に表示されません。
また、視覚に障害がある人などが利用する「スクリーンリーダー」で画像を音声に変換するときにも使われます。
Altテキストには、画像の内容を簡潔に説明するテキストを入力しておきましょう。
キャプションの設定
画像ブロックを選択した状態で、下の［キャプションを入力…］をクリックすると、テキストを入力できます。Altテキストとは異なり、キャプションに入力したテキストはWebページ上に表示されるので、訪問者に対して画像の説明が必要な場合に入力しましょう。
その他、画像の設定
ブロックツールバーを使えば、画像の［配置の変更］［リンクの設定］［切り抜き］などの操作をすることができます。
画像ブロックの設定方法については、画像ブロックの使い方で詳しく説明しています。
見出しの追加・編集
見出しには、長文の記事を読みやすくする効果があります。また、使用しているテーマやプラグインによっては、目次の項目として使われることがあります。
ここでは、画像ブロックの下にある“空白”のブロックに、見出しとなる文字列を入力してみましょう。
ブロックタイプの変換
空白のブロックに文字を入力した段階では、「段落」ブロックとして機能します。これを見出しブロックに変換するには、［ブロックツールバー左端のボタン］をクリック後、［見出し］をクリックします。
見出しレベルの変更
ブロックツールバーの［H2］をクリックすると、見出しレベルを変更することができます。
見出しレベルにはH1～H6の6段階があり、数字が小さくなるほど見出しのレベルは大きくなります。
H1 ＞ H2 ＞ H3 ＞ H4 ＞ H5 ＞ H6
見出しレベルは、H1を記事タイトルとして利用するのが一般的です。本文中の見出しには、
- 大見出し：H2
- 中見出し：H3
- 小見出し：H4～
を指定するといいでしょう。
見出しブロックの設定方法については、見出しブロックの使い方で詳しく説明しています。
箇条書きリストの追加・編集
箇条書きを表示したい場合は、「リスト」ブロックを使います。
新しいブロックを追加する
今回はブロックを追加するために、先ほど作成した見出しブロックの右下にある［+］ボタンをクリックします。すると、新しいブロックの候補がいくつか表示されます。
もし候補の中に追加したいブロックがない場合は、ブロック名などを入力して検索することができます。検索結果に表示された［リスト］をクリックします。
リスト項目を追加する
リストブロックの中で［Enter］を押すと、新しいリスト項目を入力することができます。
番号付きリストに変更する
もし箇条書きの順番を明確にしたい場合は、［番号付きリスト］ボタンをクリックします。
リストブロックの設定方法については、リストブロックの使い方で詳しく説明しています。
地図（Googleマップ）の追加・編集
WordPressでは、「Googleマップ」や「Yahoo!地図」などのオンライン地図を簡単に埋め込むことができます。
“埋め込む”とは
外部サービスの機能を、Webページ上で利用可能にする操作のことを“埋め込む”と言います。 「Googleマップ」や「Yahoo!地図」へのリンクを貼るのではなく、ページ内に地図を埋め込むことで、訪問者は外部サービスに移動することなく地図を確認することができます。
WordPressで地図を埋め込むための基本手順
| 内容 | 操作画面 |
|---|---|
| 1.地図を掲載したい場所を検索 | オンライン地図画面 |
| 2.地図のサイズや拡大率などを調整 | オンライン地図画面 |
| 3.埋め込み用コードをコピー | オンライン地図画面 |
| 4.カスタムHTMLブロックにコードを貼り付け | WordPressブロックエディタ |
詳しい操作方法は、地図を表示させる（Googleマップなどの埋め込み）方法をお読みください。
YouTubeの動画やTwitterなどSNSのコンテンツを、記事内に埋め込むこともできます。詳しい手順は、リンクの貼り方｜WordPressでリンクを貼る方法とURLの埋め込みで紹介しています。
ここまで、ブロックエディタで記事コンテンツを編集する方法について、具体例をまじえて説明しました。他にもたくさんのブロックが用意されているので、いろいろと試してみてください。
プレビュー確認／下書き保存
プレビューの確認
記事コンテンツの編集ができたら、プレビューを確認してみましょう。ブロックエディタ画面右上の［プレビュー］をクリックします。
ブロックエディタのプレビュー機能では、
- デスクトップ
- タブレット
- モバイル
を切り替えることで、各端末での見え方をチェックできます。
また［新しいタブでプレビュー］をクリックすると、実際にブラウザでどのように表示されるのかを確認することもできます。
下書き保存
任意のタイミングで下書き保存をするには、［プレビュー］の左隣にある［下書き保存］をクリックします。
ここからは、記事の公開前にやるべき設定について紹介します。
公開前の設定
記事の公開前に行う設定は、主に［パネル］を使います。パネルで、投稿（または固定ページ）タブを選択します。
パーマリンク
パーマリンクとは、WordPressサイトのページごとのURLのことです。WordPress管理画面［設定］＞［パーマリンク設定］では、ページごとのURLの形式を設定することができます。
パーマリンク設定は、記事を書く前にやるべき初期設定の1つです。まだ設定ができていない場合は、WordPressで記事を書く前にやるべき5つの初期設定を参考にして、早めに対応しておきましょう。
上の画像のように、パーマリンクに「投稿名」を含む形式を設定している場合は、投稿（または固定ページ）のパネルで［URLスラッグ］を指定することができます。
URLスラッグに指定した文字列は、その記事のURLの一部になります。英数字やハイフン（-）を半角で入力しましょう。
カテゴリー・タグ
カテゴリーやタグには、投稿を分類する役割があります。
カテゴリーは、同じジャンルに属する投稿をグループ化するのに使います。 タグは、さまざまなカテゴリーに属する投稿内に共通するキーワードで分類することができます。 詳しくは、タグとカテゴリーの違いをお読みください。
アーカイブページ
WordPressには、同じカテゴリー（またはタグ）が設定された投稿の一覧ページを自動生成する機能があります。この一覧ページのことを、「アーカイブページ」といいます。同じジャンルの記事が一覧表示されることによって、訪問者が目的のページにたどり着きやすくなります。
カテゴリーの設定は必須、タグの設定は任意です。
アイキャッチ画像
アイキャッチ画像は、訪問者の目を引きつけるための画像です。その記事を象徴するような画像をアイキャッチに設定することで、目的のページが見つけやすくなったり、訪問者の興味を引きやすくなったりする効果が期待できます。
アイキャッチ画像が表示される場所は、使用するテーマによって異なります。カテゴリーやタグの「アーカイブページ」で表示されたり、記事のタイトル下に表示される場合もあります。
設定するには、まず［アイキャッチ画像を設定］をクリックします。
次に、アイキャッチに使用する画像を指定します。
- すでにアップロード済みの画像を使う場合 ＞［メディアライブラリ］で画像を選択
- 新しく画像をアップロードする場合 ＞［ファイルをアップロード］をクリック
画像を選択（またはアップロード）したら、画像ブロックでの設定と同じように、代替テキスト（Altテキスト）を入力しておきましょう。最後にアイキャッチ画像を設定をクリックします。
抜粋
抜粋の入力は任意です。抜粋に投稿内容の要約を入力すると、アーカイブページや検索結果に表示されることがあります。
抜粋が空欄の場合でも、投稿の先頭110文字（WordPress日本語版の場合）を使って抜粋が自動生成されるため、入力しなくても問題ありません。
ディスカッション
「コメント」や「ピンバック・トラックバック」を許可する場合は、それぞれチェックを入れます。
ピンバック・トラックバックとは
サイト間の通知を行うための機能です。固定ページでは設定することができません。詳しくは、トラックバックとピンバックの違いとは？をお読みください。
公開前の設定ができたら、いよいよ記事の公開です。すぐに公開するだけでなく、公開日時の指定や、閲覧者を制限することもできます。
記事の公開
記事の公開に関する設定は、投稿（または固定ページ）パネルの［ステータスと公開状態］で行います。
表示状態（公開状態）の設定
表示状態（公開状態）の設定は、以下の3つから選択できます。
| 公開 | 誰でも記事を閲覧できる |
|---|---|
| 非公開 | WordPress管理画面にログインしている人だけが、記事を閲覧できる |
| パスワード保護 | パスワードを入力できる人だけが、記事を閲覧できる |
初期状態は「公開」が選択されています。「非公開」や「パスワード保護」に変更する場合は、［公開］をクリックします。
非公開を選んだ場合
［非公開］を選択すると、「今すぐ非公開で投稿しますか？」と表示されます。OKをクリックすると、その瞬間に非公開での投稿が完了します。
非公開の記事を閲覧できるのは、WordPress管理画面にログインできる「ユーザー」だけです。WordPressでは、複数のユーザーを登録して、個別に権限を与えることができます。
パスワード保護を選んだ場合
［パスワード保護］を選択すると、パスワードの入力欄が表示されます。
パスワードが入力できたら、「公開状態」の枠外をクリックして元の画面に戻ります。
公開日時の設定
すぐに記事を公開する場合は、設定変更の必要はありません。公開日時を変更する場合は、［今すぐ］をクリックします。
カレンダーの日付をクリックすると、その日付を投稿日とすることができます。
公開日時を指定できたら、枠外をクリックして元の画面に戻ります。
［表示状態（公開状態）］と［公開日時］を設定できたら、ブロックエディタ画面右上の公開をクリックします。
未来の投稿日時を指定した場合は、予約…をクリックします。
設定の再確認をして公開をクリックすると、記事の公開が完了します。
公開前の設定の再確認が必要ない場合は、［公開前チェックを常に表示する。］のチェックを外します。
ここまで、ブロックエディタを使った記事編集と公開の流れを説明しました。ここからは、記事編集で作成した「ブロック」の操作方法について紹介します。
ブロックの操作方法
ブロックの基本的な操作について説明します。
ブロックの追加
ブロックエディタで新しいブロックを追加する方法は、複数あります。
- ブロックエディタ画面左上の［ブロックの追加］をクリック
- ブロックの上部または下部をマウスオーバーして中央の［ブロックの追加］をクリック
- 空のブロックを選択して右側にある［ブロックの追加］をクリック
- ブロックを選択して［Enter］を押す
- 既存のブロックを選択して［詳細設定］をクリックし、追加操作を選択
これらのうち、やりやすい方法や、状況に応じて効率的な方法を選んでください。詳しくは、ブロックエディタで新しいブロックを追加する5つの方法で説明しています。
ブロックの移動（並べ替え）
ブロックを並べ替えるには、ブロックツールバーで以下のいずれかの操作を行います。
- ［ドラッグ］ボタンをクリックしたままマウスを上下に動かす
- ［上へ移動／下へ移動］ボタンをクリックする
ブロックの移動（並べ替え）について、さらに詳しくは、ブロックエディタでブロックを移動／削除する方法をお読みください。
ブロックのグループ化
複数のブロックを「グループ化」することにより、グループ全体の文字色や背景色などを設定したり、グループ単位で並べ替えたりすることができます。
グループの設定
グループ設定の前に
グループを設定するには、前もってグループ化したいブロックを上下に並べておく必要があります。先ほど説明した「ブロックの移動（並べ替え）」を参考にしてください。
今回は、上下に並んだ3つのブロックをグループ化してみます。最も上にあるブロックをクリックした後、キーボードの［Shift］を押しながら最も下にあるブロックをクリックします。
次にブロックタイプを変更します。ブロックツールバーの左端にある［ブロックタイプの変更］ボタンをクリックし、［グループ］を選択します。
グループ化したブロックの［パネル］が表示されます。ここでグループ全体の設定変更をすることができます。
グループを選択できない場合
グループ全体を選択したいのに、グループ内の個々のブロックが選択されてしまう場合があります。
こんなときは、ブロックツールバーの［ブロックタイプの変更］ボタンにマウスを合わせ、その上に表示される［親を選択］ボタンをクリックすると、グループ全体を選択することができます。
グループの解除
ブロックツールバーの右端にある［オプション］をクリックし、［グループ解除］をクリックします。
ブロックの複製
ブロックツールバーの［オプション］＞［複製］の順にクリックすると、元のブロックのすぐ下に複製されます。
「複製」と「コピー」の違い
「複製」を選択すると元のブロック直下に複製されるのに対し、「コピー」を選択すると任意の場所にブロックの内容を貼り付けることができます。
ブロックタイプの変更
ブロックの種類を変更するには、ブロックツールバー左端の［ブロックタイプの変更］ボタンをクリックします。
［ブロックタイプの変更］ボタンのアイコンは、ブロックの種類によって異なります。上の画像は、段落ブロックの表示例です。
どの種類に変更できるかは、ブロックによって異なります。例えば「段落」ブロックと「画像」ブロックとでは、変更できるブロックが下図のように違います。
ブロックの削除
ブロックツールバーの［オプション］＞［ブロックを削除］の順にクリックすると、ブロックを削除することができます。
ブロックの削除について、さらに詳しくは、ブロックエディタでブロックを移動／削除する方法をお読みください。
ブロックの再利用
同じ内容のコンテンツを複数の記事で使いまわしたいときは、「再利用ブロック」が便利です。
再利用したいブロックを「親」として登録し、複数の記事に「子」を配置することで、統一されたデザインのコンテンツを表示させることができます。
再利用ブロックを使いこなすための基本操作について説明します。
再利用ブロックの登録
再利用ブロックには、［1つのブロック］［複数のブロック］どちらでも登録できます。
登録したいブロックを選択（複数の場合は［Shift］を押しながら選択）して、ブロックツールバー右端の［オプション］＞［再利用ブロックに追加］の順にクリックします。
［パネル］が再利用ブロック用に変化します。再利用ブロックの名前を入力し、公開をクリックします。
ここでわかりやすい名前を登録しておくと、後から記事内に再利用ブロックを挿入するときに効率的です。
記事内容の編集途中の場合は、［投稿］のチェックを外してから保存をクリックします。
再利用ブロックの追加
まず、記事内で再利用ブロックを表示させたい位置を選択しておきます。
登録済みの再利用ブロックは、ブロック追加パネルの［再利用可能］タブ内に表示されます。挿入したいブロックをクリックします。
再利用ブロック登録時に付けた名前で検索することもできます。
再利用ブロックの編集
ブロック追加パネルの再利用ブロックカテゴリーで、［すべての再利用ブロックを管理］をクリックします。
登録済みの再利用ブロック一覧が表示されます。編集したい再利用ブロックのタイトルにマウスを合わせ、［編集］をクリックします。
編集が完了したら更新をクリックします。
まとめ
ブロックエディタ（Gutenberg）は、段落・見出し・画像・箇条書きなどのコンテンツ要素を「ブロック」単位で管理できます。
ブロックツールバーやパネルは、編集するブロックの種類に応じて表示内容が変わります。つまり、ブロックごとに設定できる内容が異なります。
ブロックエディタの基本的な使用手順は、以下のとおりです。
- 記事タイトルの入力
- 記事コンテンツの編集
- プレビュー確認／下書き保存
- 公開前の設定
- 記事の公開
各ブロックでは以下の操作が簡単にできるので、記事コンテンツの構成に手間がかかりません。
- ブロックの追加
- ブロックの移動（並べ替え）
- ブロックのグループ化
- ブロックの複製
- ブロックタイプの変更
- ブロックの削除
- ブロックの再利用
高機能なテーマを使うと利用できるブロックの種類が増えたり、便利な機能が追加されたりするため、ブロックエディタがさらに使いやすくなります。おすすめは、このサイトでも使っているテーマ「SWELL」です。
