【2020年最新】ワードプレスのブロックエディター「Gutenberg」の基本的な使い方と注意点まとめ(ver5.5.3対応)

ワードプレス

こんにちは!ZIGです。

今回はワードプレスの新エディター「Gutenberg(グーテンベルク)」の基本的な使い方をまとめてみました。

ワードプレスのバージョン5.0から正式導入されたGutenbergですが、実は旧エディターとはかなり使い勝手が異なります。私も初めて触った時「なんじゃこりゃあああああああ!!」と混乱させられました(笑

そんな経験も踏まえて基本的な操作方法をまとめたので、使い方がよく分からない・・・という方は参考にしてください。

「Gutenberg」と旧エディターとの違いは?

旧エディターと新エディター「Gutenberg」の大きな違いは「ブロック」の存在。

詳細はあとでお見せするのでざっくりと解説しますが、Gutenbergでは記事をパーツ毎に分けて作成するような感じになります。公式でも「LEGOブロックを組み立てるように」なんて例え話をしてますが、まさしくそんな感じ。

ただ、ここが旧エディターと全く違うので最初はかなり混乱するところです。慣れれば感覚的で使いやすい・・・かも?という印象ですね。

無料ブログのエディターともかなり使い勝手が違うので、ちょっと好みも分かれそうではありますが(笑

 

ただ、ワードプレスの従来のエディターはかなり機能がショボかったですよね。

デフォルト状態だと満足に文字装飾も出来ないので、おそらくほとんどの方がプラグインを追加して使用していると思います。私も「Advanced Editor Tools」プラグインを必ず使用してましたし。

Gutenbergはそんなプラグインに依存してた機能も実装しながら、感覚的に使いやすいエディターを目指してるっぽいです。

 

Gutenbergを使用する際の注意点

Gutenbergを使用するという事はワードプレスのバージョンが5.0以上になります。

この場合、開発が終了して長期間経過したテーマや何年も更新が行われていないプラグインを有効化しているとエディターが正常に表示されない・動作しない事があるので注意して下さい。

ワードプレス5.0以上では必要PHPバージョンも5.6以上となっているので、PHPバージョンが低い場合ワードプレスそのものが正常に動作しません。この点も併せて注意。

古いテーマは新しいテーマに変更する、更新されていないプラグインは削除するといった準備が必要になることもあります。

なので長年使用しているワードプレスでGutenbergへ移行する場合はひとまずテスト用のワードプレスを作成し、そこで使用感やテーマ・プラグインの対応を確かめることをおすすめします。

 

Gutenbergの基本的な使い方

エディターの見た目は使用しているテーマによってもある程度変わります。ここではワードプレスのデフォルトテーマを使用した画面を掲載してますので参考にしてください。

それでままず、Gutenbergの基本的な使い方を解説しておきます。

WordPress5.0以降で投稿の新規追加をクリックすると、以下のような画面が表示されます。

Gutenberg

あまりにも旧エディターと見た目が違いすぎる・・・!

旧エディターに慣れている方はこの時点で思考停止状態になると思います(笑

 

とりあえず、Gutenbergの編集画面はざっくりと以下の3つのエリアに分類できます。

Gutenbergの使い方

まずは簡単に各エリアの役割を解説しておきますね。

 

ブロックの追加エリア

Gutenbergの特徴とも言える「ブロック」の追加はここから行います。

具体的には左上にある「+」アイコンですね。ここからブロックの追加が可能です。

ブロックエディター画面

 

ブロックには様々な種類があります。

各種ブロック

これらの様々なブロックをコンテンツ作成エリアに追加していき、コンテンツを作成するわけですね。

ブロックの機能については後述するのでそちらを参考にして下さい。

 

コンテンツ作成エリア

そして中央のエリアがコンテンツ作成エリア。ここでコンテンツを作成します。

Gutenberg投稿画面

▲とりあえず記事タイトルとテキストを入力してみました▲

 

必要に応じて様々なブロックを追加していき、そこにコンテンツを入れていく形ですね。

 

ちなみにテキスト入力後、キーボードのエンターキーをクリックすると段落ブロックがひとつ追加されます。追加したブロックの左側にも「+」アイコンが表示されるので、ここからブロックの種類を設定することもできます。

ブロックの追加

実際コンテンツを作成している際は上記の手段を使った方がブロックの追加がスムーズですね。

 

投稿の公開・保存、各種設定エリア

右側のエリアでは投稿のプレビューや下書き保存、公開などの他に各種設定が可能です。

例えば右上の歯車マークをクリックすると・・・

Gutenbergの使い方

 

投稿のステータスやカテゴリ・タグ設定、アイキャッチ画像の設定などが表示されます。

Gutenbergの使い方

このあたりは旧エディターでも見慣れた設定項目ですね。

 

また、ブロックが選択された状態ではここで文字サイズの編集や文字装飾が行えるようになっています。

グーテンベルグ

 

また、歯車の右のマークをクリックすると・・・

Gutenbergのエディター設定

 

ビジュアルエディターとコードエディターの切り替えや、いくつかの設定項目が表示されます。

Gutenbergのエディター設定

こちらは必要に応じて使う程度って感じですね。

 

Gutenbergでの記事投稿の流れ

基本的な使い方が分かったら、次は実際記事投稿をする場合はどんな流れになるのか?って話ですね。

とりあえず今回は例として、よくある以下のような「いくつかの見出しとテキストブロックが存在するコンテンツ」をGutenbergで作成する手順を解説します。

作成記事サンプル

 

記事タイトルの入力

まずは記事タイトルの入力ですね。

Gutenbergは「新規投稿」をクリックすると「記事タイトル」と「段落ブロック」がひとつ用意された状態になってるので、そのままタイトルを入力していきます。

Gutenbergエディター画面

 

ちなみにパーマリンクの設定はサイドバーから可能なので、必要なら変更しておくと良いですね。

パーマリンクの設定

 

テキストの入力・編集

次はテキストの入力ですね。

記事タイトルの下にある段落ブロック(テキスト入力エリア)にテキストを入力していきましょう。

Gutenbergでのテキスト入力

 

なお、段落ボックス内にテキストを入力していくとエディター上部に文字装飾のツールバーが表示されます。

Gutenberg投稿画面

文字を中央揃えにする、太字にするといった簡単な装飾はここで可能です。

 

ツールバーの表示設定について

ちなみにツールバーはブロック上部に表示させることも可能です。

変更方法は簡単で、トップツールバーの「ブロック・文章ツールを同じ場所にまとめる」のチェックをクリックして外すだけ。

ツールバーの表示設定

 

そうするとツールバーがブロックと一緒に表示されるようになります。

ツールバーの表示設定

こちらの方がテキストとツールバーが接近していて装飾がしやすいかもしれません。ここは好みで変更すると良いですね。

 

また、段落ブロックが選択されている場合はサイドバーにも文字装飾のメニューが表示されます。

ブロックのテキスト設定

テキストのサイズ・テキストの色・背景色・追加CSS設定などの項目がありますので、必要に応じて装飾は行いましょう。今回はスルー。

ちなみに文字装飾の手順については以下の記事で別途まとめてます。

 

見出しブロックの追加

次は見出しの追加ですね。

ここから新たにボックスを追加していきます。

 

まずは画面左上にある「+」アイコンをクリック。

ブロックの追加

 

「見出し」ブロックを選択します。

ブロックの追加

 

すると「見出しブロック」が投稿エリアに追加されるので、見出しのタイトルを入力します。

見出しブロックの追加

ちなみに見出しブロックを追加すると、ツールバーにHタグの設定項目が表示されるので、併せて設定しておきましょう。

最近はほとんどのテーマで記事タイトルがH1になってるので、大見出しならH2、小見出しはH3といった形で設定ですね。

 

段落ブロックにテキスト入力

見出しを作成したら次はテキストの入力ですね。

テキストを入力する場合は「段落ブロック」を追加する必要がありますが・・・ここで改めて段落ブロックを追加する必要はありません♪

 

見出しブロックに限りませんが、ブロックを追加するとその下には段落ブロックもひとつ追加された状態になっているのです。

段落ブロック

なので見出しを入力したら、見出しの下のエリアをクリックしてみましょう。それでテキスト入力が出来るはずです。

 

さきほどと同様にテキストを追加します。

テキストを入力

見出しとテキストが入力できました。

 

・・・あとは繰り返しですね!

再度「見出しブロック」および「段落ブロック」を追加し、テキストを入力すればサンプル記事の完成です。

サンプル記事

・・・このように、Gutenbergでは必要なブロックをひとつひとつ追加していき、コンテンツを作成していきます。

なので、ブロックの使い方に慣れれば記事作成もスムーズになるでしょう。

 

記事のプレビューおよび公開

記事作成が完了したら、画面右上からプレビューおよび投稿の公開を行います。

記事のプレビューおよび公開

ここはまあ、迷うことはないと思います。

プレビューで表示を確認し、問題なければ公開しちゃいましょう。

 

ちなみに「公開する」をクリックすると「公開してもよいですか?」という確認が表示されます。

公開前チェック画面

ここでは以下の点が確認・設定できます。

  • 公開状態の設定(公開・非公開・パスワード保護)
  • 公開(予約投稿設定)
  • タグの追加

もし設定し忘れていた項目があればここで設定しておくと良いでしょう。

なおここで設定できる項目はすべて事前に設定できる項目なので、ちゃんと設定していれば改めてこの画面で何か行う必要はありません。もう一度「公開」をクリックすれば記事が公開されます。

 

ちなみに公開前の確認が煩わしい!という場合は公開確認画面の右下にある「公開前チェックを常に表示する」のチェックを外しておきましょう。

公開前チェックの表示設定

そうすれば次回から公開前チェックは表示されません。

 

あとは「公開」を再度クリックして記事作成完了ですね。

以上の流れでGutenbergにおける記事作成および公開は完了です。

 

ワードプレス5.0以降も旧エディターを使いたい場合は「Classic Editor」プラグインを使おう

Gutenbergがデフォルトのエディターになった後も、やっぱり旧エディターを使いたい・・・

という方もおそらくかなりいるはず。そんな場合は「Classic Editor」プラグインを使えばワードプレス5.0以降でも旧エディターをそのまま使用できます(2021年末までサポートされることがアナウンスされています)。

Classic Editorプラグイン

なので、Gutenbergは当分使うつもりはない!という方はClassic Editorをインストール&有効化しておきましょう。

そうすればワードプレス5.0以上にバージョンアップしてもエディターは従来のものが使えます。

 

ワードプレスのバージョンアップを控えるのは非推奨

Gutenbergを使いたくない、旧来のエディターを使い続けたいからワードプレスを5.0未満のバージョンのまま使い続ける・・・なんて方もいるかもしれませんが、これはハッキリ言って非推奨です。

ワードプレスのバージョンアップは機能の改善だけでなく、脆弱性の修正のためにも行われています。バージョンアップをしないという事は発見された脆弱性がそのまま存在しているという事。セキュリティ面の問題を抱えたままブログを運営することになるわけです。

そうした脆弱性を狙われ、不正アクセスやサイト改ざんなどの被害を受ける・・・

なんて可能性はゼロではない(というか意外と高い)ので、バージョンアップはその都度行いましょう。Gutenbergを使いたくない!という場合でもバージョンは最新に保ち、Classic Editorプラグインを使用することをおすすめします。

 

まとめ

というわけでワードプレスの新エディター、Gutenbergの基本的な使い方をまとめてみました。

Gutenbergは初めて使うと旧エディターとの違いに驚くと思いますが、ブロックの使い方が分かれば直感的に操作でき、コンテンツ作成ができるようになるのでは?という感じです。何にしてもワードプレスを使うならいずれは使用する事になるので、少しずつでも使い慣れておくと良いですね。