WordPressブロックエディター(Gutenberg)の使い方!時短テクニックも紹介!

【小技も紹介!】WordPressブロックエディタ(Gutenberg)の使い方!

この記事では、WordPressのブロックエディターの基本的な使い方を解説していきます。

操作方法の解説と合わせて、ブロックエディターの使い心地を向上させてくれるテーマやプラグインもご紹介します。

記事後半では、ブロックエディターを更に効率良く使うことができる小技も解説したいと思います。

これからWordPressでブログやサイト運営を始める方、そろそろクラシックエディターから移行を考えている方は、ぜひこの記事を参考にしてください。

目次

ブロックエディターとは?2018年12月に登場した新しいエディター!

ブロックエディター(Gutenberg)は2018年の12月に公開されたWordPress5.0で登場した新しいエディターです。

ブロックエディターの前のエディターはクラシックエディターと呼ばれていて、プラグインをインストールすることによって旧エディターを使用することができます。

さとしん

僕は、ブロックエディターの方が断然使いやすいと感じています。

しかし、操作性がクラシックエディターと大きく異なるため、ブロックエディターに移行せず、クラシックエディターを使い続けているユーザーも多くいます。

旧エディターは2021年末にサポートが終了予定!

WordPressの開発はブロックエディターを中心に進められています。

そして、クラシックエディターのサポートは2021年末で終了すると言われています

サポート期限が延長される可能性もある様ですが、実際のところどうなるかは今の所わかりません。

2021年3月時点で、サポートが以下の通り延長になっています。

少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

引用元:https://ja.wordpress.org/plugins/classic-editor/

延長にはなるものの、いつかはサポートが終了するということは考えておく必要があると思います。

2021年にWordPressを使い始める人はブロックエディターがおすすめ!

このような状況を考えると、2021年からWordPressを使い始める方は迷わずブロックエディターを使うべきと考えています。

ブロックエディターの機能面もどんどん向上していくはずですし、サポートが終了するかもしれない旧エディターをこのタイミングで使い始めるのは個人的にはおすすめできません。

さとしん

何より、ブロックエディターはとても楽しいですよ…!

ブロックエディターの投稿ページ画面構成

具体的なブロックエディターの使い方に入る前にブロックエディターの投稿画面を見ていきましょう。

ブロックエディターの投稿画面は、大きく以下の様に3つのエリアに分けられます。

ツールバー

記事の下書き保存やプレビュー、公開、各種設定を行うエリア

ブロックエディタの使い方-1
サイドバー

記事の情報設定や、各ブロックの個別設定を行うエリア

ブロックエディタの使い方-2
コンテンツエリア

タイトルや本文、レイアウトを作っていくエリア

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

各エリアでできることは、実際の使い方と合わせて説明していきます。

では、さっそくブロックエディターで記事を書いてみましょう。

ブロックエディターの記事の書き方!

さっそく、ブロックエディターで記事を投稿するまでの手順を説明していきます。

以下の2つに分けて見ていきましょう。

  • 記事タイトルと記事の情報
  • 記事本文
さとしん

本当に難しくないのでご安心を…!

記事タイトルと記事情報の設定

まずは、ページの基本的な情報を入力していきましょう。

以下の手順で進めます。

  1. 記事タイトルを入力
  2. サイドバーで記事の情報を設定

記事タイトルを入力

ここは簡単です。

画面の「タイトルを追加」となっている部分を選択して、お好きなタイトルを入力しましょう。

記事情報の設定

次は、記事のパーマリンクやカテゴリー、アイキャッチ画像などの設定をしていきます。

STEP
サイドバーの「投稿」タブをクリック
STEP
パーマリンクのをクリック

お好みのスラッグを入力しましょう。

英語と-(ハイフン)の組み合わせで、ページの内容がある程度分かるスラッグを設定するのがオススメです。

STEP
カテゴリーのをクリック

お好みのカテゴリーにチェックを入れてください。

新規でカテゴリーを作成する場合は「新規カテゴリーを追加」で作成しましょう。

STEP
タグの「」をクリック

タグを指定する場合は、ここで入力しておきます。

STEP
アイキャッチ画像のをクリック

「アイキャッチ画像を設定」をクリックしてお好みの画像を選択しましょう。

これで基本的な記事の情報が設定できました。

投稿タブには他にも以下の項目があります。

  • 抜粋
  • ディスカッション

項目が更に多いWordPressテーマもあります。必要に応じて入力しましょう。

記事本文の書き方!とっても簡単!

さて、いよいよ本文を書いていきます。

