WordPressブロックエディターの使い方（Gutenbergチュートリアル）

WordPressのブロックエディターは、コンテンツを書いたりサイトを編集したりするための初期設定のエディターです。2019年にGutenbergというニックネームで導入され、古いクラシックエディターに取って代わった。

ブロックエディターは、簡単で直感的な方法でコンテンツを作成し、WordPressサイトを編集することができます。

このチュートリアルでは、WordPressブロックエディターを使いこなし、視覚的に美しいブログ投稿やページを作成する方法をご紹介します。

ブロックエディター（Gutenberg）とクラシックエディターの違いは？

ブロックエディターに入る前に、Gutenbergブロックエディターと旧クラシックエディターの違いを比較し、理解しよう。

WordPressのクラシックエディターはこんな感じだった：

基本的な設定オプションを備えたテキストエディターボックスがあった。機能と外観はかなり限られていた。

WordPressのブロックエディターはこんな感じです：

ご覧の通り、WordPressでコンテンツを作成するための2つのエディターは全く異なるものです。

旧クラシックエディターは、マイクロソフトのワードに似た書式設定ボタンを備えたテキストエディターだった。

新しいエディターは「ブロック」と呼ばれる異なるアプローチを採用している（だからブロックエディターという名前になった）。

ブロックは、レイアウトを作成するために編集画面に追加できるコンテンツ要素です。投稿やページに追加する各項目がブロックです。

例えば、段落、画像、動画、ギャラリー、音声、リストなどのブロックを追加できます。一般的なコンテンツ要素にはすべてブロックがあり、WordPressプラグインによってさらに追加することができます。

WordPressブロックエディターはクラシックエディターより優れているのか？

WordPressのブロックエディターは、投稿やページにさまざまなタイプのコンテンツを追加するシンプルな方法を提供します。

例えば、以前はクラシックエディターを使ってコンテンツにテーブルを追加したい場合、別途テーブルプラグインが必要だった。

ブロックエディターを使えば、テーブルブロックを追加し、カラムと行を選択するだけで、コンテンツを追加し始めることができる。

コンテンツ要素を上下に移動したり、個々のブロックとして編集したり、メディアリッチなコンテンツを簡単に作成できます。

最も重要なのは、WordPressのブロックエディターが使いやすく、習得しやすいことだ。

これは、最初のブログを始めたばかりのWordPress初心者や、DIYでビジネスサイトを構築しているすべてのWordPress初心者に絶大なメリットをもたらします。

そこで、WordPressのブロックエディターを使って、プロのように優れたコンテンツを作成する方法を検証してみよう。

Gutenbergチュートリアルで扱う内容は以下の通りです：

準備はいいかい？さあ、飛び込もう。

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、このまま読み進めてほしい。

Gutenbergを使う – WordPressブロックエディター

ブロックエディターは直感的でフレキシブルに設計されています。古いWordPressエディターとは見た目が異なりますが、クラシックエディターでできることはすべてできます。

まず、クラシック・エディターで行っていた基本的なことを、ブロック・エディターでどのように行うかを説明しよう。

ブロックエディターを使って新規ブログ投稿やページを作成する

通常と同じように、新しいブログ投稿やページを作成します。WordPress管理画面の投稿日 ” 新規投稿を追加メニューをクリックするだけです。ページを作成する場合は、代わりにPages ” Add Newメニューをクリックします。

これでブロックエディターが起動する。

ブロックエディターでブロックを追加する方法

投稿やページの最初のブロックはタイトルです。

マウスを使ってタイトルの下に移動するか、キーボードのTabキーを押してカーソルを下に移動し、書き始めることができます。

初期設定では、次のブロックはParagraphブロックです。これによりユーザーはすぐに書き始めることができます。

しかし、何か違うものを追加したい場合は、エディターの左上、既存のブロックの下、またはブロックの右側にある新規ブロック追加ボタン[+]をクリックしてください。

ボタンをクリックすると、ブロックの追加メニューが表示され、上に検索バー、下によく使われるブロックが表示されます。

