最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

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

WordPressで美しいコンテンツを作成することは、圧倒される必要はありません。

ブロックエディター(Gutenberg)は、ブロックを配置するだけでページや投稿を作成できるように特別に設計されています。技術的なスキルは必要ありません。

デジタルレゴブロックで組み立てるようなものだと考えてください。テキスト、画像、ボタンなど、コンテンツの各ピースはブロックになり、簡単に移動したりカスタマイズしたりできます。

私たちは長年これを使用しています。これにより、何千人ものWPBeginnerユーザーがこのシステムを習得するのを支援することができました。

このチュートリアルでは、WordPressのブロックエディターがどのように機能するかを正確にご紹介します。

コンテンツ作成をより速くする簡単なテクニックを学びます。さらに、コーディングの知識なしにウェブサイトを洗練された外観にする機能を発見できます。

WordPressブロックエディターの使い方

注意: この記事では、投稿や固定ページの編集用に設計されたブロックエディターの使用について説明します。ブロックを使用してウェブサイト全体を編集する方法についてお知りになりたい場合は、WordPressのフルサイト編集の完全ガイドをご覧ください。

ブロックエディター(Gutenberg)とクラシックエディターの違いは何ですか?

最大の ​​違いは、コンテンツの作成方法にあります。クラシックエディターはシンプルなテキストライターでしたが、ブロックエディターは最新のページビルダーです。

ここに主な違いの簡単な比較を示します。

機能クラシックエディターブロックエディター (Gutenberg)
コンテンツ構造単一のテキストフィールド(MS Wordのような)すべての要素に個別のブロック
レイアウトオプション限定的(カラムにはプラグインが必要)ドラッグ&ドロップで列、グループ、行を作成
メディア処理基本的な配置(左、右、中央)フル幅の画像、ギャラリー、カバーブロック
モバイルレスポンシブカスタムCSSコードが必要な場合が多いブロックはモバイルで自動的にスタックします
ショートコードテキストに直接貼り付けよりクリーンなコードのための専用ショートコードブロック

ブロックエディターは、コンテンツの外観と感触をより細かく制御できます。古いエディターでは不可能だった複雑なレイアウトを作成できます。

WordPressブロックエディターはクラシックエディターより優れているのはなぜですか?

WordPressのブロックエディターは、より速く、より視覚的な方法でコンテンツを作成できます。以前はウェブサイトを遅くしていた多くの単一目的プラグインの必要性を排除します。

ここにブロックエディターへの切り替えによる実証済みのメリットを示します。

  • メディアの豊富さ: カバーブロック(ヒーロー画像用)やメディア&テキストブロックなど、以前はカスタムコーディングなしでは不可能だった強力なメディアオプションが含まれています。
  • プラグインの肥大化を軽減: テーブル、ボタン、またはカラム用の個別のプラグインはもう必要ありません。これらはすべて、現在コアブロックに組み込まれています。
  • デフォルトでモバイル対応: クラシックエディターでは、複雑なレイアウトが携帯電話で壊れることがよくあります。ブロックカラムはモバイルデバイスで自動的に縦に積み重ねられ、訪問者にとってシームレスなエクスペリエンスを保証します。
  • ビジュアル編集: 編集中にコンテンツがどのように見えるかを正確に確認できます。エディターと「プレビュー」ボタンを切り替える必要はありません。
  • 将来性: ブロックエディターは、フルサイト編集(FSE)やブロックテーマなどの最新のWordPress機能に必要です。クラシックエディターはこれらの新しいデザインツールにアクセスできません。

このGutenbergチュートリアルでは、以下の内容を扱います:

準備はいいですか?始めましょう。

Gutenberg – WordPressブロックエディターの使用

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

まず、クラシックエディターで行っていた基本的なことと、ブロックエディターでそれらがどのように行われるかをカバーすることから始めましょう。

ブロックエディターを使用した新しいブログ投稿またはページの作成

新しいブログ投稿またはページは、通常どおり作成を開始します。WordPress管理画面で、投稿 » 新規追加メニューをクリックするだけです。

ページを作成する場合は、代わりにページ » 新規追加メニューに移動してください。

WordPressに新しい投稿を追加する

これにより、ブロックエディターが起動します。

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

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

タイトルの下にマウスを移動するか、キーボードのTabキーを押してカーソルを下に進め、書き込みを開始できます。

タイトルブロック

デフォルトでは、次のブロックは段落ブロックです。これにより、ユーザーはすぐに書き始めることができます。

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

新規ブロックボタンを追加

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

タブをクリックしてブロックカテゴリを閲覧したり、キーワードを入力して特定のブロックをすばやく検索したりできます。

