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

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

こんにちは!さとしん(@__satoshin)です。

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

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

目次

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

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

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

さとしん

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

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

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

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

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

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

2021年にWordPressを使い始める人はブロックエディタ一択!

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

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

さとしん

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

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

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

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

上部ツールバー

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

エディタ画面の上部ツールバー
サイドバー

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

エディタ画面のサイドバー
コンテンツエリア

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

エディタ画面のコンテンツエリア

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

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

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

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

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

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

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

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

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

以下の手順で進めます。

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

記事タイトルを入力

ここは簡単です。

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

記事情報の設定

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

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

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

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

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

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

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

STEP
タグの「」をクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

STEP
見出しブロックの挿入

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

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

STEP
段落ブロックの挿入

」ボタンをクリックして「段落」をクリック

文章を入力しましょう。

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

STEP
画像ブロックの挿入

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

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

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

先ほどとは違う段落ブロックの入力方法をやってみましょう。

画像ブロック入力後に、Enterキーを押すと次のブロックが自動で生成されます。

「文章を入力、または / でブロックを選択」の部分が段落ブロックになっているので、そのまま入力ができます。

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

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

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

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

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

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

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

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

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

さとしん

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

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

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

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

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

さとしん

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

ここでは、僕のオススメのWordPressテーマを1つご紹介します。

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

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

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

SWELLを使用するとブロックエディタは以下の様に進化します。

  • 「SWELLブロック」というSWELL専用のブロックが使える
  • WordPress標準ブロックの機能拡張
  • ブロックツールバーの機能拡張

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

さとしん

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

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

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

さとしん

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

ブロックの変換

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

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

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

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

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

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

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

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

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

「/ブロック名」を入力

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

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

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

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

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

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

さとしん

ブロックの英語名は色々入力して調べてみてくださいね…!

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

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

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

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

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

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

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

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

【SWELL】親ブロックの選択

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

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

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

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

##

h2

###

h3

####

h4

その他にもリストブロックのマークダウンもあります。-(ハイフン)を入力することで、リストブロックが簡単に呼び出せます。

  • – 項目1
  • – 項目2

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

さとしん

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

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

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

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

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

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

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

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

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

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

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

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる