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

WordPressのブロックエディターって使いにくいですよね？

WordPressの旧エディターはいずれサポートが切れますので、「ブロックエディターに慣れなきゃ」と思いつつも、後回しになっている方は多いと思います。

そこで今回は『WordPressのブロックエディター（Gutenberg）の使い方』を解説していきます。

この記事を読めばブロックエディターの基本的な使い方が分かるので、後は実際に使っていく中で慣れていくだけです。

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

ブロックエディター（Gutenberg）の使い方の基本として、まずはこの５つを押さえておきましょう。

ブロックエディターの画面の見方

ブロックエディターの画面は利用するテーマで異なる部分もありますが、主に以下の４つのエリアに分かれます。

なお、今回解説で利用しているテーマはCocoonです。

上部ツールバー

ブロックエディターの上部のツールバーには、このような機能があります。

メインエリア

ブロックエディターのメインエリアでできることは、この２つだけです。

記事の作成時は、ここでブロックを追加して書いていきます。

サイドバー

ブロックエディターのサイドバーには『投稿』タブと『ブロック』があります。

『投稿』タブには、このような設定メニューがあります。

 

『ブロック』タブは利用しているブロックによって設定メニューが変わります。

例えば『クラシックブロック』には特に何もありませんが、『見出しブロック』『ボタンブロック』にはサイズや色の変更などの設定メニューがあります。

ブロックを利用する際は、こちらの『ブロック』タブの設定も確認しておきましょう。

下部設定メニュー

Cocoonのブロックエディターには、下部にこのような設定メニューがあります。

しかし、ブロックエディターの下部設定メニューは、テーマによってはない場合もあります。

また、導入しているプラグインの機能として表示されることもあります。

ブロックエディターを使う際には、使っているテーマでこのような設定メニューがないか確認しておきましょう。

ブロックの追加

ブロックの追加は２つのやり方があります。

まず一つ目が上部ツールバーの『＋』をクリックする方法。

↓↓↓

画面左にブロック一覧が表示されますので、使いたいブロックを選択してください。

なお、『×』をクリックするとブロック一覧を閉じることができます。

 

もう一つの方法がメインエリアの『＋』をクリックする方法です。

 

このやり方では、最初に最近使ったブロックが６つ表示されます。

 

そして『すべて表示』をクリックすると、上部ツールバーの『＋』をクリックした時と同じように一覧が表示されます。

利用するブロックが大体決まっている方は、メインエリアの『＋』をクリックしたほうが、ブロックを探す手間が省けて効率が上がるでしょう。

ブロックの削除

ブロックを削除するには、まずメインエリア内の削除したいブロックをクリックして選択します。

上手く選択できない場合は、上部メニューの『リスト表示』をクリックしてください。

 

利用中のブロックが一覧で表示されるため、ブロックを選択しやすくなります。

 

ブロックを選択すると各ブロックごとのメニューが上に表示されますが、一番右側には必ず『︙（オプションメニュー）』がありますので、こちらをクリックしてください。

 

オプションメニューの一番下にある『ブロックを削除』をクリックすると、選択中のブロックが削除できます。

ブロックの移動

ブロックエディターでは、ブロックを上下に移動できます。

ブロックの追加位置を間違えたときは非常に重宝しますので、この操作方法はぜひ覚えておきましょう。

投稿方法

ブロックエディターでブログ記事を投稿するためには、最低限この９つの手順は覚えておいてください。

上記以外の操作方法は必要に応じて使ってみてください。

ブロックエディターのおすすめブロック【厳選５つ】

ブロックエディターにはたくさんのブロックがあるため、どのブロックを使ったらいいのか迷いますよね？

そこでここからは、僕がよく使っているおすすめのブロックを５つ紹介していきます。

この５つのブロックさえ押さえておけば、他のブロックは基本不要なので、ぜひ参考にしてみてください。

クラシックブロック

記事作成はクラシックブロックをメインに使っていくのがオススメです。

クラシックブロックには非常にたくさんの機能がありますので、用途ごとにブロックを使い分ける回数を減らせます。

極端な話、クラシックブロックだけで記事を書くことができます。

 

僕がクラシックブロックでよく使う機能は、この７つです。

クラシックブロックは旧エディターのビジュアルモードとほぼ一緒なので、「旧エディターしか使っていないからブロックエディターは苦手」という方にもオススメです。

 

なお、クラシックブロックの機能は利用するテーマで異なります。

もし使いたい機能がない場合は、プラグインの『Advanced Editor Tools』を導入しましょう。

Advanced Editor Toolsを使えば、クラシックブロックの機能メニューを編集できますので、よろしければ試してみてください。

リストブロック

箇条書きの際はリストブロックを使うと便利です。

 

クラシックブロックにもリスト機能はありますが、ちょっと癖があるため正直使いにくいです。

しかし、リストブロックなら入力するだけで簡単に箇条書き形式にできます。

テーブル(表)ブロック

表を作るときは、テーブルブロックを使うと簡単です。

 

最初に『カラム数（縦）』と『行数（横）』を設定して、

 

あとは入力していくだけで、表が完成します。

カラムブロック

カラムブロックを使うと、ブロックを横並びで表示させることができます。

 

最初に分割したいパターンを選択します。

 

横並びでブロック追加用の『＋』ボタンが出ますので、あとはそれぞれにコンテンツを入れるだけです。

 

例えば、左側にテーブルブロックで表を作り、右側にHTMLで地図を入れるとこのようになります。

お店の紹介記事でよく見る形式なので、よろしければお試しください。

なお、カラムブロックで横並びにした場合、スマホでは1ブロックずつ縦に表示されます。

スペーサーブロック

スペーサーブロックは、ブロックとブロックの間にスペースを入れるためのブロックです。

記事を書いていると、「もうちょっとスペース空けたいな」と思うことありますよね？

そんなときにスペーサーブロックを使うと、1px単位でスペースを空けることができます。

ただし、スペーサーブロックは頻繁に使いすぎると、あとで気が変わった時に一つずつ修正するのが面倒です。

記事作成の際は多少スペースが狭いのはあまり気にせず、「どうしても」という場合のみスペーサーブロックを使ってスペースを空けてみてください。

まとめ

今回は『WordPressのブロックエディター（Gutenberg）の使い方』を解説してきました。

ブロックエディターに慣れるためのコツは、この４つです。

今回の解説もこの流れでお伝えしてきました。

あとは使い続けていくだけで慣れていきますので、苦手意識があった方も、ぜひ試してみてくださいね。