と言っても、特に難しいことはなく、段落ごとに改行する感覚でEnterキーを押していけばOKです。

この1つの段落や見出しがそれぞれ「ブロック」という風に表現されているだけです。

このブロックを組み合わせてページを作っていくのが、ブロックエディターというエディターです。

少し話を小難しくしてしまったかもしれないので、以下の画像を見てみてください。

ブロックエディターのイメージ

この画像では、以下の順にブロックを使っています。

見出しブロック→段落ブロック→画像ブロック→段落ブロック→段落ブロック

WordPressには多数のブロックが標準で搭載されているので、これらのブロックを組み合わせて1つのページを作っていきます。

では、細かい操作を見ていきましょう。

ブロックエディターの操作方法

実際に先ほどの画像の通りに記事を書いてみましょう。

STEP
見出しブロックの挿入

」ボタンをクリックして「見出し」をクリック

お好きな見出しを入力しましょう。

STEP
段落ブロックの挿入

Enterで段落を変えると、次の行が自動で段落ブロックになります。

文章を入力しましょう。

Shift+Enterを同時押しすることで、同じ段落の中での改行もできます。

STEP
画像ブロックの挿入

」ボタンをクリックして「画像」をクリック

適当な画像をアップロードして挿入してみましょう。

STEP
段落ブロックの挿入+リンク付き

まずは段落ブロックを挿入して文字を入力しましょう。

ブロックを選択して、下の画像の様にブロックツールバーから「」マークをクリック。

ここにURLを入力すると、リンクを貼ることができます。

STEP
段落ブロックの挿入+文字色、太さ変更

これまでの方法で段落ブロックに文字を入力しましょう。

入力後、ブロックツールバーの「B」マークをクリックすると太字になります。また、「」をクリックすると文字色も変更できます。

さとしん

基本的には、この流れで記事を書いていけばOKです…!

補足

STEP5で、段落ブロック全体の文字色と太さを変更しました。

ブロックエディターのデフォルト状態では、ブロックの中の一部の文字だけに装飾を適用することができません。

ブロック内の一部に装飾を適用するためには、対応するテーマやプラグインを導入する必要があります。

以下の記事で詳しく解説しました。

記事が完成したら投稿しましょう!

さて、記事が完成したら投稿しましょう。

これは簡単で、上部ツールバー右上の「公開」をクリックするだけでOKです。

今回は使用しませんでしたが、それぞれのブロックを選択した状態でサイドバーの「ブロック」タブをクリックすると、デザインなど色々な設定ができます。

さとしん

いろいろなブロックを使いながらチェックしてみてください…!

よく使うブロックの種類と使い方を紹介!

基本的な記事の書き方について説明したので、ここからは各ブロックについて紹介していきます。

記事を書いたり、トップページをカスタマイズする時に良く使うブロックを中心に紹介します。

さとしん

どんなブロックがあるか覚えておきましょう…!

段落ブロック

段落ブロックは通常の文章を入力するときに使います。

段落ブロック

初期状態ですでに段落ブロックが挿入されるので、改めて段落ブロックを呼び出す必要はありません。

また、文字に装飾をしたり、リンクを挿入したりすることができます。

詳しい使い方は以下の記事で解説しています。

>>【段落ブロック】ブロックエディターのキホン!段落ブロックの使い方と装飾まとめ

見出しブロック

見出しブロックを使うと、コンテンツの中に見出しを挿入することができます。

見出しブロック

見出しの階層も簡単にボタン操作で変えることもできます。

詳しい使い方は以下の記事で解説しています。

>>【ブロックエディター】ブログに必須の見出しブロックの使い方!各テーマの見出しのデザインも紹介

リストブロック

リストブロックでは、箇条書きのリストや番号付きのリストを挿入することができます。

リストブロック

適切に要点をまとめて箇条書きにしてあげることで、より見やすい記事にすることができます。

詳しい使い方は以下の記事で解説しています。

>>【ブロックエディター】リスト(箇条書き)ブロックの使い方とテーマ毎のデザインの違い!

画像ブロック

画像ブロックでは画像を挿入することができます。

画像ブロック

スタイルを選択するだけで、挿入した画像の形を変えることができます。

動画を挿入するときは動画ブロックを使用します。

詳しい使い方は以下の記事で解説しています。

>>【画像ブロックの使い方】ブロックエディターの画像挿入方法!テーマ独自のデザインも紹介

ボタンブロック

ボタンブロックでは、ボタンリンクを作成することができます。

ボタンブロック

サイドバーからボタンの形状を変更することができます。

また、リンク先を新しいタブで開く設定も簡単にできます。

詳しい使い方は以下の記事で解説しています。

>>【ブロックエディター】ボタンブロックの使い方とテーマ独自のボタンブロックも紹介!

テーブルブロック

テーブルブロックは表を挿入することができます。

テーブルブロック

製品、サービスのスペックや料金を比較するときなど、表を使うととても見やすくなります。

詳しい使い方は以下の記事で解説しています。

>>WordPressのブロックエディターで表を作ろう!表(テーブル)ブロックの使い方

カラムブロック

カラムブロックは、いろいろな要素を横並びに配置することができるブロックです。

カラムブロック

例えば、画像を横並びに表示したり、画像と文字を横並びに表示したりすることができます。

記事にも使えますが、トップページなどレイアウトを工夫したいときにも使えるブロックです。

詳しい使い方は以下の記事で解説しています。

>>【ブロックエディター】素敵なレイアウトを作る!カラムブロックの使い方!

カバーブロック

カバーブロックは、画像や動画を背景にして、その上に文字を重ねることができるブロックです。

カバーブロック

Canvaなどのソフトで画像を編集しなくても、簡単なコメントはカバーブロックで代用可能です。

また、カバーブロックの中には段落以外のブロックを組み合わせることができます。

トップページを凝ったデザインにしたい場合にも活躍するブロックです。

詳しい使い方は以下の記事で解説しています。

>>カバーブロックの使い方!トップページのカスタマイズで活躍するブロック!

ブロックエディターの記事執筆を効率化してくれる機能

ブロックエディターには、記事の執筆を効率化してくれる以下の機能があります。

  • 再利用ブロック
  • ブロックパターン

どちらも、頻繁に使うブロックや文章を登録して、簡単に呼び出せるようになる機能です。

それぞれ簡単に紹介します。

さとしん

どちらもとても便利な機能なので覚えておいてください…!

再利用ブロック

再利用ブロックは良く使うブロックを登録しておいて、他の記事でも簡単に呼び出すことができる機能です。

たとえば挨拶文やプロフィールなど、全ての記事で必ず書いている場合は、再利用ブロックを使うことをおすすめします。

再利用ブロックは、どこか1か所でも内容を編集すると、他の記事などで使っている同じ再利用ブロックにも変更が反映されます。

なので例えば、プロフィールの内容が変更になった場合も、1か所の再利用ブロックを修正するだけで、他の記事で使用している再利用ブロックにも反映させることができます。

再利用ブロックについては以下の記事を見てみてください。

>>再利用ブロックの使い方!ブロックエディターで定型文を使い回す方法!

ブロックパターン

ブロックパターンは、良く使うブロックの組み合わせやレイアウトなどを保存しておき、必要な時に呼び出すことができる機能です。

再利用ブロックとの違いは、ブロックパターンでは内容を自由に編集が可能という点です。

ブロックの組み合わせのみを保存しておき、そのブロックの中に配置する文章や画像などは、記事の内容に合わせて自由に変えることができます。

ブロックパターンについては以下の記事で紹介しています。ぜひ見てみてください。

>>ブロックパターンの使い方!ブロックエディターで組んだレイアウトを使い回そう!

ブロックエディター対応のテーマやプラグインの導入で更に使いやすくなる!

ブロックエディターの開発も進んでいて、標準のブロックだけでもそれなりのレイアウトの組み立てや記事の投稿ができるようになっています。

ですが、ブロックエディターに特化したテーマや、エディターの機能を拡張してくれるプラグインを使うことで更にブロックエディターが使いやすくなります。

単純に記事が見やすいデザインになったり、記事を書く時間が早くなったりします。

さとしん

ブロックエディターを使う場合は、ぜひとも導入をオススメします…!

ここでは、僕のオススメのWordPressテーマとプラグインを1つずつご紹介します。

ブロックエディター完全対応のWordPressテーマ『SWELL』

WordPressテーマ『SWELL』
SWELL』公式サイトへ

僕が1番おすすめしたいWordPressテーマは、当サイトでも使用している『SWELL』です。

SWELLは、とにかくブロックエディターでの記事の書きやすさを追求したWordPressテーマです。

さとしん

記事を書くのが本当に楽しくなります…!

例えば、SWELLではブロックエディターを使いやすくするために、以下のような機能が盛り込まれています。

  • SWELLだけのオリジナルブロックが使える
  • WordPress標準ブロックの機能が拡張される
  • ブロックツールバーの設定項目が拡張される

これについては、SWELL公式サイトの以下の記事を見てみてください。

さとしん

ブログを書く方には本当に本当におすすめです…!

オシャレなブロックエディター専用プラグイン『Useful Blocks』