新しいブロックのアニメーションを追加

ボタンをクリックするためにマウスを使いたくない場合は、キーボードショートカットを使用することもできます。

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

キーボードショートカットコマンドを使用して新しいブロックを追加

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

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

たとえば、以下のスクリーンショットでは、テキストの配置、太字、斜体、リンクの挿入などの基本的な書式設定ボタンが表示され、3点メニューからさらにオプションが利用できる段落ブロックを扱っています。

ブロックツールバー

ツールバーに加えて、各ブロックには独自のブロック設定があり、編集画面の右側の列に表示されます。

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

サイドカラムの追加ブロック設定

ブロックを上下に移動して並べ替えることができます。

これを行いたい場合は、クリックしてドラッグアンドドロップするか、ブロックツールバーの上下ボタンをクリックするだけです。

関連記事: WordPressでブロックを削除する方法に関するガイドをご覧ください。

ブロックのグループ化と列

ブロックエディターには、レイアウトを管理および整理するための便利なツールが付属しています。

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

ブロックをグループまたはカラムに変換する

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

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

ヒント: グループやカラムを操作する際、目的のブロックを正確に選択するのが難しい場合があります。リストビューの使用をお勧めします。

上部ツールバーにある3本の横線アイコンをクリックするだけです。これにより、ページ上のすべてのブロックの明確なアウトラインが表示され、ネストされたグループを選択して移動しやすくなります。

スタイルグループブロック

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

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

WordPressでカラムブロックを追加する

必要に応じて、各列に任意の種類のブロックを追加できます。

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

カラムブロックの設定

同期パターン(再利用可能なブロック)を使用してコンテンツを保存および再利用する

ブロックエディターの最も強力な機能の1つは、サイト全体でコンテンツを保存して再利用できることです。これは、同期パターン(以前は再利用可能なブロックとして知られていました)を使用して行われます。

同期パターンとは、複数の投稿やページで使用できるブロック、またはブロックのグループです。

最も良い点は、パターンを編集すると、使用したすべての場所で自動的に更新されることです。これは、CTAボックスやアフィリエイト開示など、一貫性を保つ必要があるコンテンツに最適です。

保存したいブロックを選択するだけです。次に、ブロックツールバーの3点ドットメニューアイコンをクリックし、「パターンを作成」オプションを選択します。

再利用可能なブロックパターンを作成する

ポップアップウィンドウが表示されます。ここで、パターンに名前を付け、整理のためにカテゴリに割り当てることができます。

最も重要なのは、「同期済み」オプションがオンになっていることを確認することです。 これにより、パターンが一度にすべて更新されます。

パターンを作成

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

「作成」をクリックすると、新しい同期パターンが保存されます。

他の投稿やページで使用するには、ブロックインサーター(+)ボタンをクリックして「パターン」タブの下で検索するか、名前で検索するだけです。

パターンを挿入

パターンを使用すると、サイトオーナーは、行動喚起、ソーシャルメディアボタン、バナーなどの一般的に使用される要素をレイアウトに簡単に追加できます。

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

さらにヘルプが必要な場合は、初心者向けのWordPressブロックパターンの見つけ方と使い方に関する別のガイドがあります。

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

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

これらのオプションはすべて、エディター画面の右側の列にきれいに配置されています。

ブロックエディターでの投稿とページのВнастройки

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

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

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

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

WPForms ブロックの例

他のWordPressプラグインも、ブロックエディター画面に設定を追加する場合があります。

たとえば、All in One SEO for WordPressでブロックエディターの下部にあるSEO設定を編集する方法を次に示します。

オールインワンSEO設定の例

同様に、WooCommerceを使用してオンラインストアを実行している場合、それにも独自のブロックがあることに気付くでしょう。

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

ブロックエディターでの WooCommerce ブロック

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

ブロックエディターは、古いクラシックエディターができたことはすべてできます。

ただし、以前よりも迅速かつエレガントに作業できるようになります。さらに、多くのノーコードオプションでコンテンツをスタイル設定できるなど、さらに多くのことができます。

ここで利用できる一般的なブロックをいくつかご紹介します。

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

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

WordPressに画像ブロックを追加する

コンピューターから画像をドラッグアンドドロップすることもできます。エディターが自動的に画像ブロックを作成します。

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

WordPressの画像ブロック設定

詳細については、WordPressで画像を挿入する方法に関するチュートリアルをご覧ください。

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

その他、一般的に使用されるテキストブロックにも、ツールバーにリンクボタンがあります。

WordPressのリンクブロックエディターを追加

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

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

ギャラリーブロックの例

詳細については、WordPressで画像ギャラリーを作成する方法に関するガイドをご覧ください。

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

すべてのショートコードは、以前と同様に機能します。ただし、専用の「ショートコード」ブロックの使用をお勧めします。

ブロックエディターのショートコードブロック

技術的には段落ブロックにショートコードを貼り付けることができますが、ショートコードブロックはフォーマットの問題を防ぎ、コードが正しくレンダリングされることを保証します。

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

Gutenbergエディターは、新しいブロックを導入することで、WordPressにおける長年のユーザビリティの問題を解決することを約束しました。

以下は、ユーザーが非常に役立つと感じるであろうお気に入りのいくつかです。

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

以前のエディターでは、テキストの横に画像を配置できなかったユーザーが多くいました。メディア&テキストブロックを使用すると、それが可能になります。

メディアとテキストブロック

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

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

旧エディターのもう一つの煩わしさとして、ブログ投稿やページにボタンを追加することがありました。ボタンのショートコードを作成するプラグインを使用するか、HTMLモードに切り替えてコードを記述する必要がありました。

幸いなことに、Gutenbergにはボタンブロックがあり、任意の投稿やページにボタンをすばやく追加できます。

ブロックエディターのボタン

ボタンのリンクを追加したり、色を変更したりできます。詳細については、WordPressで簡単にボタンを追加する方法に関する記事をご覧ください。

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

試してみたいもう1つのクールな機能は、カバーブロックです。これにより、投稿やページにカバー画像やカラー背景カバーを追加できます。

カバー画像は、ページ上の新しいセクションやストーリーの始まりによく使用される、より幅の広い画像です。美しく、魅力的なコンテンツレイアウトを作成できます。

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

カバーブロック

詳細については、WordPressのカバー画像とアイキャッチ画像の違いに関する記事をご覧ください。

4. 記事内にテーブルを作成する

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

現在、ブロックエディターにはデフォルトのテーブルブロックが搭載されており、投稿やページにテーブルを追加するのが非常に簡単になりました。ブロックを追加して、挿入したい列数と行数を選択するだけです。

テーブルブロックの例

これで、テーブル行にデータを追加できるようになりました。必要に応じていつでも行や列を追加でき、2つの基本的なスタイルオプションが利用可能です。

5. 複数列のコンテンツを作成する

複数列のコンテンツを作成することは、過去には大きな問題でした。幸いなことに、ブロックエディターを使用すると、カラムブロックを簡単に追加できます。

マルチカラムコンテンツブロック

このブロックは非常に柔軟です。1行に最大6つのカラムを追加でき、各カラム内に他のブロックを使用することもできます。

何よりも、これらのカラムはモバイルレスポンシブです。WordPressは小さい画面で自動的に縦に積み重ねるため、追加のコーディングなしで、すべてのデバイスでサイトが素晴らしく見えます。

Gutenbergをプロのように使用するためのボーナスのヒント

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

ブロックエディターは非常に高速で、数分間の基本的な使用でも、考えずにすぐにブロックを追加できるようになります。

このアプローチでワークフローがどれほど速くなるか、すぐに実感できるでしょう。

WordPressブロックエディターをさらに速く使うための、パワーユーザー向けの追加ヒントをいくつかご紹介します。

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

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

「トップツールバー」オプションにアクセスするには、画面右上にある3つの点のボタンをクリックしてください。

ブロックツールバーを上に移動
2. キーボードショートカットを使用する

Gutenbergには、ワークフローをさらに迅速かつ簡単にできる便利なショートカットがいくつか付属しています。すぐに使い始めるべき最初のものは / です。

/を入力し、入力を開始すると、エディターが一致するブロックを表示し、すぐに挿入できます。

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

ブロックエディターでキーボードショートカットを使用する

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

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

Gutenbergを使用すると、ファイルを画面上のどこにでもドラッグアンドドロップでき、自動的にブロックが作成されます。

例えば、単一の画像またはビデオファイルをドロップすると、ブロックが自動的に作成されます。または、複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます。

ブロックエディターでのドラッグ&ドロップファイルアップロード
4. YouTube、Twitter、Vimeo、その他の埋め込みの追加

ブロックエディターを使用すると、WordPressコンテンツにサードパーティのコンテンツを簡単に埋め込むことができます。YouTube、X(Twitter)、Vimeo、Spotifyなどの人気サービス用のブロックがあります。

ブロックの埋め込み


埋め込みURLを任意の場所でコピー&ペーストするだけで、自動的にブロックが作成されます。

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

ブロックエディターでのYouTube埋め込み

注意: FacebookおよびInstagramの投稿では、URLを直接貼り付けても機能しません。これは、これらのプラットフォームがAPIプライバシー設定を変更し、オープンoEmbedサポートを削除したためです。

これを修正するには、接続を認証するプラグインを使用する必要があります。「oEmbeds」機能を有効にするには、Smash Balloon Social Photo Feedの使用をお勧めします。

完全な詳細については、WordPressにFacebookおよびInstagramの投稿を埋め込むに関する記事をご覧ください。

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

WordPressのブロックエディターにより、開発者は独自のブロックを作成できます。優れたWordPressプラグインの中には、新しいエディター用のブロックバンドルを提供しているものもあります。

いくつかご紹介します。

1. Spectra WordPress Gutenberg Blocks

Spectraブロック

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

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

詳細については、完全なSpectraレビューをご覧ください。

2. PublishPress Blocks

PublishPress Blocks

PublishPress Blocksは、Gutenbergブロックエディターを拡張するための追加ブロックを備えた、もう1つの強力なブロックライブラリです。

美しいレイアウトオプション、スライダー、ボタン、アイコン、画像ギャラリー、マップ、タブ、お客様の声、アコーディオンなどが含まれています。

3. スタッカブル – Gutenbergブロック

スタッカブルブロック

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

その他のオプションについては、最高のWordPress Gutenbergブロックプラグインの完全なリストをご覧ください。

Gutenberg(WordPressのブロックエディター)に関するよくある質問

GutenbergがデフォルトのWordPressエディターになって以来、その使い方について多くの質問を受けています。ここでは、ブロックエディターに関する最もよくある質問とその回答をご紹介します。

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

ブロックエディターは、古い投稿やページには影響しません。それらを編集することは引き続き可能で、ブロックエディターはそれらをクラシックエディターを含むブロックとして自動的に開きます。

ブロックに変換

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

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

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

有効化すると、ブロックエディターが無効になり、クラシックエディターの使用を続行できるようになります。

Classic Editorプラグインは、当面の間公式にサポートされます。しかし、WordPressでコンテンツを作成する最新の方法に慣れるために、今すぐブロックエディターの使用を開始することを強くお勧めします。

7. 使用中のプラグインやテーマでブロックエディターが機能しない場合はどうすればよいですか?

Project Gutenbergは開発に長い時間がかかったため、プラグインやテーマの作成者はコードの互換性テストに十分な時間をかけることができました。

ただし、一部のプラグインやテーマがブロックエディターとうまく連携しない可能性は依然としてあります。その場合は、Classic Editorプラグインをインストールするか、開発者にGutenbergサポートの追加を依頼するか、代替のプラグインまたはテーマを見つけることができます。

4. Gutenbergのヒントやコツについてもっと学ぶにはどうすればよいですか?

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

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

ご不明な点がございましたら、コメントを残すか、ウェブサイトのお問い合わせフォームを使用して、お気軽にお問い合わせください。

5. Gutenbergの問題に遭遇しましたか?

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

動画チュートリアル

動画がお好みですか?以下のチュートリアルをご覧ください:

WPBeginnerを購読する

ボーナスリソース

ブロックエディターをより効率的に使用するのに役立つ追加リソースを以下に示します。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

233 コメント返信する

  1. Gutenbergプラグインをダウンロードしましたが、まだクラシックエディターが表示されます。どうすればよいですか?

    • サイトが最新の状態であれば、デフォルトでブロックエディターが使用されているはずです。代わりにクラシックエディターを表示するプラグインが有効になっていないか確認する必要があります。

      管理者

  2. ブロックエディターがテーマができるすべてのことができる場合、テーマを追加する必要はありますか?助けてください。

    • 現時点では、WordPressを機能させるためにはテーマが必要です。テーマはサイト全体のデザインとスタイリングのためのもので、ブロックエディターを使用してサイトの一部をカスタマイズできます。

      管理者

  3. この新しい「Gutenbergというもの」についてちょうど聞いたばかりで、あなたの素晴らしいチュートリアルを見つけました。ありがとうございます。Gutenbergをサイトに表示させる方法がわかれば、非常に役立つでしょう。私のサイトにはまだクラシックエディターしかなく(プラグインとしても持っていません。サイトはずっとそのままでした)、Gutenbergエディターを表示するために何かインストールする必要がありますか?

    • 表示するには、WordPressサイトが最新バージョンに更新されていることを確認してください。また、ブロックエディターがデフォルトのエディターではない理由として、クラシックエディタープラグインがサイトでアクティブになっているかどうかを確認したいでしょう。

      管理者

  4. こんにちは
    エディタの背景色をどのように変更しましたか?
    私のは白ですが、あなたのは違う色です

    • テーマがこれをオーバーライドしない限り、ブロックエディターはサイト上のコンテンツと同じ背景色を使用するはずです。

      管理者

  5. 有益なビデオをありがとうございます。長年 WP を使用しており、クラシックエディターに問題がなかったため、新しい方法を学ぶことに有用性を見出せず、新しいエディターを避けていました。2022 年にクラシックが廃止されることを知らなかったので、まさにタイムリーな発見でした。まだ少し学習曲線があるようですが、思ったほど悪くはありませんでした。

    • 私たちのガイドがお役に立てて嬉しいです。新しいエディターをお楽しみください:)

      管理者

  6. このチュートリアルは、Gutenbergで何ができるかを理解するのに本当に役立ちました。ありがとうございます

  7. こんにちは。
    クラシックエディターを使用している場合、ツールバーにはドロップダウンメニューからフォントの種類を選択する設定があります。
    ブロックエディターを使用している場合、フォントの種類をどのように変更しますか?
    アーノルド

  8. 不明な理由で、ブロックの設定が右側ではなく、ページの下に表示されます(YoastSEO の設定など)。何が問題なのでしょうか?

    • おそらくブラウザの幅が狭すぎます。ブラウザウィンドウを広げると、再び横に表示されるはずです。

      管理者

  9. ブロックエディターが現在非常にフラストレーションがたまるものです。引用、詩、または歌の歌詞でブログエントリを開始したいと思っていたからです。入力中にEnterキーを押して詩の別の行に移動すると、新しいブロックが作成されます。Enterキーを押すたびに各行に新しいブロックが作成されることなく、複数行を作成するにはどうすればよいですか?

    • 同じブロック内に留まるには、EnterキーだけでなくShift + Enterキーを使用したいと思うでしょう。

      管理者

  10. ついにブロックエディターを学ぶことにしました。すごい!なぜこんなに長く待ったのだろう?この記事を読んで、ブロックエディターを使って新しいドラフトページを開始しました。とても簡単です。慣れてきて、新しいページや投稿の書き方を学べば、とても簡単で楽しくなるでしょう。まだクラシックエディターを使っている方、ブロックエディターを学び始めて使う必要があります。

    • ブロックエディターをお気に召しているとのこと、嬉しいです。私たちのガイドが移行を少しでも楽にするお手伝いができれば幸いです:)

      管理者

  11. 複数の投稿で使用されているブロックを編集して、変更が同時に表示されるようにする方法はありますか?

  12. WordPressをインストールするとブロックエディターがデフォルトになるのに、なぜGutenbergがインストール可能なモジュールリストに表示されるのですか?

    • デフォルトのエディターになる前から、ブロックエディター用のGutenbergプラグインがありました。ブロックエディターを使用するためにGutenbergプラグインをインストールする必要はもうありません。

      管理者

  13. こんにちは、

    詳細な記事をありがとうございます。

    しばらく前にブロックエディターを削除しました。再インストールするにはどうすればよいですか?Gutenbergプラグインが多すぎて、どれがデフォルトのエディターなのかわかりません。

    ご協力ありがとうございます。

    • 通常通りサイトでブロックエディターを使用するには、Classic Editorプラグインを無効にする必要があります。ただし、別のプラグインを使用している場合は除きます。

      管理者

      • ありがとうございます!探していた答えです(笑)。ブロックエディターが表示されない理由がわかりませんでした。皆さんは最高です。

  14. ユーザー様、テキストの間隔(マージンやパディングなど)をフォーマットする必要があります。どのブロックを使用すればよいですか?

  15. 素晴らしい、役立つ投稿です。しかし、私は新しいエディタをスクリーンリーダーで使用する方法に関するリソースを真剣に探しています。助けていただけますか?

  16. ページを開いて編集しようとすると、常にブロックエディタのチュートリアルが最初に表示されます。この邪魔なポップアップを永久に消して、編集にアクセスできるようにするにはどうすればよいですか?

    • そのポップアップを閉じたときに、ブラウザがCookieの設定を妨げていないことを確認する必要があるかもしれません。これは一般的な理由の1つです。

      管理者

  17. このブロックエディターを使用していると、ブログ全体のフォントの色とサイズをグローバルに送信する方法がないことに気づきました。個々のブログを変更するのは非常に時間がかかります。

    これを回避する方法はありますか?

  18. 「続きを読む」を非表示にしたい場所に配置することで、表示される投稿を減らすにはどうすればよいですか?

  19. ブロックをインデックス化する方法はありますか? 幅を狭くすることはできますか?

    • インデックスという言葉で具体的にどのようなことを求めているかによります。幅に関しては、やりたいことの最も一般的な方法としてCSSまたは列を使用できます。

      管理者

  20. あまり使ったことのないものを見つけられませんでした。例えば、聖書の参照を説明する段落ブロックがあります。次に、聖書を含む別の段落ブロックを作成します。その聖書ブロックをインデントしたいと思います。どうすればよいですか?

    • 今のところ、インデントを追加するにはクラシックブロックを使用できるはずです:)

      管理者

      • 返信ありがとうございます。実際には、「引用」ブロックを使用することにしましたが、「詩」ブロックでも機能するでしょう。どちらも少しインデントされます。「引用」は縦線も付けます。

  21. WordPressを始めたばかりです。古いバージョンを使ったことがなく、慣れていないので、もしかしたら「ちょうど良い」タイミングだったのかもしれません。新しいブロックエディターで早速始めます。このガイドは役に立ちました。ありがとうございます。

  22. 素晴らしい記事をありがとうございます。そして、忍耐強く対応していただきありがとうございます。Gutenbergを短期間試しましたが、1つの重要な問題で苦労しました。テキストで囲まれた画像が互いにぴったりくっつき、まったくスペースがありませんでした。パディングを追加する方法を見つけようとしましたが、見つかりませんでした。そのため、Classicに戻りました。

    しかし、今あなたの記事はGutenbergの良い点がどれだけ多いかを示しています。そこであなたに尋ねたいのですが、画像と隣接するテキストの間にパディング(スペース)を追加するにはどうすればよいですか?現在の解決策があれば、すぐにGutenbergに戻ります!

    敬具 Ted

    • メディアとテキストブロックを1つの方法として使用できます。また、テーマのスタイリングがこの問題の原因の一部ではないことを確認するために、テーマのサポートに問い合わせることも検討してください。

      管理者

  23. あなたのブログは素晴らしいです。ブロックエディターで投稿を注目の投稿としてマークしたいのですが、どうすればよいですか?教えてください。

    • ブログのトップに投稿を固定するために、投稿の設定にチェックボックスがあるはずです。これはあなたが望むことのように思われます。

      管理者

  24. こんにちは、記事をありがとうございます。

    最初は新しいブロックエディタに偏見を持っていましたが、ページを変換するためのオプションがさらに多く提供されていることに嬉しい驚きを感じています。

    私の唯一の問題は、ブロックエディターがフロントエンドですべてのタイトルを大文字で表示することですが、公開された投稿のタイトルは本来あるべき姿で見えます。エディターで何をしているかを確認できるように、これを修正する方法はありますか?

    事前に感謝します。

    • 現時点では推奨事項はありませんが、ブロックエディターが改善されるにつれて、サイトのフロントエンドにより似た外観になるはずです。

      管理者

  25. WordPress.com を利用しています。ブロックエディターを使おうとしていますが、タグとカテゴリを入力する場所が見つかりません。消えてしまったようです。何かヒントはありますか?よろしくお願いします。

    • それはドキュメント設定にあるか、右上にある3つの縦線ドットの下のオプションで確認できます。私たちのチュートリアルはセルフホストインストール用ですので、オプションが利用できない場合は、サポートに連絡することをお勧めします。

      管理者

  26. それをオフにする必要があります。今すぐオフにする必要があります。プラグインはありません。理解できません。クラシック/通常のエディターのオプションがありません。無料バージョンに戻るにはどうすればよいですか?無料のプラグインでさえ、使用しようとすると、WordPressの有料バージョンにアップグレードする必要があると言われます。奇妙です。

  27. この記事は素晴らしいですね。今のところブロックエディターは気に入っています。しかし、番号付きリストに画像挿入したいのですが、リスト内の画像の表示位置を制御する方法がないようです。リストブロック内の画像の表示位置を制御する方法はありますか?

    • 複数のブロックでこの問題が発生している場合は、リストを作成するためにクラシックブロックを使用することを検討してください。

      管理者

  28. Gutenberg の分かりやすいチュートリアルをありがとうございます。

    「Gutenberg でブロックを保存して再利用する」にたどり着き、すべての手順に従いました。再利用可能なブロックを管理できるページに到達しました。

    さて、エディタに戻るにはどうすればよいですか?

    • 投稿/ページ管理エリアから手動でページに戻り、投稿を再度編集する必要があります。

      管理者

      • ありがとうございます。その通りにしました!

        良い仕事を続けてください:このチュートリアルは、クラシックエディターからGutenbergエディター(「ブロックエディター」よりもはるかに面白く上品な名前)への変更に対する私の恐怖を克服するのに大いに役立ちました。

        PS: Gutenbergユーザーとつながりがある場合は、再利用可能なページにエディタに戻るオプションを追加することを提案するかもしれません。

        • 当社の記事が新しいエディターへの切り替えに対する自信に役立ったとのこと、嬉しく思います。

  29. 拝啓、
    WordPressのGUTENBERGブロックで問題が発生しています。ブロックが突然狭くなり、ページ全体に表示されず、十分なスペースがありません。この問題をどのように解決すればよいですか?

    • まず、それがプラグインによって追加されたブロックでない場合、テーマのサポートに連絡して、テーマのスタイリングエラーでないことを確認してください。

      管理者

  30. 新しい投稿を作成しようとすると、ブロックがすべてぐちゃぐちゃになり、何も書けません。助けてください? すべて更新しましたが、なぜこうなっているのかわかりません。Chromeを使用しています。

  31. この新しいブロックシステムはひどいです。

    サムネイル画像を左に、その横の先頭に中央揃えのh2見出しテキスト、そしてその下にh4見出しを配置するという基本的なことができません。
    これは古い、より優れたシステムでは最も基本的なことでした。
    より多くのコントロールがあるという幻想を抱いていますが、現実はより多くのオプションがあっても成果が少ないということです。

    サイトに追加できなくなるため、クラシックなスタイルに戻せることを願っています。

    ただただひどい。

    • 新しいエディターにとっては学習プロセスであり、あなたが望むものを作成するには、カラムブロックを試すのが良いかもしれません。

      管理者

  32. チュートリアルを読んだ後、クラシックエディターのプラグインをアンインストールしたいのですが、クラシックとブロックの両方で書かれた投稿があります。フォントが異なり、奇妙に見えます。ブロックビューに切り替えると、ブロックの1つに「予期しない、または無効なコンテンツが含まれています」と表示されます。そしてHTMLに切り替えるように求められます。
    プラグインをアンインストールすると、このコンテンツを再作成する必要がありますか?

    • スタイリングを取り戻すには、変更されたコンテンツをHTMLに設定する必要がある可能性が高いですが、ほとんどの場合、コンテンツはまだそこにあるはずです。

      管理者

    • 現時点ではできません。プラグインがブロックを追加すると、リストにもっと多くのブロックが表示されますが、ブロックはシンボルの下に名前が表示され、何に使用されるかのアイデアを与えるはずです:)

      管理者

  33. これは素晴らしいイントロダクションです!たくさんのことを学びました。:)
    しかし、リンクブロックの作成方法に関するガイドが見つかりません。
    ブロックを使用して、自分のサイトから別のサイトにリンクする必要があります。
    私が得られる唯一のオプションは、パーマリンクを編集することです。
    何かアイデアはありますか??

    • 段落ブロックのテキストを編集する際に、それをハイライト表示すると、小さな新しいツールバーを使用してリンクを追加できるはずです。

      管理者

  34. 2008年にWP V2.6を使い始め、自分で開発したPHPサイトをCMSとしてWPに移行しました。それ以来、確かに長い道のりを歩んできました。Gutenbergは、かつては自分でコーディングするかプラグインを導入する必要があったものが詰め込まれた、はるかに優れたワークフローUIを提供しているように見えますが、経験豊富なWPユーザーである私でさえ、新しいインターフェースにはしばしば戸惑っています。それは単なる学習曲線です。ご紹介、ヒント、ガイダンスをありがとうございます。これを使って習得します!乾杯。

    • Gutenbergに関するあなたの気持ちを共有してくれてありがとう。改善されるにつれて、使いやすくなるはずです。:)

      管理者

  35. ブロックエディターを使用してテーブルを挿入できることに満足しました。各セルにメディアコンテンツにリンクしたいコードをそれぞれ入力しました。しかし、その方法を簡単に見つけることができませんでした。各ケースでURLにリンクすることはできましたが、これは長々とした作業です。明らかに、ブロックエディターから直接メディアコンテンツを追加できる方が良いでしょう。私が愚かで何かを見落としてしまったのでしょうか?

    • 現時点ではテーブルブロックの制限事項です。最も近い代替案としては、メディアブロックを挿入するためにカラムブロックを作成することが考えられます。

      管理者

  36. WordPressをアップデートしてから、「接続が失われました」というアラートが表示されました。解決する前にクラシックエディタープラグインを無効にしました。ブロックエディターを無効にしてクラシックエディターを使用する方法はありますか?ブロックエディターが登場してから、WordPressアプリは投稿時に常にジェネリックエラーの通知を出します。アプリの問題は何ですか?

    • アプリのサポートに連絡して、問題について知らせ、原因を調査してもらうのが良いでしょう。

      管理者

  37. これは信じられないほど役立つチュートリアルでした。

    しかし、タイトルのテキストを中央揃えできない問題に対する解決策は見つからなかったと思います。それは馬鹿げています。

    しかし、見出しで得られるサイドバーのフォーマットオプションのうち、中央揃えオプションがタイトルでは消えてしまい、画像でも中央揃えオプションがあるオーバーヘッドフォーマットバーも消えてしまいます。これはページ上で最も重要で目立つ機能であり、WordPressは非常に一般的なフォーマットの選択を妨げるために、わざわざ手間をかけているようです。何か助けになりますか?WordPressコミュニティへのサービスに改めて感謝します。

    • テキストを中央揃えにするオプションが表示されない場合は、右上にある3つのドットをクリックしてトップツールバーを有効にできるはずです。それが有効になれば、ブロックが選択されている状態で段落ブロックのテキストを中央揃えにするオプションが表示されるはずです。

      管理者

  38. ページ上のブロック間を移動する簡単な方法はありますか?例えば、ページ上の最初のブロックで何かを読んでいるときに、ページの下の方にある別のブロックに移動したい場合、簡単にジャンプする方法はありますか、それともページをスクロールするだけですか?

    • 現時点では、ページを下にスクロールする必要があります。

      管理者

  39. 新しいWPのフォーマットは嫌いで、ブログホストを変更するほどです。これはよりユーザーフレンドリーではありません。以前は簡単に投稿でき、ライブラリから動画を追加できました。今では、ひどい新しいブロックフォーマットにデフォルト設定され、変更できず、イライラしながらブログ投稿を終えても、動画メディアを追加できません。WPは常に、ブログをよりイライラする体験にするために更新しています。残念です。

    • このイライラする問題は、すべてのソフトウェアUIに共通することですが、学習曲線の平坦な部分に到達したと思ったら、UIが更新されてしまい、また新たな登攀を強いられるように感じることがよくあります。

      デザイン変更をどれくらい待って、どれくらい推し進めるべきかを知ることが、ユーザーベースの間で進歩を受け入れてもらうための鍵だと思います。確かに、Gutenbergは一部の人が乗り越えたくない大きな一歩です。しかし、長年対処されずに放置されてきた不可解なレガシー要素が多すぎたため、避けられなかったのかもしれません。

      私も苦労しています。特に多くのショートコードを使用している古いサイトの扱いは大変ですが、このハードルを乗り越えれば、その先には美しい広大な草原が広がっていると信じています。

  40. 個々のブロックだけでなく、ブロックのグループをまとめて保存できる機能があると便利だと思います。そうすれば、投稿ページのデザインが気に入ったときに、再利用できます。これは、各投稿の構造をあまり変更せず、それほど柔軟性を必要としない私たちにとって特に役立つでしょう。

  41. こんにちは!カバーブロックのサイズを変更する方法はありますか?横幅を半ページにして2つ並べたいのですが、そのような機能が見つかりません。

    ありがとうございます!

  42. ブロックを無効にして、古いエディター形式に戻すオプションはありますか?

    Gutenbergブロックはひどいし、彼らが今後数年間かけて改善するのを待つ間、仕事の質とスピードを妥協したくありません。

  43. ブロックは実際にはまだゴミです。ブロックの高さを変更するにはどうすればいいですか??????

    • ブロックエディターはゆっくりと改善しようとしています。ブロックは、ブロックに追加されたコンテンツに基づいて高さを変更するはずです。

      管理者

  44. 私はWP初心者で、現在2019テーマを使用しています。やりたいことは、ホームページに投稿の全文が表示されないように抜粋を追加することだけです。どうすればそれができるのか、どうしてもわかりません。「抜粋」のテキストボックスをドキュメントエディタの右ナビゲーションで見つけて試しましたが、うまくいきませんでした。何か助けがあれば幸いです。ありがとうございます!

    • テーマが抜粋をサポートしていない可能性があります。従来のまたはブロックエディターを使用しているかどうかに応じて、moreブロックまたはread moreブロックを追加して、問題が解決するかどうかを確認してみてください。

      管理者

    • Danielleさん、レイアウト要素の下にある「もっと見る」ツールが必要かもしれません。これにより、投稿の最初の段落(または任意の段落)の後に「続きを読む」リンクを追加できます。

    • サイトのフロントエンドを指している場合、通常はCSSを使用して編集する必要があります。

      管理者

  45. 段落ブロックを見ると、ここに示されているのと同じオプションが表示されません。フォントの色を変更できず、カスタムスタイルで背景色の色設定にプリセットの色があります。段落ブロックでこのオプションにアクセスするためにオンにする必要があるものはありますか?

    • 何かを有効にする必要はないはずですが、プラグインやテーマがこれらのオプションを削除していないことを確認したい場合があります。

      管理者

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。