【完全版】Gutenberg(ブロックエディター)の使い方完全解説｜使いにくいを卒業しよう！

「Gutenbergの使い方が、いまいち分からない…。」などとお悩みではないでしょうか。

WordPressがGutenbergにアップデートされてからユーザーの中では、使いにくいといった声が多く上がっています。

実際に初めて触る人は慣れるまで、使いにくい部分が多数あると思います。しかし、一度使い慣れてしまうと旧エディターよりもコンテンツの成作が簡単にできることでしょう。

この記事ではGutenbergの使い方に困っている人のために、分かりやすく基本的な使い方から、覚えておくと便利な応用的な使い方までを解説しています。

最後まで読んで頂くことで、きっとGutenbergの使い方をマスターできるはずです。

Gutenberg(ブロックエディター)とは？

WordPress5.0の新エディターとしてリリースされたのがGutenberg(ブロックエディター)ですが、確かに旧エディターと比較するとかなり仕様が変わっています。

画面構成や操作に関しては大幅に変更されているので、旧エディターに慣れていた人はとても使いにくいとストレスを感じている人が多いです。実際にリリースされた直後は、その使いにくさから旧エディターに戻す人もかなりいました。

しかしながら、一度慣れてしまうと直感的に記事を作成することができて、大変便利なのがGutenbergの大きな特徴です。

Gutenbergの特徴・3つのメリット

1. コンテンツの作成方法が豊富になった
2. 専門的な知識がなくても、コンテンツ作成が容易にできる
3. インターフェイスが改善されたことにより、以前より扱いやすい

Gutenberg(ブロックエディター)には大きく分けて3つのメリットがあり、それぞれ旧エディターと比較すると飛躍的に進化していることがお分かり頂けると思います。

旧エディターではHTMLやCSSとなどといった、プログラミング言語の基礎知識が必要でした。しかし、Gutenberg(ブロックエディター)に仕様が変わって、より初心者でも記事の作成が容易になりました。

また、編集画面のインターフェイスが大幅に変更されたことにより、直感的に記事の作成が行えるため、リッチなカスタマイズも容易に行えます。

旧エディターとの違い

旧エディターとの大きな違いはGutenbergに変更されたことで、編集エディターがブロック要素に変わったことです。Gutenbergではブロックごとに編集できるようになっており、従来の旧エディターとは仕様が大きく違います。

従来の旧エディターでは

• 見出し（h2、h3など）
• 写真
• 文章

がそれぞれ別れているということはありませんでしたが、Gutenbergになったことでそれぞれの要素がブロックごとに分けられています。

見出しやテキストなどのブロックはそれぞれ細かく編集が可能となっており、直感的に位置を動かすこともできます。慣れると大変便利ですが、慣れるまでが大変だと感じている人も少なくありません。

Gutenbergで旧エディターを使う方法

Gutenberg(ブロックエディター)が使いにくいという人は、旧エディターをGutenbergで使用することもできます。「Classic Editor プラグイン」をインストールすることで、元の旧エディターに簡単に戻せます。

ただし、今後のことを考えると少しでも、Gutenbergのブロックエディターに慣れておくことをおすすめします。なぜなら、今後「Classic Editor プラグイン」が使えなくなる可能性があるからです。

また、WordPressの運営側も旧エディターに戻すということはしない上に、新しいテーマなどもGutenbergに対応しているものが多く、旧エディターの需要が年々落ちてきているからに他なりません。

Gutenberg(ブロックエディター)での記事作成から公開まで流れ

Gutenberg(ブロックエディター)での記事作成から公開までの流れは、至ってシンプルです。慣れてしまえば旧エディターでの記事作成よりも、簡単に記事を作ることができるでしょう。

①タイトル設定

記事を作成する上で一番大事なタイトル設定ですが、Gutenbergでは「投稿」から「新規追加」を選ぶことで、新規記事を作成することができます。

画面が切り替わると「タイトルを追加」と表示されているので、こちらにお好きなタイトルを自由に入力できます。また、編集エディターの表示画面はお使いのテーマによって、若干異なる場合がありますのでご注意ください。

とはいえ、基本的な操作は同じですのでご安心ください。

②見出しの作成

見出しを追加する際には、まず「文章を入力、または / でブロックを選択」とある箇所の右側に「＋」のマークを選択します。選択すると画像のようなブロック要素の選択画面が表示されるので、「見出し」を選択してください。

編集画面にh2の見出しが表示されるので、テキストを自由に入力しましょう。また、h3やh4へ変換したい人は、表示されている見出しの上に選択バーが現れるのでそちらで変更可能です。

③テキストを入力

タイトルや見出しの設定が終わったら、早速文章を記載していきましょう。文章を記載して行く際には、見出しの下にカーソルを合わせることで新しいブロックを追加することができます。

テキストを入力するブロックは、「段落」というマークを選択すればOKです。その他、見出しの位置で改行（エンターキーを押す）するだけでも、本文の入力ができるようになります。

また、フォントの色やサイズなの調整は右側に表示されている、編集画面から簡単に変更ができます。その際に「ブロック」が選択されていることを確認してください。

「文章」の方は記事の情報設定が行えますが、ここでは活用しません。

④記事情報の設定

あらかた記事の作成が完了したら、今度は記事情報の設定をおこないます。記事情報の設定を行う際には、最初に右側にある編集画面から「文章」を選択します。

ブロック要素を編集する際には「ブロック」を選択していましたが、ここでは「文章」を選択することで記事の細かい情報を設定することができます。

パーマリンク

「文章」を選択した状態で下にスクロースすると「パーマリンク」の項目が表示されています。パーマリンクでは自由に記事のURLを入力できるようになっています。

カテゴリー

最初に「パーマリンク」の下に「カテゴリー」があるので、選択してください。カテゴリーを選択するとご自身が設定しているカテゴリーの種類が表示されるので、自由に設定しましょう。

また、「新規カテゴリーを追加」を選択することで、簡単に新しいカテゴリーを追加することも可能です。

タグ

「カテゴリー」の下に「タグ」の表示があるので選択しましょう。タグを選択すると「新規タグを追加」が表示されるので、自由にタグを追加していってください。

また、タグはカテゴリーとは違い、コンテンツ構造には属していません。タグは付箋紙のような役割を果たしてくれるので、設定しておくことでサイトの利便性の向上に繋がります。

アイキャッチ画像

「タグ」の下に「アイキャッチ画像」がありますので、選択してください。選択すると「アイキャッチ画像を設定」が表示されるので、お好きなアイキャッチ画像を設定しましょう。

⑤記事の公開

記事情報の設定まで全て完了したら最後は、プレビューの確認を行った上で記事を公開しましょう。

記事のプレビューを確認する際には、編集エディター画面の右上にある「プレビュー」を選択します。その後、「新しいタブでプレビュー」を選択すると記事の確認が行えます。

その後、記事のプレビューに問題がなければ「公開」を選択して、記事をネット上に公開しましょう。

Gutenberg(ブロックエディター)の基本的な使い方【基礎編】

Gutenberg(ブロックエディター)の基礎的な使い方に関して抑えておけば、ある程度はストレスなく記事の作成を行えるようになります。

まずはブロックエディターの画面構成やブロックの種類に関して、しっかりと理解することが大切です。その後、応用的な使い方を覚えて行けば、数日程度でGutenbergをマスターできます。

ブロックエディターの画面構成

ブロックエディターの画面構成は、大きく分けて3つの要素でできています。

1. 編集画面
2. 左上メニュー
3. 右側サイドバーメニュー

まずはそれぞれの役割をしっかりと把握し、覚えることが大切です。

①編集画面

編集エディター中央に位置する「編集画面」では、主にコンテンツの内容をブロックごとに編集していきます。コンテンツがどのように見えているかなども、確認しながら編集を行えるので大変便利です。

②左上メニュー

編集エディターの左上に位置するメニューでは、さまざまな確認・編集が可能です。

左側から順にご紹介すると

