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

Gutenbergの使い方

こんにちは!ZIGです。

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

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

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

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

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

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

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

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

 

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

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

私も「TinyMCE Advanced」プラグインを必ず使用してましたし。

 

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

 

Gutenbergを使用する際の注意点

そんなわけでいずれワードプレスのエディターはGutenbergに切り替わるわけですが、使用するに当たって気を付けておかなければならないことがあります。

それは現在使用しているテーマであったりプラグインがGutenbergに対応出来ていない可能性ですね。

投稿の補助として活用してるようなプラグインがGutenbergに変更したら使えなくなっちゃった・・・なんてことも起こるので、普段運営してるブログのエディターをいきなりGutenbergに変更するのはあんまりおすすめ出来ません。

従来のエディターで作成した記事をGutenbergで編集すると表示が崩れてしまうような可能性もあるので、メインで運営しているブログほどGutenbergへの移行は慎重に行う方が良いでしょう。

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

 

Gutenbergのインストール手順

ワードプレス5.0未満の環境でGutenbergを使用する場合、プラグインとして提供されているGutenbergをインストールして使用します。なのでインストール手順は他のプラグインと同様ですね。

 

まずはワードプレスの管理画面から「プラグイン」⇒「新規追加」をクリック。

Gutenbergのインストール

 

 

プラグイン新規追加画面の検索窓に「Gutenberg」と入力します。

Gutenbergのインストール

 

 

Gutenbergプラグインが表示されたら「今すぐインストール」をクリックですね。

Gutenbergのインストール

忘れず「有効化」も行いましょう。

有効化すると、エディターが旧エディターからGutenbergに切り替わります。

 

 

Gutenbergの基本的な使い方

Gutenbergを有効化して投稿の新規追加をクリックすると、旧エディターとは全く異なる画面が表示されます。

Gutenberg

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

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

 

 

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

Gutenbergの使い方

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

 

 

ブロックの追加エリア

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

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

ブロックの追加

 

 

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

ブロックの追加

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

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

 

 

コンテンツ作成エリア

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

▼とりあえず記事タイトルとテキストを入力してみました▼
Gutenbergの使い方

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

 

ちなみにブロックの左に表示される「+」ボタンからもブロックの追加が可能です。

ブロックの追加

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

 

 

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

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

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

Gutenbergの使い方

 

 

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

Gutenbergの使い方

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

 

 

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

Gutenbergの使い方

 

 

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

Gutenbergの使い方

 

 

ビジュアルエディターとコードエディターの切り替えや、ヘルプ的な項目が表示されます。

Gutenbergの使い方

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

 

 

Gutenbergでの記事投稿の流れ

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

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

Gutenberg

 

 

記事タイトルの入力

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

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

Gutenbergエディター画面

 

 

ちなみに記事タイトルを入力すると、タイトル上部に記事のURLが表示されます。

Gutenbergの使い方

なので必要な場合は「パーマリンクの変更」をクリックしてURLを変更する形ですね。

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

 

 

テキストの入力・編集

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

段落ボックス内にテキストを入力していくとボックス上部にいくつか文字装飾のボタンが表示されます。

Gutenbergの使い方

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

 

 

また、ボックス右側にボタンがあるのでこちらをクリックすると・・・

Gutenbergの使い方

 

 

「ブロック設定を表示」という項目があり、ここをクリックすることでより詳細な文字装飾のメニューが表示されます。

Gutenbergの使い方

必要に応じて装飾は行いましょう。今回はスルー。

 

 

見出しブロックの追加

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

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

 

まずは画面左上にある「+」マークをクリックします。

Gutenberg

 

 

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

ブロックの追加

 

 

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

見出しブロックの追加

テキストを入力するとHタグの設定項目が表示されるので、併せて設定します。

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

 

 

段落ブロックの追加

見出しを作成したら次は「段落ブロック」を追加します。

段落ブロック=テキスト入力エリアですね。

 

先ほどと同様、ブロックの追加ボタンをクリックして「段落ブロック」をクリックします。

段落ブロックの追加

 

 

・・・で、追加したら再度テキストを入力ですね。

