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

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

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

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

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

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

僕もブロックエディターは苦手でしたが、徐々に慣れてきましたので、ぜひ参考にしてみてください。

 

動画でも解説しています。

スポンサーリンク

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

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

  1. ブロックエディターの画面の見方
  2. ブロックの追加
  3. ブロックの削除
  4. ブロックの移動
  5. 投稿方法

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

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

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

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

上部ツールバー

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

ブロックエディターの上部ツールバー

  1. 投稿記事一覧に戻る
  2. ブロックの追加
  3. メインエリアの『編集』と『選択』の切り替え
  4. 一つ前の操作に戻る・進む
  5. 記事の詳細(単語数・見出し数・段落数・ブロック数)
  6. 利用しているブロックのリスト表示
  7. 記事の下書き保存
  8. 記事のプレビュー確認
  9. 記事の公開
  10. サイドバーの表示・非表示切り替え
  11. オプション(表示・エディターの切り替えなど)

メインエリア

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

ブロックエディターのメインエリア

  1. タイトルの入力
  2. ブロックの追加

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

サイドバー

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

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

ブロックエディターのサイドバー『投稿』タブ

  1. ステータスと公開状態
  2. パーマリンク
  3. カテゴリー
  4. タグ
  5. アイキャッチ画像
  6. 抜粋
  7. ディスカッション

 

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

ブロックタブの例

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

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

下部設定メニュー

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

Cocoonのブロックエディターの下部設定メニュー

  1. SEO
  2. カスタムCSS
  3. カスタムJavaScript

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

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

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

ブロックの追加

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

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

上部ツールバーの『+』クリックでブロックの追加

↓↓↓

ブロックの追加

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

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

 

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

メインエリアの『+』クリックでブロックの追加

 

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

最近使ったブロックが6つ表示

 

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

ブロックの追加

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

ブロックの削除

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

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

上部メニューの『リスト表示』をクリック

 

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

ブロックのリスト表示

 

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

オプションメニューをクリック

 

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

『ブロックを削除』をクリック

ブロックの移動

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

ブロックの上下移動

  • 『⋮⋮』ドラッグで好きな位置に移動
  • 『∧』一つ上に移動
  • 『V』一つ下に移動

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

投稿方法

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

ブロックエディターでの記事の投稿方法

  1. タイトルの入力
  2. ブロックを追加して記事作成
  3. 設定をクリックしてサイドバーを表示
  4. パーマリンクの設定
  5. カテゴリーの選択
  6. アイキャッチ画像の設定
  7. 下書き保存してプレビューの確認
  8. 記事の公開(投稿)
  9. WordPressの管理画面に戻る

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

スポンサーリンク

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

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

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

  • クラシックブロック
  • テーブル(表)ブロック
  • リストブロック
  • カラムブロック
  • スペーサーブロック

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

クラシックブロック

クラシックブロック

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

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

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

 

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

クラシックブロックの使い方

  1. 見出し
  2. 太文字
  3. 引用
  4. リンクの挿入
  5. メディアの追加(画像の挿入)
  6. 文字色
  7. HTML挿入

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

 

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

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

Advanced Editor Tools

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

リストブロック

リストブロック

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

 

リストブロックの使い方

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

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

テーブル(表)ブロック

テーブルブロック

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

 

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

テーブルブロックのカラム数と行数の入力

 

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

テーブルブロックで表の完成

カラムブロック

カラムブロック

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

 

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

カラムブロックでパターンを選択

 

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

カラムブロックのブロック追加用の『+』ボタン

 

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

左側にテーブルブロックで表を作り、右側にHTMLで地図を入れた場合

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

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

スペーサーブロック

スペーサーブロック

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

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

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

スペーサーブロックの使い方

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

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

まとめ

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

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

  1. 画面の構成を理解する
  2. 最低限必要な投稿方法を覚える
  3. クラシックブロックをメインで使う
  4. クラシックブロックにはない機能だけ別のブロックを使う

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

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

WordPressの使い方
スポンサーリンク
ブログ管理人
さっとが

【高校卒業後】神奈川県に13年 ⇒ 秋田に出戻り9年目
【アフィリエイト歴】無料ブログ7年 ⇒ WordPress8年目
【活動歴】専業4年半(最高:¥42.3万、34万PV)⇒ 今は副業
【YouTube】登録者4000人突破!
『ブログ運営』と『WordPressの使い方』について発信中!

フォローはお気軽に!

関連記事(一部広告含む)

さっとがブログ‐WordPressブログ運営に役立つノウハウ集
タイトルとURLをコピーしました