• 投稿一覧を表示
• ブロックの追加
• ツール
• 元に戻す・やり直す
• コンテンツ構造の確認（文字数や見出しの数など）
• ブロックナビゲーション（ブロック構造の要素確認）

となっています。大変便利ですのでコンテンツを作成する際に一度、触ってみてください。

③右側サイドバーメニュー

右側にあるサイドバーメニューでは、主に各ブロックの細かい編集や記事情報の設定などが行えます。編集したいブロック要素を選択することで、メニューが切り替わるようになっています。

また、記事情報を設定したい時は、「ブロック」ではなく「文章」を選択することで、簡単にアイキャッチ画像やパーマリンク等の設定が可能です。

ブロックの種類

ブロックエディターで使えるブロック要素は、大きく分けて5つの種類があります。

1. テキスト
2. メディア
3. デザイン
4. ウィジェット
5. 埋め込み

それぞれのブロック要素を把握しておくことで、よりリッチなコンテンツの作成が可能となります。また、お使いのテーマによっては、プラスしてテーマ独自のカスタマイズブロックが使える場合もあるでしょう。

その他、インストールされているプラグインによっても、使えるブロック要素を増やすことができます。ご自身が使いやすいブロック要素を揃えることで、より編集しやすくなるでしょう。

使用頻度が高いブロックの機能・使い方

ブロックエディターの中でも特に使用頻度が高いブロック要素だけに絞って、使い方を詳しくご紹介します。基本的にご紹介しているブロック要素を抑えておけば、ブロックエディターでの編集で苦労することはないでしょう。

引用

文章の引用時に活用するブロック要素「引用」は、デフォルト画面では出てきません。ですので、一度検索窓に「引用」と打ち込み、検索する必要があります。

「引用」を選択すると編集画面に引用のブロックが挿入されるので、テキストと出典元を記載しましょう。

画像の挿入

画像を挿入する際にはブロック要素の中にある「画像」を選択し、保存してあるメディアライブラリ等から画像を自由に挿入することができます。

また、オプションの記載などもできるようになっているので、他のメディアの写真などを活用する際には「オプションを入力…」の欄に出典元を記載すると良いでしょう。

リスト（箇条書き）

箇条書きなどを挿入したい場合は、ブロック要素の中から「リスト」を選択します。

選択したらリストが挿入されるので、テキストを入力してください。また、ナンバーリングしたい場合は、メニューバーに表示されている数字の部分を選択すると簡単に切り替わります。

テーブル（表）

表を挿入した場合は、ブロック要素から「テーブル」を選択します。

テーブルを選択するとカラム数等の入力画面が最初に出てくるので、カラム数と行数を設定しましょう。入力が完了したら「表を作成」を選択します。

表が作成されたら、中にテキストや数字を入力することができます。

リンクの挿入

リンクを挿入する際にテキストに発リンクをつけたい場合は、テキストをドラッグした状態でメニューバーにある「リンク挿入」のアイコンを選択します。

逆に、リンクをURLのまま表示させたい場合は、テキストをドラッグする必要はありません。

URLの入力窓が表示されるので、貼り付けたいリンクのURLを入力してください。入力が完了したらエンターボタンを押すことで、リンクが挿入されます。

SNS等の埋め込み

SNS等の投稿を埋め込みたい場合には、ブロック要素の中にある検索窓でご自身が埋め込みたいSNSの名前で検索すれば、専用のブロック要素がヒットします。

例として「Twitter」のブロック要素を選択し、投稿を埋め込んでみましょう。やり方はとても簡単で、埋め込みたい投稿のURLを指定されている欄に入力するだけです。

入力が完了したら「埋め込み」を選択しましょう。

https://twitter.com/naruhodo_FUK/status/1310436892215705600

実際に埋め込むとこのようになります。また、他のSNS等に関する埋め込み方法については、別の記事で詳しく解説していますので、是非とも参考にしてみてください。

福岡のSEO対策ならウェブココル株...

【2023年最新】InstagramやTwitterをホームページに埋め込む方法 | ウェブココル株式会社 「InstagramやTwitterの投稿をホームページに埋め込みたいけど、どうすればいいのか分からない...」と悩んでいませんか。 ホームページにInstagramやTwitterの投稿等を埋め...

