ブロックエディタ（Gutenberg）の使い方

ブロックエディタ（Gutenberg）は、WordPressで記事を編集するための機能です。文章や画像などのコンテンツをブロック単位で管理し、組み合わせることによって記事を作ります。ブロックエディタの使い方をマスターすれば、Webの専門知識がない初心者さんでも直感的に記事を書くことができます。

ブロックエディタ（Gutenberg）とは

「ブロックエディタ（Gutenberg）」は、WordPress 5.0以降で利用できる、記事の編集機能です。

WordPressで記事を作るためには「投稿」や「固定ページ」を利用しますが、両方ともブロックエディタを使って編集します。

ブロックエディタの特徴

ブログやWebサイトの記事には、見出し・段落・箇条書きリスト・画像・動画など、さまざまな要素を組み合わせることができます。このような個別のコンテンツ要素を「ブロック」単位で管理できるのが、ブロックエディタの大きな特徴です。

豊富なブロックを使い分ける

ブロックエディタには初期状態で60種類以上のブロックが用意されていて、表示したい内容に応じて使い分けます。例えば、

というように、記事コンテンツを細かいブロックに分けることで、並べ替えや再利用などが可能になります。

ページのメインコンテンツを編集できる

下の画像は、WordPressで作成した記事の例です。ブロックエディタで編集できるのは、各ページに共通する部分（ヘッダー・フッター・サイドバー）を除いた、Webページのメインコンテンツとなる部分です。

Gutenbergとは

ブロックエディタは「Gutenberg（グーテンベルク）」とも呼ばれます。活版印刷技術を発明したヨハネス・グーテンベルク（Johannes Gutenberg）にちなんで名付けられました。

活版印刷は、それまで一部の富裕層だけが所有していた書物を、一般の人々にまで広めるきっかけとなった技術だと言われています。

ブロックエディタの画面構成

ブロックエディタの画面は、以下のエリアから構成されています。

ツールバー	ブロックの新規追加、元に戻す／やり直す、文書構造の確認など
保存／公開、オプション	下書き保存、公開、オプション設定など
コンテンツ編集	メインコンテンツの編集エリア
ブロックツールバー	ブロックごとの各種設定
パネル	記事全体／ブロックごとの各種設定
パンくずリスト	編集／選択中のブロックの位置を階層で表示

コンテンツ編集エリアで、さまざまなブロックを組み合わせて記事を書いていきます。ここで利用するブロックの種類に応じて、ブロックツールバーや、パネルの表示内容が変わります。

パネルは、［記事全体の設定用］と［ブロックの設定用］とを切り替えることができます。

この記事では、主にコンテンツの編集によく使う、コンテンツ編集エリア、ブロックツールバー、パネルの使い方についてご紹介します。

ブロックエディタの使い方

ブロックエディタは、投稿や固定ページの作成・編集画面で使います。

準備として、WordPress管理画面［投稿］→［新規追加］をクリックして、投稿の新規作成画面を開いておきましょう。

ブロックエディタの基本的な使用手順

下のような記事を実際に作成する様子をまじえながら、ブロックエディタの使い方を説明します。

記事タイトルの入力

まず、記事のタイトルを入力します。その記事において重要なキーワードを含めたタイトルにすると、検索エンジンからの来訪数アップが期待できます。

記事コンテンツの編集

記事に表示させたいコンテンツ要素に応じて、ブロックを使い分けます。今回は、以下のコンテンツ要素をブロック単位で入力します。

段落

記事タイトルの下に、あらかじめ「段落」ブロックが用意されています。ここに文章を入力します。

ブロックのパネル

ブロック全体の設定を変更するには、主に画面右側の［パネル］を使います。段落ブロックのパネルでは、以下の設定ができます。

ブロックツールバー

ブロック内の一部について設定を変更するには、［ブロックツールバー］を使います。段落ブロックのツールバーでは、以下の操作をすることができます。

段落ブロックの「パネル」や「ブロックツールバー」については、段落ブロックの使い方で詳しく説明しています。

画像

次に画像を挿入したいのですが、画面上にはブロックがありません。こんなときは、新しいブロックを追加する必要があります。

新しいブロックを追加する

ブロックの新規追加はいくつかの方法がありますが、今回は画面左上の［ブロックを追加］ボタンをクリックして「画像」ブロックを追加してみましょう。

次に、画像の挿入方法を選択します。新しい画像を挿入する場合アップロードをクリックします。

アップロード	パソコンなどに保存されている画像ファイルを転送できる
メディアライブラリ	すでにアップロードしている画像ファイルから選択できる
URL から挿入	他サイトに掲載されている画像ファイルのURLを指定できる

画像サイズの変更

画像の幅や高さは、ドラッグ操作で変更することができます。

パネルでは、［画像サイズ］のプルダウンメニューで

から選べるほか、［画像の寸法］では任意のサイズを数値で指定することができます。

Altテキスト（代替テキスト）の設定

Altテキストとは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示するための文字列です。そのため、基本的にはWebページ上に表示されません。

また、視覚に障害がある人などが利用する「スクリーンリーダー」で画像を音声に変換するときにも使われます。

Altテキストには、画像の内容を簡潔に説明するテキストを入力しておきましょう。

キャプションの設定

画像ブロックを選択した状態で、下の［キャプションを入力…］をクリックすると、テキストを入力できます。Altテキストとは異なり、キャプションに入力したテキストはWebページ上に表示されるので、訪問者に対して画像の説明が必要な場合に入力しましょう。

キャプションには、書式（太字・文字色など）の変更やリンクの設定などの操作をすることができます。

その他、画像の設定

ブロックツールバーを使えば、画像の［配置の変更］［リンクの設定］［切り抜き］などの操作をすることができます。

画像ブロックの設定方法については、画像ブロックの使い方で詳しく説明しています。

見出し

見出しには、長文の記事を読みやすくする効果があります。また、使用しているテーマやプラグインによっては、目次の項目として使われることがあります。

ここでは、画像ブロックの下にある“空白”のブロックに、見出しとなる文字列を入力してみましょう。

ブロックタイプの変換

“空き”のブロックに文字を入力した段階では、「段落」ブロックとして機能します。これを見出しブロックに変換するには、［ブロックツールバー左端のボタン］をクリック後、［見出し］をクリックします。

見出しレベルの変更

ブロックツールバーの［H2］をクリックすると、見出しレベルを変更することができます。

見出しブロックの設定方法については、見出しブロックの使い方で詳しく説明しています。

箇条書きリスト

箇条書きを表示したい場合は、「リスト」ブロックを使います。

新しいブロックを追加する

今回はブロックを追加するために、先ほど作成した見出しブロックの右下にある［+］ボタンをクリックします。すると、新しいブロックの候補がいくつか表示されます。

もし候補の中に追加したいブロックがない場合は、ブロック名などを入力して検索することができます。検索結果に表示された［リスト］をクリックします。

リスト項目を追加する

リストブロックの中で［Enter］を押すと、新しいリスト項目を入力することができます。

リストブロックの設定方法については、リストブロックの使い方で詳しく説明しています。

地図（Googleマップ）

WordPressでは、「Googleマップ」や「Yahoo!地図」などのオンライン地図を簡単に埋め込むことができます。

WordPressで地図を埋め込むための基本手順

詳しい操作方法は、地図を表示させる（Googleマップなどの埋め込み）方法をお読みください。

---

ここまで、ブロックエディタで記事コンテンツを編集する方法について、具体例をまじえて説明しました。他にもたくさんのブロックが用意されているので、いろいろと試してみてください。

プレビュー確認／下書き保存

記事コンテンツの編集ができたら、プレビューを確認してみましょう。ブロックエディタ画面右上の［プレビュー］をクリックします。

ブロックエディタのプレビュー機能では、

• デスクトップ
• タブレット
• モバイル

を切り替えることで、各端末での見え方をチェックできます。