テキストを入力

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

 

 

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

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

サンプル記事

 

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

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

 

 

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

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

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

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

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

これで記事作成完了ですね♪

 

 

公開後に記事一覧を見ると、記事タイトルの後ろに「Gutenberg」と記載されているのが確認出来ます。

Gutenbergの使い方

この表示でその記事が旧エディターで作成したものなのか?Gutenbergで作成したものなのかが判別できるわけですね。

Gutenbergで作成した記事を旧エディターで編集したり、旧エディターで作成した記事をGutenbergで編集したりすると表示が崩れてしまう場合があるので、Gutenbergで作成した記事はGutenbergで編集するようにした方が良いでしょう。

 

 

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

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

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

共通ブロック

段落

段落ブロック

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

段落ブロック

 

見出し

見出しブロック

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

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

見出しブロック

 

ギャラリー

ギャラリーブロック

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

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

ギャラリーブロック

 

リスト

リストブロック

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

リストブロック

 

カバー画像

カバー画像ブロック

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

背景画像は透過率の設定も可能。

カバー画像ブロック

 

画像

画像ブロック

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

通常の画像挿入に使用。

 

引用

引用ブロック

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

引用ブロック

 

音声

音声ブロック

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

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

音声ブロック

 

ファイル

ファイルブロック

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

ファルブロック

 

動画

動画ブロック

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

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

動画ブロック

 

 

書式設定

リードコラム

リードコラムブロック

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

リードコラム

 

整形済みテキスト

整形済テキスト

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

 

詩ブロック

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

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

 

コード

ソースブロック

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

ソースブロック

 

クラシック

クラシックブロック

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

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

クラシックブロック

 

カスタムHTML

カスタムHTMLブロック

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

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

カスタムHTMLブロック

 

テーブル

テーブルブロック

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

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

テーブルブロック

 

 

レイアウト要素

カラム(ベータ)

カラムブロック

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

ベータ版と記載があるためか2カラムしか設定できない。

 

続きを読む

続きを読む

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

 

ページ区切り

ページ区切り

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

 

区切り

区切りブロック

水平線を入れる事が出来るブロック。

区切りブロック

 

空白

空白ブロック

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

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

空白ブロック

 

ボタン

ボタンブロック

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

デザインは少なめ。

ボタンブロック

 

ウィジェット

ショートコード

ショートコード

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

 

アーカイブ

アーカイブ

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

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

アーカイブ

 

カテゴリー

カテゴリーブロック

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

 

コメント

コメント

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

 

最新の記事

最新の記事ブロック

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

 

 

埋め込み

埋め込み

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

 

再利用可能

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

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

 

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

再利用可能ブロック

 

 

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

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

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

 

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

再利用ブロック

 

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

 

 

Gutenbergの使用をやめたい場合はプラグインを停止すればOK

ワードプレス5.0未満であれば、Gutenbergはいつでも使用を停止することができます。

他のプラグインと同様、プラグインの停止をクリックすればいいだけですね。

Gutenbergプラグインの停止

 

ただ、Gutenbergで作成した記事を旧エディターで編集しなおすと表示が崩れてしまう可能性もあるので、基本的には変更しない方が無難です。

 

ワードプレス5.0以降も旧エディターを使いたい場合は「Classic Editor」を使用

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

という方もおそらくかなりいるはず。そんな場合は「Classic Editor」プラグインを使えばワードプレス5.0以降でも旧エディターをそのまま使用できます。

Classic Editorプラグイン

 

なので、Gutenbergは当分使うつもりはない!という方はワードプレス5.0がリリースされる前にClassic Editorをインストール&有効化しておきましょう。

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

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

 

まとめ

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

Gutenbergは初めて使うと旧エディターとの違いに驚くと思いますが、ブロックの使い方が分かれば直感的に操作でき、コンテンツ作成ができるようになるのでは?という感じです。

何にしてもワードプレスを使うならいずれは使用する事になるので、少しずつでも使い慣れておくと良いですね。

 

正式採用前のベータ版のため使い勝手が良くない部分も結構ありますが、より良いエディターとなることを期待しながら正式リリースを待ちたいと思います。