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

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

この記事では、ブロックエディタの使い方を解説するために、スクリーンショット画像を掲載しています。ご利用環境(WordPressのバージョンや使用テーマなど)によっては、実際の画面と異なる場合があります。

目次

このサイトで使っています

このサイトで使っています

ブロックエディタ(Gutenberg)とは

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

最近ワードプレスを始めたのなら、WordPress 5.0以降を使っているはずです。使用中のバージョンは、管理画面[ダッシュボード]で確認できます。

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

ブロックエディタの特徴

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

ブロックエディタの特徴:コンテンツ要素を「ブロック」単位で管理
コンテンツの各要素を「ブロック」単位で管理できる

必要なコンテンツをブロック単位で組み合わせていくことによって、直感的に記事を作ることができます。

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

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

  • 文章………「段落」ブロック
  • 画像………「画像」ブロック
  • 見出し……「見出し」ブロック
  • 箇条書き…「リスト」ブロック

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

使用するテーマやプラグインによっては、利用できるブロックの種類が増えることがあります。

このサイトで使っているテーマ「SWELL」では、便利なオリジナルブロックが20種類も用意されています。

SWELLの独自ブロック

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

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

ブロックエディタの特徴:記事のメインコンテンツを編集できる
ブロックエディタで編集できるのはメインコンテンツ

各ページの共通部分(ヘッダー・フッター・サイドバー)を編集するには、「メニュー」や「ウィジェット」機能を使います。

Gutenbergとは

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

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

ブロックエディタには、「誰でも簡単に記事を作成できるように」との願いがこめられているのでしょう。

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

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

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

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

▼ブロックツールバーとパネルの比較
 ※段落ブロックと画像ブロックとで比較

段落ブロックのツールバーとサイドバーの表示例
「段落ブロック」の ブロックツールバーとパネル
画像ブロックのツールバーとサイドバーの表示例
「画像」ブロックの ブロックツールバーとパネル

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

▼パネルの投稿タブとブロックタブを比較
 ※段落ブロックの場合

投稿のパネルの表示例
「投稿全体」を設定するためのパネル
段落ブロックのパネルの表示例
「段落ブロック」を設定するためのパネル

この記事では、主にコンテンツの編集によく使う次の項目について解説します。

  • コンテンツ編集エリア
  • ブロックツールバー
  • パネル

ツールバーや、オプションの一部の機能については、下記ページで詳しく説明しています。

ブロックエディタを使うための準備

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

この記事では、「投稿」を新規作成する様子を例にして、ブロックエディタの基本的な使い方を紹介します。「固定ページ」もほぼ同じ手順で編集できますが、別記事の固定ページの使い方と作り方でも詳しく説明しています。

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

WordPress管理画面[投稿]>[新規追加]をクリック

初めてブロックエディタを開いたときなどに、下のような「ガイド」が表示されることがあります。

ブロックエディタのウェルカムガイド

ガイドを閉じた後、再び確認したい場合は、画面右上[オプション]>[ウェルカムガイド]の順にクリックします。

ブロックエディタのウェルカムガイド開き方
ウェルカムガイドを再表示する方法

ブロックエディタの基本的な使い方

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

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

ブロックエディタで作成する記事サンプル
ブロックエディタで、こんな記事を作ります

記事タイトルの入力

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

ブロックエディタで記事タイトルを入力

記事タイトルのスタイル変更について(中級者以上向け)
タイトルの改行や書式(文字色やサイズなど)の変更したい場合は、HTMLやCSSのコードをタイトル入力欄に記述できます。

記事コンテンツの編集

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

段落の追加・編集

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

段落ブロックに文章を入力

ブロック内での改行について

文章の途中で改行する場合は、[Shift]+[Enter]を押します。

[Enter]だけ押した場合は、新しいブロックが下に追加されます。

ブロックのパネル

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

パネルで設定できること
  1. タイポグラフィ(文字の体裁)の設定
  2. テキスト(文字)色の設定
  3. 背景色の設定
  4. 先頭文字の大きさの設定
  5. HTMLアンカーの設定
  6. 追加CSSクラスの設定

パネルが表示されない場合

もしパネルが表示されていない場合は、画面右上の[歯車]アイコンをクリックしてください。

ブロックパネルが表示されていない場合は、設定ボタンをクリック

ブロックツールバー

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

ブロックツールバーで設定できること
  1. 文字揃え(左寄せ・中央寄せ・右寄せ)を変更する
  2. 太字・イタリックにする
  3. リンクを設定する
  4. インラインコードを設定する
  5. 文章中に画像を追加する
  6. キーボード入力を設定する
  7. 文字色を変更する
  8. 上付き・下付きを設定する
  9. 取り消し線を引く

ブロックツールバーの表示位置を変更したい場合

画面右上の[オプション]>[トップツールバー]をクリックします。

ブロックツールバーの表示位置を変更するには[オプション]→[トップツールバー]をクリック

トップツールバー機能のオン・オフによって、ブロックツールバーの表示位置が次のように変わります。