また［新しいタブでプレビュー］をクリックすると、実際にブラウザでどのように表示されるのかを確認することもできます。［新しいタブでプレビュー］をクリックするたびに、自動的に下書き保存が実行されます。

任意のタイミングで下書き保存をするには、［プレビュー］の左隣にある［下書き保存］をクリックします。

---

ここからは、記事の公開前にやるべき設定についてご紹介します。

公開前の設定

記事の公開前に行う設定は、主に［パネル］を使います。パネルで、投稿（または固定ページ）タブを選択します。

以下の公開前設定について説明します。

パーマリンク

パーマリンクとは、WordPressで作成するWebサイトのページごとのURLのことです。WordPress管理画面［設定］→［パーマリンク設定］では、ページごとのURLの形式を設定することができます。

上の画像のように、パーマリンクに「投稿名」を含む形式を設定している場合は、投稿（または固定ページ）のパネルで［URLスラッグ］を指定することができます。

URLスラッグに指定した文字列は、その記事のURLの一部になります。英数字やハイフン（-）を半角で入力しましょう。

カテゴリー・タグ

カテゴリーやタグには、投稿を分類する役割があります。

WordPressには、同じカテゴリー（またはタグ）が設定された投稿の一覧ページを自動生成する機能があります。この一覧ページのことを、「アーカイブページ」といいます。同じジャンルの記事が一覧表示されることによって、訪問者が目的のページにたどり着きやすくなります。

カテゴリーの設定は必須、タグの設定は任意です。

アイキャッチ画像

アイキャッチ画像は、訪問者の目を引きつけるための画像です。その記事を象徴するような画像をアイキャッチに設定することで、目的のページが見つけやすくなったり、訪問者の興味を引きやすくなったりする効果が期待できます。

設定するには、まず［アイキャッチ画像を設定］をクリックします。

次に、アイキャッチに使用する画像を指定します。

画像を選択（またはアップロード）したら、画像ブロックでの設定と同じように、代替テキスト（Altテキスト）を入力しておきましょう。最後にアイキャッチ画像を設定をクリックします。

抜粋

抜粋の入力は任意です。抜粋に投稿内容の要約を入力すると、アーカイブページや検索結果に表示されることがあります。

ディスカッション

「コメント」や「ピンバック・トラックバック」を許可する場合は、それぞれチェックを入れます。

---

公開前の設定ができたら、いよいよ記事の公開です。すぐに公開するだけでなく、公開日時の指定や、閲覧者を制限をすることもできます。

記事の公開

記事の公開に関する設定は、投稿（または固定ページ）パネルの［ステータスと公開状態］で行います。

表示状態（公開状態）の設定

表示状態（公開状態）の設定は、以下の3つから選択できます。

公開	誰でも記事を閲覧できる
非公開	WordPress管理画面にログインしている人だけが、記事を閲覧できる
パスワード保護	パスワードを入力できる人だけが、記事を閲覧できる

初期状態は「公開」が選択されています。「非公開」や「パスワード保護」に変更する場合は、［公開］をクリックします。

非公開を選んだ場合

［非公開］を選択すると、「今すぐ非公開で投稿しますか？」と表示されます。OKをクリックすると、その瞬間に非公開での投稿が完了します。

パスワード保護を選んだ場合

［パスワード保護］を選択すると、パスワードの入力欄が表示されます。

公開日時の設定

すぐに記事を公開する場合は、設定変更の必要はありません。公開日時を変更する場合は、［今すぐ］をクリックします。

---

［表示状態（公開状態）］と［公開日時］を設定できたら、ブロックエディタ画面右上の公開をクリックします。

設定の再確認をして公開をクリックすると、記事の公開が完了します。

---

ここまで、ブロックエディタを使った記事編集と公開の流れを説明しました。ここからは、記事編集で作成した「ブロック」の操作方法についてご紹介します。

ブロックの操作方法

ブロックの基本的な操作について説明します。

ブロックの追加

ブロックエディタで新しいブロックを追加する方法は、複数あります。

ブロックの移動（並べ替え）

ブロックを並べ替えるには、ブロックツールバーで以下のいずれかの操作を行います。

• ［ドラッグ］ボタンをクリックしたままマウスを上下に動かす
• ［上へ移動／下へ移動］ボタンをクリックする

ブロックの移動（並べ替え）について、さらに詳しくは、ブロックエディタでブロックを移動／削除する方法をお読みください。

ブロックのグループ化

複数のブロックを「グループ化」することにより、グループ全体の文字色や背景色などを設定したり、グループ単位で並べ替えたりすることができます。

グループの設定

今回は、上下に並んだ3つのブロックをグループ化してみます。最も上にあるブロックをクリックした後、キーボードの［Shift］を押しながら最も下にあるブロックをクリックします。

次にブロックタイプを変更します。ブロックツールバーの左端にある［ブロックタイプの変更］ボタンをクリックし、［グループ］を選択します。

グループ化したブロックの［パネル］が表示されます。ここでグループ全体の設定変更をすることができます。

グループを選択できない場合

グループ全体を選択したいのに、グループ内の個々のブロックが選択されてしまう場合があります。

こんなときは、ブロックツールバーの［ブロックタイプの変更］ボタンにマウスを合わせ、その上に表示される［親を選択］ボタンをクリックすると、グループ全体を選択することができます。

グループの解除

ブロックツールバーの右端にある［オプション］をクリックし、［グループ解除］をクリックします。

ブロックの複製

ブロックツールバーの［オプション］→［複製］の順にクリックすると、元のブロックのすぐ下に複製されます。

ブロックタイプの変更

ブロックの種類を変更するには、ブロックツールバー左端の［ブロックタイプの変更］ボタンをクリックします。

どの種類に変更できるかは、ブロックによって異なります。例えば「段落」ブロックと「画像」ブロックとでは、変更できるブロックが下図のように違います。

ブロックの削除

ブロックツールバーの［オプション］→［ブロックを削除］の順にクリックすると、ブロックを削除することができます。

ブロックの削除について、さらに詳しくは、ブロックエディタでブロックを移動／削除する方法をお読みください。

ブロックの再利用

同じ内容のコンテンツを複数の記事で使いまわしたいときは、「再利用ブロック」が便利です。

再利用ブロックの「親」を編集すると、記事内に配置された「子」の内容も一斉に更新されます。

再利用ブロックを使いこなすための基本操作について説明します。

再利用ブロックの登録

再利用ブロックには、［1つのブロック］［複数のブロック］どちらでも登録できます。

登録したいブロックを選択（複数の場合は［Shift］を押しながら選択）して、ブロックツールバー右端の［オプション］→［再利用ブロックに追加］の順にクリックします。

［パネル］が再利用ブロック用に変化します。再利用ブロックの名前を入力し、公開をクリックします。

記事内容の編集途中の場合は、［投稿］のチェックを外してから保存をクリックします。

再利用ブロックの挿入

まず、記事内で再利用ブロックを表示させたい位置を選択しておきます。

登録済みの再利用ブロックは、ブロック追加パネルの［再利用可能］タブ内に表示されます。挿入したいブロックをクリックすると、再利用ブロックを挿入できます。

再利用ブロックの編集

ブロック追加パネルの再利用ブロックカテゴリーで、［すべての再利用ブロックを管理］をクリックします。

登録済みの再利用ブロック一覧が表示されます。編集したい再利用ブロックのタイトルにマウスを合わせ、［編集］をクリックします。

編集が完了したら更新をクリックします。

まとめ

ブロックエディタ（Gutenberg）は、段落・見出し・画像・箇条書きなどのコンテンツ要素を「ブロック」単位で管理できます。

ブロックツールバーやパネルは、編集するブロックの種類に応じて表示内容が変わります。つまり、ブロックごとに設定できる内容が異なります。

ブロックエディタの基本的な使用手順は、以下のとおりです。

各ブロックでは以下の操作が簡単にできるので、記事コンテンツの構成に手間がかかりません。