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

Gutenbergの使い方

こんにちは!ZIGです。

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

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

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

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

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

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

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

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

 

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

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

 

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

Gutenbergエディター画面

 

 

ちなみに記事タイトルを入力すると、タイトル上部に記事のURL(パーマリンク)が表示されます。

Gutenberg投稿画面

なので必要な場合は「編集」をクリックしてURLを変更しておきましょう。

ここは旧エディターに似た使い勝手になっているのであまり迷わないはずです。

URLの編集について
URLの編集メニューが表示されない場合は一度「下書きを保存」をクリックしてください。そうすればURLの編集が可能になります。

 

テキストの入力・編集

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

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

Gutenbergでのテキスト入力

 

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

Gutenberg投稿画面

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

 

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

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

ツールバーの表示設定

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

ツールバーの表示設定

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

 

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

ブロックのテキスト設定

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

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

Gutenbergでの文字装飾手順まとめ

【Gutenberg】段落ブロックの文字装飾手順まとめ!部分的なサイズ変更・装飾も簡単に出来ますよ♪

2019年6月6日

 

見出しブロックの追加

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

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

 

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

Gutenberg

 

 

「よく使うブロック」もしくは「一般ブロック」に「見出し」ブロックがあるので、こちらをクリック。

ブロックの追加

 

 

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

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

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

 

 

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

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

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

 

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

段落ブロック

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

 

 

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

テキストを入力

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

 

 

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

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

サンプル記事

 

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

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

 

 

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

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

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

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

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

 

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

公開前チェック画面

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

  • 公開状態の設定(公開・非公開・パスワード保護)
  • 公開(予約投稿設定)
  • タグの追加
もし設定し忘れていた項目があればここで設定しておくと良いでしょう。

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

 

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

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

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

 

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

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

 



Gutenberg各ブロックの機能・役割まとめ

ここからは各ブロックの機能についてまとめます。

各ブロックのサンプル画像はワードプレスの公式テーマ「Twenty Sixteen」を使用した状態のものになります。テーマによって表示は異なると思いますので、参考程度にご覧下さい。

一般ブロック

段落

段落ブロック

テキストを入力するためのブロック。おそらくは一番よく使うブロックですね。

段落ブロック
Gutenbergでの文字装飾手順まとめ

【Gutenberg】段落ブロックの文字装飾手順まとめ!部分的なサイズ変更・装飾も簡単に出来ますよ♪

2019年6月6日

 

見出し

見出しブロック

Hタグを設定するためのブロック。

段落ブロックと並んで使用頻度が高くなるであろうブロックですね。

見出しブロック

 

ギャラリー

ギャラリーブロック

ギャラリーを挿入するためのブロック。

複数の画像を掲載し、各画像にキャプションを入れる事ができます。カラムの設定も可能。

ギャラリーブロック
ギャラリーブロックの使い方

【Gutenberg】ギャラリーブロックの使い方&設定のコツまとめ

2019年6月9日

 

リスト

リストブロック

リストタグを挿入するためのブロック。

リストブロック

 

カバー

カバー

背景に画像を挿入し、テキストを重ねることが出来ます。

背景画像はオーバーレイで色を変更したり、透過率の設定も可能。

カバー画像ブロック
カバーブロックの使い方

【Gutenberg】カバーブロックの使い方&設定方法まとめ

2019年6月10日

 

画像

画像ブロック

画像を挿入するためのブロック。

通常の画像挿入に使用。

【Gutenberg】画像ブロックの使い方&効率よく画像をアップするコツまとめ

2019年6月8日

 

引用

引用ブロック

引用タグを挿入できます。引用元の記入欄も用意されてるので便利。

引用ブロック

 

音声

音声ブロック

MP3などの音声ファイルをアップロードできます。

自動再生やループ設定が出来るほか、キャプションの入力も可能。

音声ブロック

 

ファイル

ファイルブロック

PDFやZIPファイルなどをアップし、閲覧やダウンロードさせることが出来ます。

ファルブロック

 

動画

動画ブロック

mp4やmovなど、動画を挿入する事が出来ます。

動画の下部にキャプションを入れることも可能。

動画ブロック

 

 

フォーマット

プルクオート

プルクオート