トップツールバーが「オン」のときのブロックツールバーの表示例
トップツールバーが「オン」のとき 画面左上に固定表示
トップツールバーが「オフ」のときのブロックツールバーの表示例
トップツールバーが「オフ」のとき 選択中ブロックの上部に表示

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

画像の追加・編集

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

画像ブロックを追加する

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

[ブロックを追加]ボタンをクリックして画像ブロックを追加

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

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

画像サイズの変更

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

画像サイズはドラッグで変更可能

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

  • サムネイル
  • フルサイズ

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

ブロックパネルでも画像サイズを変更可能

「サムネイル」「中」「大」それぞれの画像サイズは、WordPress管理画面[設定]>[メディア]で指定できます。

Altテキスト(代替テキスト)の設定

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

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

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

ブロックパネルでAltテキストを入力

キャプションの設定

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

画像ブロックのキャプション設定

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

その他、画像の設定

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

ブロックツールバーで画像の設定変更可能

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

見出しの追加・編集

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

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

空白のブロックに見出しを入力

ブロックタイプの変換

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

ブロックタイプの変換

見出しレベルの変更

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

見出しレベルの変更

見出しレベルにはH1~H6の6段階があり、数字が小さくなるほど見出しのレベルは大きくなります。

H1 > H2 > H3 > H4 > H5 > H6

見出しレベルは、H1を記事タイトルとして利用するのが一般的です。本文中の見出しには、

  • 大見出し:H2
  • 中見出し:H3
  • 小見出し:H4~

を指定するといいでしょう。

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

箇条書きリストの追加・編集

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

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

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

[+]ボタンをクリックしてブロックを追加

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

ブロックの検索

リスト項目を追加する

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

[Enter]を押すと新しいリスト項目を入力可能

番号付きリストに変更する

もし箇条書きの順番を明確にしたい場合は、[番号付きリスト]ボタンをクリックします。

[番号付きリスト]ボタンをクリック

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

地図(Googleマップ)の追加・編集

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

“埋め込む”とは

外部サービスの機能を、Webページ上で利用可能にする操作のことを“埋め込む”と言います。 「Googleマップ」や「Yahoo!地図」へのリンクを貼るのではなく、ページ内に地図を埋め込むことで、訪問者は外部サービスに移動することなく地図を確認することができます。

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

内容操作画面
1.地図を掲載したい場所を検索オンライン地図画面
2.地図のサイズや拡大率などを調整オンライン地図画面
3.埋め込み用コードをコピーオンライン地図画面
4.カスタムHTMLブロックにコードを貼り付けWordPressブロックエディタ

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


YouTubeの動画やTwitterなどSNSのコンテンツを、記事内に埋め込むこともできます。詳しい手順は、リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込みで紹介しています。


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

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

ブロックエディタのプレビュー/下書き保存機能

プレビューの確認

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

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

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

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

また[新しいタブでプレビュー]をクリックすると、実際にブラウザでどのように表示されるのかを確認することもできます。

[新しいタブでプレビュー]をクリックするたびに、自動的に下書き保存が実行されます。


下書き保存

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

1つの記事内でたくさんのコンテンツを編集する場合は、こまめに下書き保存をしておくと安心です。


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

公開前の設定

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

公開前の設定は投稿のパネルを使う

パーマリンクとは、WordPressサイトのページごとのURLのことです。WordPress管理画面[設定]>[パーマリンク設定]では、ページごとのURLの形式を設定することができます。

パーマリンク設定は、記事を書く前にやるべき初期設定の1つです。まだ設定ができていない場合は、WordPressで記事を書く前にやるべき5つの初期設定を参考にして、早めに対応しておきましょう。

パーマリンクのおすすめ設定
パーマリンク設定を変更する方法でおすすめしている設定内容

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

投稿のパネルでURLスラッグを指定できる

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

カテゴリー・タグ

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

カテゴリーは、同じジャンルに属する投稿をグループ化するのに使います。 タグは、さまざまなカテゴリーに属する投稿内に共通するキーワードで分類することができます。 詳しくは、タグとカテゴリーの違いをお読みください。

アーカイブページ

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

固定ページはカテゴリーやタグで分類できないため、アーカイブページは生成されません。

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

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

アイキャッチ画像

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

アイキャッチ画像が表示される場所は、使用するテーマによって異なります。カテゴリーやタグの「アーカイブページ」で表示されたり、記事のタイトル下に表示される場合もあります。

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

[アイキャッチ画像を設定]をクリック

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

  • すでにアップロード済みの画像を使う場合 >[メディアライブラリ]で画像を選択
  • 新しく画像をアップロードする場合 >[ファイルをアップロード]をクリック
[メディアライブラリ]で画像を選択または[ファイルをアップロード]をクリック

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

代替テキスト入力後、[アイキャッチ画像を設定]をクリック

抜粋

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

抜粋が空欄の場合でも、投稿の先頭110文字(WordPress日本語版の場合)を使って抜粋が自動生成されるため、入力しなくても問題ありません。

ディスカッション

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

ディスカッション設定「コメント」や「ピンバック・トラックバック」を許可する場合はチェック