ボタン

ボタンを挿入したい場合には、ブロック要素の検索窓にボタンと入力し、検索をかけることで「ボタン」のブロック要素が出てきます。

ボタンを選択したら実際に挿入されるので、テキストやリンクなどを自由にカスタマイズしましょう。

ブロックの基本操作

ブロックエディターではそれぞれのブロックを自由に

• 変換
• 複製
• 移動
• 再利用
• 削除

したりすることができます。

ブロックの扱いを覚えることで、よりコンテンツ作成が楽になるので、是非とも覚えておきましょう。

ブロックの変換

一度設定したテキストなどをリストブロック等の他のブロック要素に変換する際には、最初にメニューバーにある一番左のマーク「ブロックタイプまたはスタイルの変更」を選択します。

選択するとメニュー一覧が新たに出てくるので、変換したいブロック要素を選択してください。また、複数のテキストをリストブロックに変換する際には、変換したいテキストをドラックした状態で「リスト」を選択すると変換されます。

ブロックの複製

挿入したブロック要素を複製したい場合には、複製したいブロック要素を選択し、メニューバーの一番右にある「詳細設定（・・・）」を選択します。

新しいメニュー一覧が表示されたら「複製」があるので、選択してください。すると同じブロック要素が下に表示されます。また、複製はどのようなブロック要素でも行えますので、覚えておくと大変便利です。

ブロックの移動

ブロック要素を他の場所に移動させたい場合は、最初に移動させたいブロックを選びます。次に、メニューバーにある「ブロックをドラッグ」をドラッグした状態で、自由に移動させることができます。

ブロックの再利用

使用頻度の高いブロック要素やお気に入りのブロック要素などは、再利用ブロックとして登録することができます。

再利用ブロックを登録する際には登録したいブロックを選択し、メニューバーの一番左にある「詳細設定（・・・）」から「再利用ブロックに追加」を選択します。

再利用ブロックに登録したブロック要素は、いつでも気軽に他のブロック要素と同じように使うことができるようになります。

ブロックの削除

ブロックを削除したい時は、最初に削除したいブロック要素を選択し、メニューバーにある「詳細設定（・・・）」の中から「ブロックを削除」を選択するだけです。

その他、「deleteキー」でも削除が可能なので、やりやすい方法で行ってください。

Gutenberg(ブロックエディター)の便利なカスタマイズ方法【応用編】

Gutenberg(ブロックエディター)にはさまざまなブロック要素があるので、ご自身で記事の作成がやりやすいようにカスタマイズする必要性があります。

最初はデフォルト設定でも構いませんが、操作に慣れてくると自身でよく使うブロック要素や、逆に使わないブロック要素などが把握できるようになってきます。

ある程度Gutenbergに慣れたらご自身で扱いやすいように、ブロック要素をカスタマイズしていきましょう。

カスタマイズに使える便利な8つのブロック要素

1. カバー（背景画像付きテキストの配置）
2. ギャラリー（複数画像の挿入）
3. カスタムHTML
4. 2カラムでのコンテンツ配置
5. メディアと文章
6. クラシックブロック
7. ショートコード
8. ソースコード

基本的なブロック要素にプラスしてご紹介している8つのブロック要素も扱えるようになると、よりリッチなコンテンツの作成が可能になります。

操作自体はとっても簡単なので、一度覚えておくとコンテンツの作成に幅がでてくることでしょう。気になるブロック要素から是非とも試してみてください。

カバー（背景画像付きテキストの配置）

ブロック要素「カバー」では、最初にお好きな写真を選んだ後に、写真の中にテキストを入力して表示することができます。主に見出しの下にテキスト付きの写真を挿入したい時などに、使えるブロック要素です。

「カバー」を選択した後は、メディアライブラリから写真を選んでください。その際に、お好きな色を選んでおくとその色が写真の上にぼかしとして挿入されます。

写真が挿入された後は、自由にテキストを入力しましょう。テキストは右側サイドバーメニューで編集が可能です。

ギャラリー（複数画像の挿入）

「ギャラリー」では複数枚の画像を、綺麗に並べて表示させることができます。

ブロック要素で「ギャラリー」を選択したら、メディアライブラリを開きましょう。

次に、挿入する写真を複数枚選びましょう。挿入したい写真を選択するとそれぞれチェックマークが付きます。写真の選定が終わったら「ギャラリーを作成」を選択してください。

ここでは選択した写真にテキストを、それぞれ入力することができます。入力が完了したら「ギャラリーを挿入」を選択しましょう。

選択した写真が編集画面に挿入されたら、写真の並びを確認してください。写真の並びは自由に変更することができます。また、追加して写真を挿入することも可能です。

写真を入れ替えたい場合は入れ替えたい写真を選択し、再度メディアライブラリから入れ替える写真を選んでください。

カスタムHTML

「カスタムHTML」では、自由にHTMLやCSSコードを挿入することができます。

一度入力したコードは、プレビューで確認してデザインが崩れていないかチェックしましょう。

2カラムでのコンテンツ配置

「カラム」はさまざまなレイアウトを作ることが可能なブロック要素です。

「カラム」を選択すると最初にパターンの選択画面が表示されます。ご自身がイメージしているレイアウトに合わせて選択してください。

レイアウトの選択が完了すると今度は挿入画面が表示されるので、自由に写真やテキスト、表などをカスタマイズしていきましょう。今回は2カラムの「50/50」を選択してみました。

写真とテキストを2カラムで並べて表示することもできます。レイアウトは自由にカスタマイズ可能なので、ご自身のイメージに適したレイアウトに作り替えていきましょう。

メディアと文章

「メディアと文章」ではその名の通り、写真と文章を組み合わせて表示させることができるブロック要素です。

最初からメディアエリアとテキストを書く場所が別れており、自由に挿入することができます。カラムとは違い、表の挿入などはできませんが、コンテンツの編集範囲が広くなっているのが大きな特徴です。

さまざまな組み合わせが試せるようになっているので、おしゃれなレイアウトを作成してみてください。

クラシックブロック

「クラシック」は、旧エディターでの編集ができるブロック要素です。

「クラシック」を選択すると、編集画面に旧エディターで使っていたメニューバーが表示されます。編集方法は旧エディターと全く同じなので、ブロックエディターでの編集が苦手な方におすすめです。

ショートコード

「ショートコード」はご自身があらかじめ設定したおいた短い関数を入力することで、簡単に挿入できることができるブロック要素です。

「ショートコード」を選択したら入力枠が表示されるので、自由に書き込みましょう。

ソースコード

「コード」はプログラミングコードを、そのままテキスト表示させることができるブロック要素です。

本来であればコードを入力するとデザインに自動変換されますが、「コード」のブロック要素で入力すると変換されずにそのままソースコードとして表示されます。

ブロックをHTMLとして編集するやり方

それぞれのブロック要素は、HTMLとして編集することが可能です。

HTMLとして編集したいブロック要素を最初に選び、その後「詳細設定（・・・）」を選択します。すると「HTMLとして編集」という項目があるので選択してください。

「HTMLとして編集」を選択すると自動的に、HTML編集画面に切り替わります。

HTMLでの編集が完了したら再度「詳細設定（・・・）」を選択し、「ビジュアル編集」を選んでデザインを確認しましょう。

コンテンツ構造の確認方法（文字数や見出しの数など）

記事の文字数や見出しの数などを確認する際に、わざわざ外部のサービスなどを活用しなくても、簡単に確認する方法があります。

編集画面の左上メニューにある「コンテンツ構造（！）」を選択すると、文章の概要が表示されます。

• 単語：記事全体の文字の数
• 見出し：見出しの数
• 段落：段落の数
• ブロック：使用しているブロックの数

ワンクリックで簡単に確認することができますので、是非とも試してみてください。また、覚えておくと大変便利です。

Gutenberg(ブロックエディター)に関するよくあるQ&A

Gutenberg(ブロックエディター)に関する多くの質問の中からよくある質問だけに絞って、それぞれ分かりやすく回答をまとめてみました。

また、取り上げていない内容で質問がある人は、お気軽に弊社「ウェブココル（株）」へご連絡くださいませ。弊社にはWebのエキスパートが多数在籍しておりますので、分かりやすくご指導いたします。

Q1.Gutenberg対応テーマでおすすめを教えてください

今ではどのテーマでもGutenbergに対応したテーマになってきており、それほど不便だと感じることはないでしょう。

ただ、Gutenberg対応テーマでおすすめといえるものを強いて挙げるとするならば、

• SWELL
• Emanon
• WP Avenue『STREETIST』
• LIQUID PRESS
• STORK19

の5つのテーマがおすすめだといえます。それぞれGutenbergに対応しており、テーマごとに専用ブロック要素なども用意されていて大変使いやすいです。

Q2.Gutenbergは使いにくいのですがどうすれば良いですか？

旧エディターに慣れており、Gutenbergが使いにくいと感じている人は、無理にGutenbergを活用する必要はありません。

「Classic Editor プラグイン」をインストールすることで、旧エディター画面に戻すことができます。ただし、「Classic Editor プラグイン」がいつまで使えるかは不明なので、徐々にGutenbergに慣れる努力をしましょう。

Q3.Gutenbergに適したおすすめのプラグインはありますか？

Gutenbergに適応したプラグインは数多くリリースされていますが、お使いのテーマによって合う合わないがありますので、必ず確認した上で「有効化」するようにしましょう。

Gutenbergに適したおすすめプラグインを、強いて挙げるとするならば、

• All In One SEO Pack：SEO設定を可能にする
• TinyMCE Advanced：エディタ機能を拡張する
• TinyMCE テンプレート：エディタでHTMLのテンプレートを利用する
• Crayon Syntax Highlighter：プログラムコードを色付けや強調表示をして見やすくしてくれる
• AddQuicktag：ショートコードをクイックタグとしてエディタに追加する

の5つくらいでしょうか。

旧エディターで使っていたプラグインが、そのままGutenbergでも使えるかというとそうでもありません。ですので、必ず仕様がどのように変更されているのか、プラグインごとに確認することを忘れないでください。

Q4.旧エディターの記事をブロック変換するにはどうすれば良いですか？

旧エディターで作った記事はGutenbergに切り替えることで、全て「クラシック」のブロック要素に収納された状態になります。

テキストや見出し、写真など全て一つのブロックにまとまっている状態ですが、記事の表示には問題はありません。とはいえ、今後のことを考えるとブロック要素に変換しておいた方が無難でしょう。

「クラシック」にまとまっているコンテンツを全てブロック要素に変換する際には、「詳細設定（・・・）」の中から「ブロックへ変換」を選択するだけです。

Q5.Gutenbergに切り替えると旧エディターで作成した記事はどうなりますか？

お使いのテーマによってはGutenbergに対応していない可能性もあるので、必ず切り替える前に対応しているか確認が必要です。対応していないテーマのままGutenbergに切り替えてしまうと、記事のデザインが崩れる可能性があります。

万が一、Gutenbergに切り替えた際にデザインが崩れてしまったなどの問題が起きた場合には、お気軽に弊社「ウェブココル（株）」へお問い合わせくださいませ。弊社のWebエキスパートが迅速に対応いたします。

まとめ

【Gutenbergの特徴・メリット】
・コンテンツの作成方法が豊富になった
・専門的な知識がなくても、コンテンツ作成が容易にできる
・インターフェイスが改善されたことにより、以前より扱いやすい

旧エディターを使い慣れている人からしたら、Gutenbergは大変使いにくいと感じるはずです。しかしながら、使い慣れるととても便利なのがGutenbergなので、是非ともこの記事を参考にして頂き使い方をマスターしてください。

分からないことがありましたら再度、関連性の高い見出しまで戻って読み直しましょう。この記事があなたにとっての参考書になれば幸いです。

万が一、どうしても難しくて分からないことがありましら、お気軽に弊社「ウェブココル（株）」へお問い合わせくださいません。その際は親切丁寧にご対応いたします。