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