プラグイン『Useful Blocks』
Useful Blocks』公式サイト

『Useful Blocks』はオシャレで実用的なブロックを追加してくれる、ブロックエディター(Gutenberg)専用のプラグインです。

以下のようなブロックが追加されます。

Useful Blocks

特に棒グラフや評価グラフといったグラフ系のブロックは、とても見やすくオシャレなのでおすすめです。

例えば以下のような棒グラフをHTMLやCSSを書くことなく、簡単に作成可能です。

Useful Blocksの棒グラフ

レビュー記事に適したブロックもありますので、ブロガー、アフィリエイターさんにはおすすめです。

【小技集】知っていると記事を書くのが早くなる!!

ここまで読んでくれた方のために、ブロックエディターを使うなら知っておきたい、記事を書くのが早くなる小技をご紹介します。

さとしん

すでに知っている人も多いかも…!笑

ブロックの変換

段落ブロックに文章を入力したけど、リストブロックに変更したい!という場面が出てきます。

ですが、その度にわざわざ新しいブロックを呼び出して、文章を入力し直すのは少し時間がかかります。

そんな時のために、以下の方法でブロックを変換することできます。

ブロックツールバーから「変換」をクリックして任意のブロックを選択

変換できないブロックもありますが、この機能を使うことで、ブロックを作り直すことがなく、好きなブロックを呼び出すことができます。

使いたいブロックを高速で呼び出す!

この記事では、「」ボタンを使ってブロックを呼び出す方法をお伝えしました。

でも、毎回ボタンをクリックしてブロックを選択するのは面倒ですよね。

それを解消する方法が以下です。

「/ブロック名」を入力

例えば、何も入力されていない状態で、「/見出し」と入力してみてください。

見出しブロックが挿入されたはずです。

この要領で、段落やリスト、画像ブロックなど全てのブロックを呼び出すことができます。

WordPress5.5から、英語でも検索できる様になりました。

例えば、「/list」と入力するとリストブロックが挿入されます。

/を入力した後に、半角→全角へ変更する手間も省けるのでかなりスピードアップします。

主要なブロックの英語名は「ブロックエディターの記事執筆を快適にするショートカットまとめ!」で紹介しています。

ブロックが上手く選択できないときに!

今後、ブロックエディターを使っていくと、複数のブロックを組み合わせる場面が出てくると思います。

例えば、カラムブロックでは、カラムの中に段落やリスト、画像ブロックなどを挿入できます。

このような場合、カラム全体を選択したり、カラムの中のブロックを選択したい場面がでてきますが、上手く自分の意図したブロックを選択できないことがあります。

そんなときに以下の方法を試してみましょう。

  1. 画面左下のブロック情報から選択したいブロック名をクリック
  2. ブロックツールバーから親ブロックを選択
さとしん

狙ったブロックを簡単に選択することができて、編集も捗ります…!

ちなみに、僕のおすすめテーマ『SWELL』の場合は、一部のブロックで以下の様に「親ブロックを選択」というボタンが表示されているので、より簡単にブロックの選択ができます。

【SWELL】親ブロックの選択

記号を入力してブロックを呼び出す【Markdown】

これもぜひ覚えておいてください。

マークダウンと呼ばれるショートカットキーの様なイメージの機能があります。

例えば、見出しを入力したい場合、以下の様に「#」と半角スペースを入力すると自動で見出しブロックになります。

##

h2

###

h3

####

h4

その他にもリストブロックのマークダウンもあります。「-」と半角スペースを入力することで、リストブロックが簡単に呼び出せます。

– 項目1

– 項目2

他にもたくさんあるのですが、僕が良く使うものを代表例として紹介しました。

さとしん

特に見出しは頻繁に使うので覚えておきましょう…!

ブロックエディターを使って楽しくサイト運営をしていきましょう!

今回はブロックエディターの基本的な使い方をご紹介しました。

ここでは紹介しきれない程、ブロックエディターにはたくさんの魅力や機能があります。

僕自身、まだまだ知らない機能も多いので、日々学んでいる所です。

ブロックエディターでは、記事を執筆する以外にも、サイトのレイアウトを組み立てることもできます。

WordPress本体のコアブロックも日々進化していますし、素晴らしい開発者の方々がブロックエディターの機能を強化するテーマやプラグインを日々開発されています。

ブロックエディターは今後ますます進化していくと思うのでとても楽しみです。

皆さんも、WordPressのブロックエディターを使って楽しくサイト運営をしていきましょう!

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

【小技も紹介!】WordPressブロックエディタ(Gutenberg)の使い方!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる