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

WordPressのブロックエディタは、現在私たちがコンテンツを書いたりサイトを編集したりするのに使っているデフォルトのツールです。2019年に発表され、愛称は「Gutenberg（グーテンベルク）」。この新しいエディタは、その前に登場した古いクラシックエディタに取って代わるものです。ブロックエディタは非常にシンプルで直感的に使え、コンテンツの作成やWordPressサイトの編集が可能です。

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

ブロックエディタに入る前に、Gutenbergブロックエディタと古いクラシックエディタの違いを比較し、理解しましょう：

ブロックエディタには、基本的な書式設定オプションを備えたテキストエディタボックスがあります。WordPressのブロックエディタを以下に示します：

ご覧のとおり、WordPressでコンテンツを作成するための2つのエディタはまったく異なるものです。旧来のクラシックエディタは、Microsoft Wordに似た書式設定ボタンを備えたテキストエディタです。新しいエディタは、「ブロック」と呼ばれる異なるアプローチを採用しています（これが「ブロックエディタ」という名前の由来です）。

ブロックは、レイアウトを作成するために編集画面に追加できるコンテンツ要素です。投稿やページに追加される各項目がブロックです。例えば、段落、画像、動画、ギャラリー、音声、リストなどにブロックを追加することができます。一般的なコンテンツ要素にはすべてブロックがあり、WordPressプラグインによってさらに追加することができます。

WordPressのブロックエディタは、クラシックエディタに比べてどのような利点がありますか？

WordPressのブロックエディタは、投稿やページにさまざまなタイプのコンテンツを追加する簡単な方法を提供します。例えば、以前はクラシックエディタを使ってコンテンツにテーブルを追加したい場合、別のテーブルプラグインが必要でした。ブロックエディタでは、テーブルブロックを追加し、列と行を選択するだけで、コンテンツの追加を開始できます。

コンテンツ要素を上下に移動したり、個々のブロックとして編集したり、リッチメディアコンテンツを簡単に作成することができます。何よりも、WordPressブロックエディタは使いやすく、習得しやすいのが特徴です。これは、最初のブログを始めたばかり、またはDIYでビジネスウェブサイトを構築しているすべてのWordPress初心者に大きな利点を提供します。

それでは、WordPressのブロックエディタを使って、プロのように素晴らしいコンテンツを作成する方法を見ていきましょう。

グーテンベルグを使う - WordPressブロックエディタ

ブロックエディタは直感的で柔軟な設計になっています。従来のWordPressエディタとは見た目が異なりますが、従来のエディタでできることはすべてできます。

ブロックエディタを使って新しいブログ記事やページを作成する方法

通常通り、新しいブログ記事やページを作成します。のWordPress管理者をクリックするだけです。投稿 " 新しい投稿を追加メニューページを作成したい場合は、ページ「新規追加メニュー

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

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

各投稿やページの最初のブロックはタイトルです。マウスを使ってタイトルの下に移動するか、キーボードのTabキーを押してカーソルを下に移動し、書き始めることができます。

デフォルトでは、次のブロックはユーザーが書き始められるように段落ブロックになっています。しかし、他のタイプのコンテンツを追加したい場合は簡単です。エディターの左上にある「新しいブロックを追加」ボタン[+]をクリックするか、既存のブロックの下か右にあるこのボタンをクリックするだけで、新しいコンテンツブロックを追加できます。

このボタンをクリックすると、「ブロックの追加」メニューが表示され、上部に検索バー、下部によく使われるブロックが表示されます。タブをクリックしてブロックのカテゴリーを参照したり、キーワードを入力して特定のブロックを素早く検索することができます。

マウスを使ってボタンをクリックしたくない場合は、キーボードショートカットを使うこともできます。まず / と入力してブロックを検索し、キーボードの Enter キーを押してブロックを挿入します。

新しいエディタでのブロックの使用

各ブロックには独自のツールバーがあり、ブロックの上部に表示されます。ツールバーのボタンは、編集するブロックによって変わります。例えば、下のスクリーンショットでは、段落ブロックを開発しており、テキストの整列、太字、斜体、リンクの挿入などの基本的な書式設定ボタンが表示され、3点メニューの下にその他のオプションが用意されています。

ツールバーだけでなく、各ブロックは独自のブロック設定を持つことができ、編集画面の右カラムに表示されます。これらの設定は、編集するブロックによって異なります。例えば、「段落」ブロックでは、テキスト、背景、リンクの色、レイアウトを編集できます。

ブロックを上下に移動したり、並べ替えたりすることができます。この操作を行いたい場合は、ドラッグ＆ドロップをクリックするか、ブロックツールバーの上下のボタンをクリックしてください。

グループと列によるブロックの整理

ブロックエディターには、コンテンツレイアウトを管理・整理するための便利なツールも用意されています。キーボードの Shift キーを押しながらブロックをクリックすると、複数のブロックを選択できます。

その後、ツールバーの「ブロックタイプ」ボタンをクリックして、選択したブロックをグループまたは列に変換します。すると、ブロックのグループ全体に、配置や間隔の変更などのスタイルを適用することができます。

ブロックエディターでは、空のグループブロックやカラムブロックを追加することもできます。それらは後で他のブロックで埋めることができます。

各カラムには、必要に応じて任意のタイプのブロックを追加することができます。これにより、様々なカラムのレイアウトを作成することができます。

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

ブロックを使う一番の利点は、保存して再利用できることです。これは、投稿やページに特定のコンテンツを追加する必要のあるウェブサイト所有者やブロガーにとって特に便利です。各ブロックのツールバーの右上にあるメニューボタンをクリックするだけです。メニューから「パターンの作成」を選択します。

注目してください：また、グループや列全体を再利用可能なブロックとして保存することもできます。これにより、セクション全体を保存し、後で必要になったときにすぐに使用することができます。再利用可能なブロックとして保存するには、関連するオプションをクリックするだけで、ウィンドウがポップアップ表示されます。このウィンドウで、ブロックに名前を付けて、後で使うときに簡単に見つけられるようにする必要があります。また、ブロックを保存するカテゴリーを選択することもできます。このようにして、再利用可能なブロックをより整理された方法で管理することができます。

次に、作成ボタンをクリックしてパターンを保存します。 WordPressはあなたのパターンとその中のすべてのブロックを保存します。パターンを再利用するには、追加したい投稿やページを編集するだけです。次に[+]ブロック追加ボタンをクリックするか、/キーボードショートカットを使います。指定した名前を入力すると、パターンを見つけることができます。

パターン機能を使えば、ウェブサイトのオーナーは、キャッチーなバナーやソーシャルメディアの共有ボタン、バナー広告など、ページレイアウトに共通の要素を簡単に追加できます。選択したWordPressテーマやプラグインにパターンが付属している場合もありますし、WordPressブロックパターンライブラリで他の人が共有しているパターンを見つけて、気に入ったパターンがあるかどうかを確認することもできます。

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

WordPressの投稿には、たくさんのメタデータが含まれています。これには、投稿日、カテゴリやタグ、特徴的な画像などの情報が含まれます。これらのオプションはすべて、エディタ画面の右カラムにきちんと配置されています。

Gutenbergのプラグインオプション

WordPressのプラグインは、ブロックエディタAPIを使って編集画面に設定を統合することができます。人気のあるプラグインには独自のブロックが付属しているものもあります。例えばWPFormsブロックを使ってコンテンツにフォームを追加できる最高の WordPress フォームビルダー プラグインです。

他のWordPressプラグインもブロックエディタ画面に設定を追加することができます。例えば、以下のようなものです。WordPressのためのオールインワンSEOブロックエディタの下部でSEO設定を編集できるようにする方法：

同様に、オンラインショップを運営するためにWooCommerceを使用している場合、WooCommerceにも独自のブロックがあることに気づくでしょう。これらのブロックを使って、WordPressの投稿やページに商品を追加することができます。

ブロック・エディターに一般的なブロックを追加

基本的に、ブロックエディターは強力で、旧来のクラシックエディターが行っていた仕事を十分にこなすことができます。それだけでなく、それを使用することで、あなたの仕事はより速く、よりスムーズになります。さらに素晴らしいのは、コンテンツを簡単にデザインするための豊富なノーコードオプションを提供するなど、さらに多くの新機能が搭載されていることです。ここでは、必要に応じて簡単に使用するための一般的なブロックをいくつか紹介します。

1.WordPressブロックエディタへの画像の追加

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

また、コンピュータから画像をドラッグ＆ドロップすると、エディタが自動的に画像ブロックを作成します。画像を追加すると、ブロック設定が表示され、代替テキスト、画像解像度サイズ、画像へのリンクなど、画像に関するメタデータを追加できます。

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

ブロックエディタにはテキストを追加できるブロックがいくつか用意されています。最もよく使われるのは段落ブロックで、ツールバーにリンク挿入ボタンがあります。その他のよく使われるテキストブロックにも、ツールバーにリンクボタンがあります。

リンクは、Macの場合はCommand + K、Windowsの場合はCTRL + Kのキーボードショートカットを使用して挿入することもできます。

3.Gutenbergへのフォトギャラリーの追加

ギャラリーブロックはイメージブロックと同様に機能します。ギャラリーブロックを追加し、画像ファイルをアップロードするか選択してください。

4.WordPressの投稿にショートコードを追加するGutenbergの使い方

クラシックエディタで使用されているすべてのショートコードは、ブロックエディタでも完全に動作します。段落ブロックに直接挿入することもできますし、この目的のために特別なショートコードブロックを使うこともできます。

ブロックエディターで他のコンテンツブロックを探索

Gutenbergエディタは、いくつかの新しいブロックを導入することで、WordPressの長年のユーザビリティの問題に対処することを約束します。

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

古いエディターでは、多くのユーザーがテキストの横に画像を配置することができませんでした。しかし現在では、メディアとテキストブロックを使ってこのステップを実行することができます。

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

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

ブログの記事やページにボタンを追加するのは、以前のエディタでは本当に頭痛の種でした。ボタン用のショートコードを生成するための特別なプラグインを見つけるか、HTMLモードに切り替えてコードを手動で書かなければならないかもしれません。幸いなことに、Gutenbergエディタにはボタンブロックが組み込まれており、どんな投稿やページにも簡単かつ素早くボタンを追加することができます！

ボタンにリンクを追加したり、色を変更したりすることができます。

3.ブログ記事とランディングページに美しいカバー画像を追加

もう一つの素晴らしい機能はカバーブロックです。投稿やページにカバー画像や背景色を簡単に追加することができます。カバー画像は一般的に幅が広く、ページの新しい部分やストーリーの始まりの装飾としてよく使われます。特に見た目が美しく、目を引くコンテンツレイアウトを作るのにも役立ちます。

使い方は簡単で、カバーブロックを追加してお気に入りの画像をアップロードするだけです。また、表紙にオーバーレイカラーを追加したり、固定背景画像に設定するオプションもあるので、ページをスクロールする際に超クールな視差効果を作り出すこともできます。

4.記事のテーブルの作成

WordPressの投稿にテーブルを追加するのは、従来のエディタでは簡単な作業ではありませんでした。プラグインの助けを借りて作成するか、独自のCSSとHTMLコードを記述する必要がありました。ブロックエディタにはデフォルトのテーブルブロックが組み込まれており、投稿やページにテーブルを簡単に素早く追加できます。このブロックを追加し、挿入したい列と行の数を選択するだけで完了です！

これで、テーブルの行にデータを追加していくことができます。必要に応じて、いつでも行や列を追加することができます。

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

クラシックエディタは、マルチカラムコンテンツを作成することに関しては本当に強力ではありません。ブロックエディタがカラムブロック機能を提供してくれるのは良いことで、簡単な追加で簡単に2カラムの段落ブロックを作ることができ、コンテンツの表示をより多様で柔軟なものにします。

この列ブロックはとても柔軟です。最大6列まで追加でき、各列に他のブロックを使用することもできます。

Gutenbergをプロフェッショナルに使うためのヒント

ブロックエディターを使っていると、ブロックを追加したり微調整したりするのに実際のコンテンツ作成よりも時間がかかるのではないかと心配になるかもしれません。実は、ブロックエディターは超高速なので、まったく心配いりません。少し慣れれば、あまり深く考えなくても、あらゆる種類のブロックを簡単に追加できます。ブロックエディターを使うことで、ワークフローがより速くスムーズになることがすぐにわかると思います。

ここでは、WordPressブロックエディタをより早く使いこなすための、上級者向けのヒントをご紹介します。

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

上のスクリーンショットで、各ブロックの上部にツールバーがあることにお気づきかもしれません。このツールバーはエディタの一番上に移動させることができます。画面右上の三点ボタンをクリックし、"Top Toolbar "オプションを選択してください。

2.キーボードショートカットの使用

Gutenbergには、ワークフローをより速く簡単にする便利なショートカットがいくつか用意されています。一つ目は / です。を入力して入力を始めると、エディタにマッチするブロックが表示され、すぐに追加できます。その他のショートカットについては、画面右上の三点メニューをクリックし、キーボードショートカットを選択してください。

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

3.メディアをドラッグ＆ドロップすると、メディアブロックが自動的に作成されます。

Gutenbergでは、画面上の任意の場所にファイルをドラッグ＆ドロップすると、自動的にブロックが作成されます。例えば、1つの画像や動画ファイルを配置すると、ブロックを作成してくれます。また、複数の画像ファイルを削除してギャラリーブロックを作成することもできます。

4.YouTube、Twitter、Vimeo、その他の埋め込みコンテンツの追加

ブロックエディターを使えば、サードパーティのコンテンツをWordPressのコンテンツに簡単に埋め込むことができます。人気のあるサードパーティ製サービスにはすべてブロックが用意されています。

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

デフォルトの埋め込みオプションはFacebookとInstagramの埋め込みには適用されませんが、その回避策があります。

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

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

いくつかご紹介しましょう：

1.Spectra WordPress Gutenbergブロック

Spectra WordPress Gutenbergブロックは、コンテンツにデザイン要素を追加するための高度なブロックを多数含むブロックライブラリです。

人気のアストラWordPressのテーマでスペクトラは、コードを書かずに美しいデザインを作成できる開発者チームによって作られました。

2.PublishPressブロック

パブリッシュプレスブロックは、Gutenbergブロックエディタを拡張するための追加ブロックを備えた、もう一つの強力なブロックライブラリです。素敵なレイアウトオプション、スライダー、ボタン、アイコン、イメージギャラリー、マップ、タブ、レコメンド、アコーディオン（アコーディオン）などが含まれています。

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

スタッキング可能 - Gutenbergブロックは、あなたのウェブサイトで使用するための美しいデザインのGutenbergブロックのコレクションです。コンテナ、投稿、機能グリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションフレーズなどのブロックが含まれています。

このGutenbergチュートリアルが、WordPressブロックエディタの使い方を学ぶ助けになれば幸いです。