タブをクリックしてブロックカテゴリーをブラウズしたり、キーワードを入力して特定のブロックを素早く検索することができる。

マウスを使ってボタンをクリックしたくない場合は、キーボードショートカットを使うこともできる。

まず「/」と入力してブロックを検索し、キーボードのEnterキーを押してブロックを挿入する。

新規エディターでブロックを操作する

各ブロックの上部にはツールバーが表示されます。ツールバーのボタンは編集するブロックによって変わります。

例えば、下のスクリーンショットでは、Paragraphブロックで作業しており、テキスト整列、太字、斜体、リンク挿入などの基本的な書式設定ボタンが表示され、3つのドットメニューの下にその他のオプションが用意されています。

ツールバーだけでなく、各ブロックは編集画面の右カラムに表示される独自のブロック設定を持つことができる。

これらの設定は、編集するブロックによって異なります。例えば、「段落」ブロックでは、テキスト、背景、リンクの色、タイポグラフィを編集できます。

ブロックを上下に動かしたり、並べ替えたりできる。

その場合は、クリックしてドラッグまたはドロップするか、ブロックツールバーの上下ボタンをクリックしてください。

関連 WordPressでブロックを削除する方法をご覧ください。

グループとカラムでブロックを整理する

ブロックエディターには、コンテンツレイアウトを管理・整理する便利なツールも用意されている。

キーボードのShiftキーを押しながらブロックをクリックすると、複数のブロックを選択できます。

その後、ツールバーのブロックタイプボタンをクリックして、選択したブロックをグループまたはカラムに変換する。

その後、グループブロック全体にスタイルを適用し、配置や間隔を変更することができます。

ブロックエディターでは、空のグループまたはカラムブロックを追加することもできます。

その後、他のブロックで埋めることができる。

各カラムには必要に応じてブロックタイプを追加できる。

これにより、さまざまな使用ケースに対応した美しいレイアウトを作成することができる。

Gutenbergでのブロックの保存と再利用

ブロックを使う最大の利点のひとつは、ブロックを保存して再利用できることだ。これは、記事やページに特定のコンテンツスニペットを頻繁に追加する必要があるサイトオーナーやブロガーにとって特に便利です。

各ブロックのツールバーの右隅にあるメニューボタンをクリックするだけです。メニューから「パターンの作成」オプションを選択します。

注：グループやカラム全体を再利用ブロックとして使用することもできます。これにより、セクション全体を保存し、必要なときにいつでも使用することができます。

このポップアップが表示され、このパターンの名前を入力する必要があります。再利用するときにわかりやすいように、何でもかまいません。

次に、オプションでカテゴリーを設定することができる。これにより、パターンを整理して並べ替えることができる。

次に、「作成」ボタンをクリックしてパターンを保存します。WordPressはあなたのパターンとその中のすべてのブロックを保存します。

パターンを再利用するには、追加したい投稿やページを編集するだけです。

次に、[+]ブロック追加ボタンをクリックするか、/キーボードショートカットを使用します。あなたが付けた名前を入力することでパターンを見つけることができます。

パターンにより、サイトオーナーはアクションコール、ソーシャルメディアボタン、バナーなど、よく使われる要素を簡単にレイアウトに追加することができます。

WordPressテーマやプラグインに独自のパターンが付属している場合もありますし、WordPressBlock Patternsライブラリで他の人が作成したパターンを見つけることもできます。

もっと助けが必要な場合は、WordPressブロックパターンの見つけ方と使い方に関する初心者向けガイドを区切りで用意しています。

Gutenbergブロックエディターでの公開とオプションの管理

WordPressの投稿には、たくさんのメタデータが含まれています。これには、公開した日付、カテゴリーやタグ、アイキャッチ画像などの情報が含まれます。

これらのオプションはすべてエディター画面の右カラムにきちんと配置されている。

Gutenbergでのプラグインオプション設定

