ブロックエディター（Gutenberg）の使い方【WordPress最新版】

2020-07-302021-02-23

2018年から実装された『ブロックエディター（Gutenberg）』は、現在WordPressのメインエディターとして採用されています。

コンテンツ作成には、ブロックエディターが主流となってきていますね

この記事を読んでいるということは、あなたもブロックエディターを使い始めたばかりであまり使い方がわからないのではないでしょうか。

当記事では、ブロックエディターの使い方を紹介していきます。

使い方はすべて画像と一緒に解説していきますので、ブロックエディターを使い始めたばかりでも理解しやすい内容となっています。

この記事を最後まで読み、ブロックエディターの使い方をマスターしましょう。

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

ブロックエディター（Gutenberg）とは、2018年から実装された新しいエディターのことです。

ブロックエディターの特徴は、ブロック（文章）を積み上げるようにして記事作成をすることです。

イメージとしては、下記の通りです。

※ブロックを積み上げるイメージ

ブロック単位で記事を管理できることには、次のメリットがあります。

初心者でも簡単にレイアウトを変更できるようになった点は、従来のエディターからしてみれば大きな進化だと言えますね

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

ブロックエディターの基本的な使い方は、次の通りです。

それぞれの項目ごとに紹介していきますね。

ブロックエディターの基本設定

ブロックエディターの基本設定は、画面右上のツールボタンをクリックすれば開けます。

ブロックエディターの基本設定では、次にあげる3つの項目を変更できます。

ブロックエディターの基本設定＞表示

基本設定の「表示」では、ブロックエディターの表示方法を変更できます。

変更できる項目は、次の3つです。

トップツールバー

トップツールバーをONにすることで、ブロックの編集ボタンが画面上部に固定されます。

そのため、いつも同じ位置からブロックのカスタマイズを行えるようになります。

スポットライトモード

スポットライトモードをONにすることで、選択しているブロックだけが強調されるようになります。

そのため、編集しているブロックを認識しやすくなります。

フルスクリーンモード

フルスクリーンモードをONにすることで、記事作成に必要ないダッシュボードのメニューなどが閉じます。

そのため、画面にはエディターだけが表示され、記事作成に集中できるようになります。

ブロックエディターの基本設定＞エディター

基本設定の「エディター」では、ビジュアルエディターとコードエディターを切り替えられます。

ビジュアルエディター

ビジュアルエディターとはコードを見やすく表示し、編集をしやすくしたエディターのことです。

コードエディター

コードエディターとは、コードを直接編集するためのエディターです。

ブロックエディターの基本設定＞ツール

基本設定の「ツール」では、主にブロックエディターの編集を行います。

エディターの編集を行う項目は、次の2つです。

ブロックマネージャー

ブロックマネージャーでは、追加するブロックの種類を自分好みにカスタマイズできます。

オプション

オプションでは、記事の詳細設定をカスタマイズできます。

タイトルの入力

記事タイトルはエディターの一番上に入力します。

見出しの作成

見出しの作成方法は、ブロックの追加ボタンをクリックし「見出し」を選択すれば作れます。

本文の執筆

本文はエディターの中央部分に書き進めていきます。

本文作成の時に使う基本的なコマンドは下記の通りです。

新規ブロックの追加

Enter

ブロックの中で改行

Shift+Enter

それでは本文作成の基本として、本文を執筆する際によく使うブロックを6つ紹介していきますね。

段落の作成

段落の作成方法は、ブロックの追加ボタンをクリックし「段落」を選択すれば作れます。

なお、通常の文章は「段落」で作成していきます。

アンカーテキスト（リンク）の作成

アンカーテキスト（リンク）の作成方法は、ブロックに文字を入力し、ブロック編集ボタンから「リンク」をクリックします。

あとは、リンク先のURLを入力すれば完了です。

リスト（箇条書き）の作成

リストの作成方法は、ブロックの追加ボタンをクリックし「リスト」を選択すれば作れます。

引用文の作成

引用文の作成方法はブロックの追加ボタンをクリックし、一般ブロックの中から「引用」を選択すれば作れます。

テーブル（表）の作成

テーブルの作成方法はブロックの追加ボタンをクリックし、フォーマットの中から「表」を選択します。

するとデータの入力画面が表示されますので、列数と行数を入力し「表を作成」をクリックすればテーブルの完成です。

HTMLの挿入

HTMLの挿入方法はブロックの追加ボタンをクリックし、フォーマットの中から「カスタムHTML」を選択すれば追加できます。

文字の装飾

文字の装飾は、ブロックエディターの右サイドバーにある「ブロック」から行えます。

変更できる項目は、次の3つです。

テキスト設定

テキスト設定では、フォントサイズの変更が行えます。

フォントサイズは上記の7種類から選べ、カスタムではpx単位で好きなフォントサイズに変更できます。

色設定

色設定では、文字色と文字の背景色を変更できます。

高度な設定

高度な設定では、ブロックに任意のクラスを追加できます。

画像の挿入

画像の挿入方法はブロックの追加ボタンをクリックし、一般ブロックの中から「画像」を選択します。

「アップロード」をクリックし、掲載したい画像を選択すれば完了です。

他にも便利な画像の挿入方法が2つありますので、サクッと紹介していきますね。

ギャラリー機能の利用

ギャラリー機能を利用することで、画像を横並びに表示できます。

ギャラリーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「ギャラリー」を選択します。

あとは、横並びにしたい画像を続けてアップロードしていくだけでOKです。

カバー機能の利用

カバー機能を利用することで、画像に文字をかぶせて表示できるようになります。

カバーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「カバー」を選択します。

あとは「アップロード」から画像を選択し、かぶせたい文字を入力すれば完了です。

記事の仕上がりを確認

記事の仕上がりは、エディターの右上にある「プレビュー」から確認できます。

記事の下書き保存

記事を下書き保存するには、エディターの右上にある「下書き保存」をクリックします。

下書き保存された記事はサイトには表示されないため、作成途中の記事を保存しておくときに便利な機能ですね

記事の投稿・公開

記事を投稿するには、エディターの右上にある「公開する」をクリックします。

すると確認画面が表示されますので、再度「公開する」をクリックすれば記事の投稿は完了です。

記事の予約投稿をする方法

記事の予約投稿をする場合には、公開の確認画面で設定できる「公開」の欄を、”今すぐ”から投稿したい日付に合わせます。

あとは「予約投稿」をクリックすれば、設定した日付に記事を自動で投稿してくれます。

【エリア別】ブロックエディターの使い方

ブロックエディターはエリアごとに分類すると、次の3つにわけられます。

※それぞれのエリアごとに分けた画像を用意

それぞれのエリアごとに、使い方を紹介していきますね。

ヘッダーメニューエリアの使い方

ヘッダーメニューエリアには、次の5つの機能があります。

それぞれの機能の使い方は、下記の表を参考にしてみてください。

メインエリアの使い方

メインエリアでは、本文の作成を行います。

サイドメニューエリアの使い方

サイドメニューエリアでは、下記の7項目を編集できます。

それぞれの項目の使い方や編集方法は、下記の表を参考にしてみてください。

ブロックの使い方

ブロックの使い方は、主に次の7つです。

それぞれの使い方を紹介していきますね。

使い方①：ブロックの挿入

ブロックの使い方1つ目は、ブロックの挿入です。

ブロックを挿入するには、挿入したいブロックの隙間にカーソルを乗せます。

するとブロックの追加ボタンが表示されるので、ボタンをクリックしてブロックを挿入します。

使い方②：ブロックの編集

ブロックの使い方2つ目は、ブロックの編集です。

ブロックの編集を行うにはエディターの右サイドバーにある「ブロック」と、ブロックの編集ボタンから編集できます。

使い方③：ブロックの移動

ブロックの使い方3つ目は、ブロックの移動です。

ブロックの移動は、ブロックの変更ボタンの左側に表示されている「矢印ボタン」から行えます。

使い方④：ブロックの複製

ブロックの使い方4つ目は、ブロックの複製です。

ブロックを複製するには、複製したいブロックを選択した状態で詳細設定をクリックし「複製」を選択します。

すると、選択していたブロックの下に同じブロック要素が複製されます。

文字の装飾パターンをいくつか試したい場合には、ブロックを複製していろいろ試してみましょう！

使い方⑤：ブロックの削除

ブロックの使い方5つ目は、ブロックの削除です。

ブロックを削除する方法は、削除したいブロックの詳細設定をクリックし「ブロックを削除」をクリックするだけです。

使い方⑥：ブロックをグループでまとめる

ブロックの使い方6つ目は、ブロックをグループでまとめる方法です。

ブロックをグループでまとめるには「Shiftキー」を押しながらまとめたいブロックを選択し、詳細設定ボタンをクリック。

そして設定欄の中の「グループ化」を選択すれば、選択したブロックをひとまとめにできます。

ブロックをグループ化することで、ブロックの移動や編集を一括して行えますね

使い方⑦：再利用ブロックに追加

ブロックの使い方7つ目は、再利用ブロックに追加する方法です。

再利用ブロックとはブロックの内容を保存し、他の記事でも複製できるようにしたブロックのことです。

よく使うブロックを再利用ブロックとして登録しておくことで、毎回同じブロックを作る手間が省けますね

再利用ブロックに追加する方法は、ブロックの変更ボタンの中から詳細設定をクリックし「再利用ブロックに追加」を選択すれば追加できます。

ブロックの種類

ブロックの種類は、大きく分けて次の6つに分類されています。

それぞれのブロックの使い方を、簡単に紹介していきますね。

テキストブロック

テキストブロックには、次の10コのブロックが該当します。

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

メディアブロック

メディアブロックには、次の7コのブロックが該当します。

それぞれのブロックの使い方は、次の表を参考にしてみてください。

デザインブロック

デザインブロックには、次の7コのブロックが該当します。

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

ウィジェットブロック

ウィジェットブロックには、次の11コのブロックが該当します。

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

埋め込みブロック

埋め込みブロックでは、下記のように様々なサービスのコンテンツを追加できます。

例として、使用頻度の高い埋め込みブロックだけ紹介していきますね。

WordPressでブロックエディターを使いこなそう！

これで「ブロックエディターの使い方」の内容は終わりです。

クラシックエディターからブロックエディターに移行した場合には、最初の頃は使いづらさを感じるかもしれません。

しかし、ブロックエディターも使っていくうちに徐々に使いやすくなっていきます。

今後はブロックエディターを使いこなし、効率的に記事作成を進めていきましょう。

当ブログでは、WordPressの使い方を初心者に向けて紹介しています。

【初心者保存版】WordPressの使い方マニュアル＿0から徹底紹介します

WordPressの使い方を深く知ることで、効率的かつ質の高いサイト運営を行えるようになります。 WordPressを始めたら、まずは使い方...

WordPressを使い始めたばかりの場合には、ぜひ一度読んでみてください。

最後まで読んでいただきありがとうございました。