抜粋分を掲載するのに使用。引用タグとほぼ同様の役割。

リードコラム

 

整形済み

 

整形済テキスト

<pre></pre>タグを挿入できます。

 

詩ブロック

役割がよく分からないブロック(笑

タグとしては<pre></pre>タグが挿入されるのですが、いつ出番があるのか不明。

 

ソースコード

ソースブロック

HTMLやCSSを表示させるためのブロック。

ソースブロック

 

クラシック

クラシックブロック

旧エディターを使用することが出来るブロック。

挿入すると、そのブロックだけ旧エディターを使ってコンテンツの編集が可能(エディター上は以下のように表示されます)。

クラシックブロック

 

カスタムHTML

カスタムHTMLブロック

HTMLを直接入力する際に使用するブロック。

入力したHTMLをエディター上でプレビュー可能です。

カスタムHTMLブロック

 

テーブル

テーブルブロック

テーブルタグを挿入する事が出来るブロック。

行数・列数の設定や追加が簡単にできるようになってます。

テーブルブロック

 

 

レイアウト要素

カラム

カラム

カラムを挿入するブロック。

2~6カラムを自由に設定できます。

Gutenbergのカラムブロックの使い方

【Gutenberg】カラムブロックの使い方&作業効率UPのコツまとめ

2019年6月12日

 

メディアと文章

メディアと文章

画像とテキストを並べて表示したい場合に使用。右寄せ・左寄せで画像を挿入したいときはこのブロックを使うと便利です。

メディアと文章

 

続きを読む

続きを読む

moreタグを挿入するブロック。

 

改ページ

改ページ

長文を区切って複数のページに分ける際に使用。

 

区切り

区切りブロック

水平線を入れる事が出来るブロック。複数のデザインが用意されています。

区切りブロック

 

スペーサー

スペーサー

スペースを挿入する際に使用。

ピクセル単位でスペースの幅を設定できます。

空白ブロック

 

ボタン

ボタンブロック

CSSで簡易的なボタンを作成出来ます。

ボタン背景色はテキスト色を編集出来ますが、ボタンデザインは少なめ。

ボタンブロック

 

ウィジェット

ショートコード

ショートコード

ショートコードを挿入する際に使用。

 

アーカイブ

アーカイブ

コンテンツ内に月別アーカイブを挿入できるブロック。

あんまり使い道なさそう(汗

アーカイブ

 

カレンダー

カレンダー

カレンダーを追加できるブロック。

カレンダー

 

カテゴリー

カテゴリーブロック

コンテンツ内にカテゴリー一覧を挿入できるブロック。

 

最新のコメント

コメント

コンテンツ内に最新のコメントを挿入できるブロック。

 

最新の記事

最新の記事ブロック

最新の記事一覧を挿入できるブロック。

 

検索

検索

サイト内検索を挿入できるブロック。

サイト内検索

 

RSS

RSS

RSSフィードを表示するブロック。

 

タグクラウド

タグクラウド

タグクラウドを挿入できるブロック。

 

埋め込み

埋め込み

Twitterやインスタグラム・Youtubeを始め、様々なサービスの埋め込みブロックがあらかじめ用意されてます。

 

再利用可能

再利用ブロックは単語登録機能のようなもの。

よく使う作成済のブロックを登録しておけば簡単に呼び出し、再利用することが出来ます。

 

以下のように再利用したいブロックのメニューから「再利用ブロックに追加」をクリック。

再利用可能ブロック

 

 

登録の際には名称も設定できます。

ブロックを再利用登録する

分かりやすい名前にしておくと再利用しやすいですね。

 

登録したブロックは「再利用可能」内に表示されますので、ワンクリックでコンテンツに挿入できます。

再利用ブロック

 

よく使う定型文、ボタン、テーブルなどを登録しておくと便利ですね。



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

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

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

Classic Editor

 

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

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

ちなみに私自身旧エディターの方が慣れていて使いやすいので、メインで使うワードプレスにはClassic Editorをインストールしています。その上で「TinyMCE Advanced」プラグインも有効化してますが、特になんの影響もなく使えています。

 

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

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

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

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

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



まとめ

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

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

とりあえず私はクラシックエディターをしばらくメインで使う事になりそうです(笑

 

 

 
Gutenbergの使い方