ピンバック・トラックバックとは

サイト間の通知を行うための機能です。固定ページでは設定することができません。詳しくは、トラックバックとピンバックの違いとは?をお読みください。


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

記事の公開

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

投稿のパネルで記事の公開に関する設定をする

表示状態(公開状態)の設定

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

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

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

投稿のパネルで[公開]をクリック

非公開を選んだ場合

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

非公開の記事を閲覧できるのは、WordPress管理画面にログインできる「ユーザー」だけです。WordPressでは、複数のユーザーを登録して、個別に権限を与えることができます。

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

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

[パスワード保護]を選択するとパスワードの入力欄を表示

パスワードが入力できたら、「公開状態」の枠外をクリックして元の画面に戻ります。

公開日時の設定

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

投稿のパネルで[今すぐ]をクリックして公開日時を指定

カレンダーの日付をクリックすると、その日付を投稿日とすることができます。

公開日時を指定できたら、枠外をクリックして元の画面に戻ります。


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

未来の投稿日時を指定した場合は、予約…をクリックします。

ブロックエディタ画面右上の公開をクリック

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

[公開]をクリック

公開前の設定の再確認が必要ない場合は、[公開前チェックを常に表示する。]のチェックを外します。

[公開前チェックを常に表示する]のチェックを外す

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

ブロックの操作方法

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

ブロックの追加

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

  1. ブロックエディタ画面左上の[ブロックの追加]をクリック
  2. ブロックの上部または下部をマウスオーバーして中央の[ブロックの追加]をクリック
  3. 空のブロックを選択して右側にある[ブロックの追加]をクリック
  4. ブロックを選択して[Enter]を押す
  5. 既存のブロックを選択して[詳細設定]をクリックし、追加操作を選択

これらのうち、やりやすい方法や、状況に応じて効率的な方法を選んでください。詳しくは、ブロックエディタで新しいブロックを追加する5つの方法で説明しています。

ブロックの移動(並べ替え)

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

  • [ドラッグ]ボタンをクリックしたままマウスを上下に動かす
  • [上へ移動/下へ移動]ボタンをクリックする
ブロックの移動(並べ替え)方法

記事タイトルの表示位置は、変更することができません。

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

ブロックのグループ化

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

グループの設定

グループ設定の前に

グループを設定するには、前もってグループ化したいブロックを上下に並べておく必要があります。先ほど説明した「ブロックの移動(並べ替え)」を参考にしてください。

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

グループ化するブロックの選択

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

ブロックのグループ化

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

グループ化したブロックのパネル

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

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

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

グループを選択できないときの対処法

グループの解除

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

グループ化したブロックのグループ解除

ブロックの複製

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

ブロックの複製方法

「複製」と「コピー」の違い

「複製」を選択すると元のブロック直下に複製されるのに対し、「コピー」を選択すると任意の場所にブロックの内容を貼り付けることができます。

ブロックタイプの変更

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

ブロックタイプの変更方法

[ブロックタイプの変更]ボタンのアイコンは、ブロックの種類によって異なります。上の画像は、段落ブロックの表示例です。

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

段落ブロックの変更可能なブロック
「段落」ブロックの場合
画像ブロックの変更可能なブロック
「画像」ブロックの場合

ブロックの削除

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

ブロックの削除方法

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

ブロックの再利用

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

再利用したいブロックを「親」として登録し、複数の記事に「子」を配置することで、統一されたデザインのコンテンツを表示させることができます。

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

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

再利用ブロックの登録

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

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

再利用ブロックの登録方法

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

再利用ブロックを名前をつけて公開

ここでわかりやすい名前を登録しておくと、後から記事内に再利用ブロックを挿入するときに効率的です。

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

[投稿]のチェックを外してから再利用ブロックを保存

再利用ブロックの追加

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

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

再利用ブロックは追加パネル[再利用可能]タブ内に表示される

再利用ブロック登録時に付けた名前で検索することもできます。

再利用ブロックの検索

再利用ブロックの編集

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

[すべての再利用ブロックを管理]をクリック

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

再利用ブロック編集画面を開く方法

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

再利用ブロックの編集内容を更新

まとめ

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

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

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

  1. 記事タイトルの入力
  2. 記事コンテンツの編集
  3. プレビュー確認/下書き保存
  4. 公開前の設定
  5. 記事の公開

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

  • ブロックの追加
  • ブロックの移動(並べ替え)
  • ブロックのグループ化
  • ブロックの複製
  • ブロックタイプの変更
  • ブロックの削除
  • ブロックの再利用

高機能なテーマを使うと利用できるブロックの種類が増えたり、便利な機能が追加されたりするため、ブロックエディタがさらに使いやすくなります。おすすめは、このサイトでも使っているテーマ「SWELL」です。

このサイトで使っています

  • URLをコピーしました!

このサイトで使っているテーマ

多彩なブロックが使えるから
サクサク記事を書けるテーマ
センス不要!
シンプルで美しいサイトを簡単に作れます

くわしい設定マニュアルが用意されているので、初心者でも安心して使えます

目次