WordPressプラグインは、ブロックエディターのAPIを利用して、編集画面内で設定を統合することができます。

人気のあるプラグインには、独自のブロックが付属しているものもあります。

例えば、WordPressの最高のお問い合わせフォームプラグインであるWPFormsでは、ブロックを使ってコンテンツにフォームを追加することができます。

他のWordPressプラグインもブロックエディター画面に設定を追加することができます。

例えば、All In One SEO for WordPressでは、ブロックエディターの下部でSEO設定を編集することができます：

同様に、WooCommerceを使ってオンラインストアを運営している場合、WooCommerceにも独自のブロックがあることにお気づきでしょう。

これらのブロックを使えば、WordPressの投稿やページに商品を追加することができます。

ブロックエディターで一般的なブロックを追加する

ブロックエディターは、旧クラシックエディターが行っていたすべてのことができる。

しかし、以前よりも素早くエレガントに物事を進めることができる。さらに、コード不要のオプションの数々でコンテンツをスタイリングできるなど、より多くのことができる。

一般的に使用できるブロックをいくつか紹介しよう。

1.WordPressブロックエディターで画像を追加する

WordPressのブロックエディターには、すぐに使えるImageブロックがあります。ブロックを追加し、画像ファイルをアップロードするか、メディアライブラリから選択するだけです。

また、コンピューターから画像をドラッグ＆ドロップすると、エディターが自動的にImageブロックを作成します。

画像を追加すると、ブロック設定が表示され、altテキスト、画像解像度サイズ、画像へのリンクの追加など、画像のメタデータを追加することができます。

詳しくは、WordPressで画像を追加する方法のチュートリアルをご覧ください。

2.ブロックエディターでのリンクの追加

ブロックエディターにはテキストを追加できるブロックがいくつかあります。最もよく使われるのはパラグラフブロックで、ツールバーにリンク挿入ボタンがあります。

その他、よく使われるテキストブロックには、すべてツールバーにリンクボタンがあります。

キーボードショートカット（MacではCommand + K、WindowsコンピューターではCTRL + K）を使ってリンクを挿入することもできます。

3.Gutenbergで画像ギャラリーを追加する

ギャラリーブロックは画像ブロックと同じように機能します。ギャラリーブロックを追加し、画像ファイルをアップロードまたは選択します。

詳しくは、WordPressで画像ギャラリーを作成するガイドをご覧ください。

4.Gutenbergを使ってWordPress投稿にショートコードを追加する

すべてのショートコードはクラシックエディターと同じように動作します。単にパラグラフブロックに追加することもできますし、ショートコードブロックを使うこともできます。

ブロックエディターで他のコンテンツブロックを調べる

Gutenbergエディターは、新しいブロックを導入することで、WordPressの長年の使い勝手の問題を解決することを約束した。

以下は、ユーザーが大いに役立つと思われるお気に入りである。

1.WordPressでテキストの横に画像を追加する

旧エディターでは、多くのユーザーがテキストの横に画像を配置することができませんでした。メディア＆テキストブロックを使えば、それが可能になります。

このシンプルなブロックには、2つのブロックが横に並んで配置されており、画像とその横にテキストを簡単に追加することができます。

2.WordPressの投稿とページにボタンを追加する

旧エディターでもう一つ面倒だったのは、ブログ投稿やページにボタンを追加することだった。ボタン用のショートコードを作成するプラグインを使うか、HTMLモードに切り替えてコードを書かなければならなかった。

幸い、GutenbergにはButtonブロックがあり、投稿やページに素早くボタンを追加することができます。

ボタンにリンクを追加したり、色を変更したりすることができます。詳しくは、WordPressで簡単にボタンを追加する方法の投稿をご覧ください。

3.ブログ投稿やランディングページに美しいカバー画像を追加する

また、投稿やページにカバー画像や背景色を追加できるカバーブロックもおすすめです。

カバー画像は、ページの新しいセクションやストーリーの冒頭によく使用される幅の広い画像です。見た目も美しく、魅力的なコンテンツレイアウトを作ることができます。

表紙ブロックを追加し、使用したい画像をアップロードするだけです。カバーのオーバーレイカラーを選択したり、固定背景画像にしてユーザーがページをスクロールしたときにパララックス効果を出すこともできます。

詳しくは、WordPressのカバー画像とアイキャッチ画像の違いについての投稿をご覧ください。

4.投稿内にテーブルを作成する

クラシックエディターには、WordPressの投稿にテーブルを追加するボタンはありませんでした。プラグインを使うか、カスタマイザーでCSSやHTMLを記述してテーブルを作成する必要があった。

ブロックエディターには初期設定のテーブルブロックがあり、投稿やページにテーブルを追加するのがとても簡単になりました。ブロックを追加し、挿入したいカラムと行の数を選択するだけです。

これでテーブルの行にデータを追加し始めることができます。必要であれば、いつでも行やカラムを追加することができ、2つの基本スタイルオプションが利用可能です。

5.マルチカラムコンテンツの作成

マルチカラムコンテンツの作成も、クラシックエディターではまったく扱えない問題だった。

幸いなことに、ブロックエディターではカラムブロックを追加することができる。

このカラムブロックは非常に柔軟である。最大6カラムまで並べることができるし、各カラムの中に他のブロックを使うこともできる。

Gutenbergをプロ並みに使いこなすためのボーナスヒント

ブロックエディターを見ていると、実際のコンテンツを作成するよりも、ブロックの追加や調整に多くの時間を費やすのではないかと思うかもしれない。

ブロックエディターは驚くほど高速で、ごく基本的な使い方を数分するだけでも、何も考えずに瞬時にブロックを追加できる。

この方法を使えば、ワークフローがどれほど速くなるか、すぐにわかるだろう。

ここでは、WordPressブロックエディターでより速く作業するための、パワーユーザー向けのボーナスヒントをご紹介します。

1.ブロックツールバーを上部に移動する

上のスクリーンショットで、すべてのブロックの上部にツールバーが表示されていることにお気づきかもしれません。このツールバーはエディターの一番上に移動させることができます。

トップツールバー」オプションにアクセスするには、画面右上の三点ボタンをクリックする。

2.キーボードショートカットを使う

Gutenbergには、あなたのワークフローをより素早く簡単にする便利なショートカットがいくつか用意されています。まずすぐに使い始めるべきは、/.

エディターが一致するブロックを表示するので、それを即座に追加することができる。

その他のショートカットについては、画面右上の三点メニューをクリックし、「キーボードショートカット」を選択してください。

すると、使用できるすべてのキーボードショートカットのリストがポップアップ表示されます。このリストには、WindowsユーザーとMacユーザーで異なるショートカットが表示されます。

3.メディアをドラッグ＆ドロップしてメディアブロックを自動作成

Gutenbergでは、画面上の任意の場所にファイルをドラッグ＆ドロップすると、自動的にブロックが作成されます。

例えば、個別画像や動画ファイルをドロップすると、ブロックを作成してくれます。また、複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます。

4.YouTube、Twitter、Vimeo、その他のエンベッドの追加

ブロックエディターは、WordPressコンテンツへのサードパーティコンテンツの埋め込みを簡単にします。人気のあるサードパーティ・サービスのブロックがすべて用意されています。

しかし、埋め込みURLをコピー＆ペーストすれば、自動的にブロックが作成されます。

例えば、YouTube動画のURLを追加すると、自動的にYouTube埋め込みブロックが作成され、動画が表示されます。

初期設定の埋め込みオプションはFacebookとInstagramの埋め込みには使えませんが、回避策があります。WordPressでFacebookやInstagramの投稿を埋め込むための投稿をご覧ください。

WordPressのGutenbergブロックエディターにブロックを追加する

WordPressのブロックエディターでは、開発者が独自のブロックを作成することができます。いくつかの優れたWordPressプラグインは、新しいエディター用のブロックバンドルを提供しています。

そのいくつかを紹介しよう：

1.Spectra WordPress Gutenberg ブロック

Spectra WordPress Gutenberg Blocksは、コンテンツにデザイン要素を追加するのに役立つ、多くの高度なブロックを備えたブロックライブラリです。

人気のWordPressテーマAstraの開発者たちによって作られたSpectraは、コードを書くことなく美しいデザインを作成するのに役立ちます。

詳しくはスペクトラのレビューをご覧ください。

2.パブリッシュプレスブロック

PublishPress Blocksは、Gutenbergブロックエディターを拡張するための追加ブロックが付属しているもう一つの強力なブロックライブラリです。

美しいレイアウトオプション、スライダー、ボタン、アイコン、イメージギャラリー、マップ、タブ、テスティモニアル、アコーディオンなどが含まれています。

3.スタッキング可能 – Gutenbergブロック

Stackable – Gutenberg Blocksは、サイトで使える美しいデザインのGutenbergブロックのコレクションです。コンテナ、投稿、おすすめグリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションなどのブロックが含まれています。

Gutenbergについてよくある質問 – WordPressのブロックエディター

GutenbergがWordPressの初期設定エディターになってから、その使い方について多くの質問をいただくようになりました。ここでは、ブロックエディターに関するよくある質問にお答えします。

1.ブロックエディターで過去の投稿やページはどうなりますか？まだ編集できますか？

ブロックエディターは古い投稿やページには影響しません。ブロックエディターは自動的にクラシックエディターを含むブロックで開きます。

古いエディター内で編集することもできるし、古い投稿をブロックに変換してブロックエディターを使うこともできる。

2.古いエディターを使い続けることはできますか？

はい、古いエディターを使い続けることができます。Classic Editorプラグインをインストールして有効化するだけです。

有効化した場合、ブロックエディターは無効化され、クラシックエディターを使い続けることができます。

クラシックエディターは2024年までサポートされる予定です。ブロックエディターに慣れるために、今すぐ使い始めてください。

3.ブロックエディターが使用しているプラグインやテーマと合わない場合はどうすればよいですか？

プロジェクトGutenbergの開発期間が長かったため、プラグインやテーマの作成者は、コードの互換性をテストするのに十分な時間があった。

ただし、プラグインやテーマによっては、ブロックエディターとうまく動作しない可能性もあります。その場合は、Classic Editorプラグインをインストールするか、Gutenbergサポートを追加するよう開発者にリクエストするか、代替のプラグインやテーマを探すとよいだろう。

4.Gutenbergのヒントやトリックについてさらに詳しく知りたいのですが？

WPBeginnerはWordPressのブロックエディターについて学ぶのに最適な場所です。私たちはインターネット上で最大のWordPressリソースサイトです。

ブロックエディターを使いこなすために、新しい投稿を公開し、古いリソースを更新していきます。

また、ご質問等ございましたら、コメントするか、サイトのお問い合わせフォームからお気軽にお問い合わせください。

5.Gutenbergの問題に遭遇していますか？

WordPressのブロックエディターでトラブルが発生した場合、ユーザーが遭遇する ブロックエディターの一般的なトラブルとその解決方法をすべてまとめたトラブルシューティングガイドを作成しました。

ボーナス・リソース

以下は、ブロックエディターをより効率的に使うための追加リソースです：

• WordPressブロックエディターとページビルダー：その違いは？
• WordPressカスタムブロックの作り方（簡単な方法）
• WordPressのGutenbergブロックをインポート／エクスポートする方法（2ステップ）
• WordPress ウィジェット vs ブロック – その違いは？解説
• 完全初心者向けWordPressフルサイト編集ガイド
• WordPressのフルサイト編集に最適なブロックテーマ

このチュートリアルでWordPressブロックエディターの使い方を学んでいただけたでしょうか。また、サイトスピードを改善するためのWordPressパフォーマンスガイドの完全版や、中小企業に最適なメールマーケティングサービスの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.