コンテンツへスキップ
2026年のWordPressブロックエディター(Gutenberg)の始め方

2026年のWordPressブロックエディター(Gutenberg)の始め方

Erik KellerErik Keller更新日: 16 分で読めます606 閲覧

WordPressブロックエディターとは?

WordPressブロックエディターは、一般にGutenbergと呼ばれ、WordPressのデフォルトのコンテンツエディターです。WordPress 5.0で導入され、クラシックエディターを置き換え、すべてのコンテンツ(段落、画像、見出し、埋め込みなど)が個別のブロックとして配置、カスタマイズ、再配置できるモジュール式のブロックベースのシステムに移行しました。

2026年までに、Gutenbergは単なるコンテンツエディターを超えて進化しました。フルサイトエディティング(FSE)により、ヘッダー、フッター、テンプレート、テンプレートパーツを含むサイト全体のレイアウトを制御できるようになりました。このガイドでは、基本的なブロック編集から高度なサイト構築技術まで、知っておくべきすべてのことを説明します。

コアブロックの概要

WordPressには、90以上のコアブロックがカテゴリに整理されて付属しています。ここでは、最も頻繁に使用するものを紹介します:

カテゴリ 主要ブロック 使用例
テキスト 段落、見出し、リスト、引用、詳細 標準的なコンテンツ作成
メディア 画像、ギャラリー、動画、音声、カバー 視覚的およびマルチメディアコンテンツ
デザイン カラム、グループ、行、スタック、スペーサー ページのレイアウトと構造
ウィジェット 検索、ナビゲーション、ソーシャルアイコン、タグクラウド インタラクティブで動的な要素
テーマ サイトタイトル、ロゴ、ナビゲーション、クエリループ フルサイトエディティングコンポーネント
埋め込み YouTube、Twitter、Spotify、Vimeo サードパーティコンテンツの埋め込み

ブロックを使ったコンテンツ作成

ブロックの追加

コンテンツにブロックを追加する方法はいくつかあります:

  • プラスボタン (+): ツールバーのプラスアイコンまたはブロック間をクリックしてブロックインサーターを開きます
  • スラッシュコマンド: / の後にブロック名(例:/image/heading)を入力して迅速に挿入します
  • コマンドパレット: Ctrl+K(Windows)または Cmd+K(Mac)を押して任意のブロックやアクションを検索します
  • ドラッグアンドドロップ: インサーターパネルからキャンバスに直接ブロックをドラッグします

ブロックの設定

各ブロックには2つの設定エリアがあります:

  1. ツールバー: 選択したブロックの上に表示され、一般的なアクション(整列、太字、斜体、リンク)を提供します
  2. サイドバーパネル: 色、タイポグラフィ、間隔、詳細設定を含む詳細な設定を提供します

ブロックの整理

ブロックツールバーの矢印を使ってブロックを上下に移動させることでコンテンツを整理したり、新しい位置にドラッグしたりできます。また、リストビューパネル(Shift+Alt+O)を使用して、ドキュメント全体の構造を確認し、ツリー内でブロックをドラッグできます。

再利用可能なブロック(同期パターン)

再利用可能なブロックは、2026年に同期パターンに改名され、1回ブロックまたはブロックのグループを作成し、複数の投稿やページに挿入できるようにします。同期パターンを更新すると、すべてのインスタンスが自動的に更新されます。

同期パターンの一般的な使用例:

  • 複数のページに表示されるコールトゥアクションセクション
  • ブログ投稿で使用される著者のバイオボックス
  • 標準化された免責事項やアフィリエイト開示通知
  • ニュースレターのサインアップフォーム
  • 連絡先情報ブロック

同期パターンを作成するには:ブロックを選択し、3点メニューをクリックして「パターンを作成」を選択し、名前を付けて「同期」をオンにします。後で挿入するには、ブロックインサーターのパターンタブで見つけます。

ブロックパターン

ブロックパターンは、挿入してカスタマイズできる事前設計されたブロックの配置です。同期パターンとは異なり、リンクされていないため、パターンインスタンスを編集しても他の使用には影響しません。

組み込みパターン

WordPressには、一般的なレイアウトのためのパターンが含まれています:ヒーローセクション、フィーチャーグリッド、テストimonialレイアウト、価格表など。アクティブなテーマは、そのデザインシステムに最適化された追加のパターンを登録する場合があります。

WordPress.orgパターンディレクトリ

WordPress.orgのパターンディレクトリでは、コミュニティが提供した数千のパターンを提供しています。インサーターから直接パターンをブラウズ、プレビュー、コピーできます。または、パターンディレクトリのウェブサイトからもアクセスできます。

カスタムパターンの作成

ブロックを配置して選択し、ブロックメニューからパターンを作成することで、自分自身のパターンを作成します。カスタムパターンはインサーターの「マイパターン」セクションに表示され、サイト全体で再利用可能になります。

フルサイトエディティングの基本

フルサイトエディティング(FSE)は、投稿やページのコンテンツを超えて、サイト全体の構造にブロック編集を拡張します。ブロックテーマを使用すると、次のものを編集できます:

  • テンプレート: 特定のページタイプ(シングルポスト、アーカイブ、404、検索結果)のレイアウトを制御します
  • テンプレートパーツ: ヘッダーやフッターなどの再利用可能なセクションを編集します
  • グローバルスタイル: サイト全体の色、タイポグラフィを設定します
    • ナビゲーション: メニューを視覚的に構築および管理

    サイトエディタへのアクセス

    WordPressダッシュボードの外観 → エディタに移動します。これにより、テンプレートをブラウズし、テンプレートパーツを編集し、グローバルスタイルを調整できるサイトエディタが開きます。FSEはブロックテーマを必要とするため、クラシックテーマは従来のカスタマイザーを使用します。

    テンプレートとテンプレートパーツ

    概念 制御する内容
    テンプレート コンテンツタイプのフルページレイアウト シングルポスト、ページ、アーカイブ、404
    テンプレートパート テンプレート内で再利用可能なセクション ヘッダー、フッター、サイドバー

    theme.jsonによるブロックのカスタマイズ

    theme.jsonファイルはブロックテーマの設定ハブです。以下を制御します:

    • エディタで利用可能なカラーパレットとグラデーション
    • タイポグラフィプリセット(フォントファミリー、サイズ、行の高さ)
    • スペーシングスケールとレイアウト幅
    • 有効または無効にするブロック機能
    • 特定のブロックのデフォルトスタイル

    テーマ開発者は、theme.jsonを使用して一貫したデザインシステムを作成します。サイトオーナーとして、ファイルを直接編集することなく、サイトエディタのグローバルスタイルインターフェースを通じてこれらの設定を変更できます。

    キーボードショートカット

    キーボードショートカットを学ぶことで、編集ワークフローが大幅にスピードアップします:

    アクション Windows / Linux Mac
    新しいブロックを追加 / (スラッシュ) / (スラッシュ)
    コマンドパレット Ctrl + K Cmd + K
    ブロックを複製 Ctrl + Shift + D Cmd + Shift + D
    ブロックを削除 Shift + Alt + Z Ctrl + Option + Z
    リストビューを開く Shift + Alt + O Ctrl + Option + O
    ブロックインサーターを切り替え Ctrl + Shift + , Cmd + Shift + ,
    ドラフトを保存 / 更新 Ctrl + S Cmd + S
    元に戻す Ctrl + Z Cmd + Z
    リンクを挿入 Ctrl + K Cmd + K

    グーテンベルクとクラシックエディタ

    一部のWordPressユーザーは、今でもクラシックエディタプラグインを好んで使用しています。以下は、両者の比較です:

    側面 グーテンベルク クラシックエディタ
    編集アプローチ ブロックベース、モジュラー 単一のテキストエリア(TinyMCE)
    レイアウト機能 カラム、グリッド、フル幅セクション 線形コンテンツのみ
    メディア処理 インラインギャラリー、カバー画像、メディア+テキスト 基本的なメディア挿入
    将来の互換性 積極的に開発中、FSEサポート メンテナンスモードのみ
    プラグイン/テーマサポート 成長するブロックエコシステム 新しい開発の減少

    Classic Editorプラグインはまだ維持されていますが、WordPressの開発はブロックエディタに完全にコミットしています。新機能、テーマ、プラグインはますますGutenbergを最初にターゲットにしています。

    Gutenbergを拡張するブロックプラグイン

    コアブロックはほとんどのニーズをカバーしていますが、これらのプラグインは専門的な機能を追加します:

    • Flavor Plugin: タブ、アコーディオン、価格表、投稿カルーセルなどの高度なブロックを追加します
    • Flavor Plugin: より良い執筆体験のためのコンテンツ中心のブロックを提供します — プログレスバー、クリックでツイート、アラート
    • Flavor Plugin: アニメーションと高度なスタイリングオプションを備えたデザイン指向のブロックを提供します
    • Flavor Plugin: FSEテーマ専用に設計されたブロックでGutenbergを拡張します
    • Flavor Plugin: 動的コンテンツ表示のためのクエリとフィルターブロックを追加します

    ブロックプラグインを選択する際は、WordPressのコーディング基準に従い、クリーンなマークアップを生成するものを選んでください。重いJavaScriptフレームワークを読み込むプラグインは避けましょう。これらはGutenbergのパフォーマンスの利点を無効にします。

    効率的なブロック編集のための実用的なヒント

    リストビューを使用する

    複雑なページの場合、リストビュー(Shift+Alt+O)は不可欠です。ドキュメント全体の構造をツリーとして表示し、ネストされたブロックを簡単に選択したり、セクションを再配置したり、ページの階層を理解したりできます。

    一括操作のためにブロックをグループ化する

    複数のブロックを選択(最初をクリックし、Shift+クリックで最後を選択)してグループ化します。グループ化されたブロックは一緒にスタイルを適用したり、ユニットとして移動したり、パターンに変換したりできます。これは一貫したセクションを作成するのに特に便利です。

    誤って変更されないようにブロックをロックする

    重要なブロックをロックして、誤って移動したり削除されたりしないようにします。ブロックを右クリックして「ロック」を選択すると、変更が制限されます。これは、テンプレートや複数の編集者によって管理されるコンテンツに役立ちます。

    キーボードショートカットを積極的に使用する

    効率的なブロック編集と遅いブロック編集の違いは、しばしばキーボードショートカットに帰着します。最初に最も一般的な5つのショートカット(スラッシュコマンド、複製、削除、保存、元に戻す)を学び、その後、快適になったらレパートリーを広げていきましょう。

    Elementorや他のページビルダーとの比較については、私たちのElementorとGutenbergの比較や、より広範なページビルダー比較ガイドをご覧ください。Gutenbergとよく連携するテーマを選ぶ場合は、私たちのテーマ選択ガイドをお読みください。

    よくある質問

    Classic Editorをまだ使用できますか?

    はい。Classic Editorプラグインは引き続き利用可能で、WordPressチームによって維持されています。ただし、新機能はなく、メンテナンス更新のみが行われます。WordPressは、最新の機能や継続的な開発にアクセスするためにブロックエディタへの移行を推奨しています。

    GutenbergはすべてのWordPressテーマで動作しますか?

    Gutenbergは、クラシックテーマとブロックテーマの両方で動作します。クラシックテーマは投稿やページコンテンツ内でのブロック編集をサポートしています。ブロックテーマは、ヘッダー、フッター、テンプレート、グローバルスタイルのためのフルサイト編集もサポートしています。フルFSE体験を得るには、ブロックテーマが必要です。

    Classic Editorのコンテンツをブロックに変換するにはどうすればよいですか?

    Classic Editorの投稿をGutenbergで開くと、WordPressはコンテンツをClassicブロックでラップします。「ブロックに変換」をクリックすると、コンテンツを個別のブロックに変換できます。変換後は、複雑なレイアウトが手動で調整が必要な場合があるため、確認してください。

    GutenbergページはClassic Editorページより遅いですか?

    いいえ。Gutenbergは、Classic Editorの出力と同等かそれよりも軽量なクリーンなHTMLを生成します。ブロックエディタは、フロントエンドに大きなオーバーヘッドを追加しません。エディタインターフェース自体(管理画面内)はClassic Editorよりも多くのリソースを使用しますが、訪問者が体験するものには影響しません。

    コーディングなしでカスタムブロックを作成できますか?

    はい、ある程度は可能です。既存のブロックを配置することでカスタムブロックパターンを作成できます。ユニークな機能を持つ本当にカスタムなブロックを作成するには、JavaScript(React)開発が必要です。いくつかのプラグインはノーコードのブロックビルダーを提供していますが、コーディングされたソリューションに比べて制限があります。

    同期パターンとは何ですか?通常のパターンとはどう違いますか?

    同期パターン(以前の再利用可能ブロック)は、すべてのインスタンスでリンクされています。一つを編集すると、すべてが更新されます。通常のパターンはテンプレートであり、一つを挿入すると、他の使用に影響を与えずに修正できる独立したコピーが作成されます。一貫性が必要なコンテンツ(CTA、免責事項)には同期パターンを使用し、出発点として欲しいレイアウトには通常のパターンを使用してください。

    ブロックエディタの問題をトラブルシューティングするにはどうすればよいですか?

    一般的な解決策には、ブラウザキャッシュのクリア、プラグインを一つずつ無効化して競合を特定すること、一時的にデフォルトテーマに切り替えること、ブラウザの開発者コンソールでJavaScriptエラーを確認することが含まれます。ほとんどのブロックエディタの問題は、コアの問題ではなくプラグインの競合から生じます。

    フルサイト編集は本番使用に適していますか?

    2026年現在、フルサイト編集は安定しており、本番使用に適しています。機能セットは、各WordPressリリースごとに大きく成熟しています。ただし、ブロックテーマとパターンのエコシステムはまだ成長中です。広範な事前構築テンプレートが必要な場合、クラシックテーマオプションに比べて選択肢が限られているかもしれません。

    ブロック対応のWordPressテーマを見つける

    Gutenbergとフルサイト編集に最適化されたプレミアムWordPressテーマをブラウズしてください。クリーンなコード、高速なパフォーマンス、プロフェッショナルなデザイン。

    テーマをブラウズ →

よくある質問

GutenbergはElementorのようなページビルダーに取って代わるのですか?
Gutenbergはフルサイト編集機能を持って進化し続けていますが、Elementorのようなページビルダーはより高度なデザインオプションやウィジェットエコシステムを提供しています。多くのユーザーは、コンテンツ編集にはGutenbergを、複雑なページレイアウトにはページビルダーを使用しています。
Gutenbergを無効にしてClassic Editorを使用できますか?
はい。WordPress.orgからClassic Editorプラグインをインストールすると、以前の編集体験に戻ります。WordPressは2024年末までClassic Editorプラグインのサポートを約束しており、引き続き更新が行われます。
再利用可能なブロックとは何ですか?どうやって使いますか?
再利用可能なブロック(現在は同期パターンと呼ばれています)は、ブロックまたはブロックのグループを保存して、複数の投稿やページで再利用できるようにします。同期パターンに対する変更は、使用されているすべての場所で更新されます。ブロックを選択し、三点リーダーメニューをクリックして「パターンを作成」を選択することで作成できます。
特定のGutenbergブロックにカスタムCSSを追加するにはどうすればよいですか?
ブロックを選択し、サイドバーの「高度な設定」パネルを開いてCSSクラスを追加します。その後、Customizerの追加CSSセクションまたはテーマのスタイルシートで、そのクラスをターゲットにしたカスタムCSSを追加します。
WordPressのフルサイト編集とは何ですか?
フルサイト編集(FSE)は、Gutenbergを投稿コンテンツを超えて拡張し、ヘッダー、フッター、サイドバー、テンプレートファイルなど、サイト全体をデザインできるようにします。ブロックを使用してデザインするには、ブロックテーマが必要で、外観メニューからエディターにアクセスします。

この投稿をシェア

著者について

Erik Keller
Erik Keller

WordPressエキスパート

テーマ、プラグイン、WooCommerce開発に豊富な経験を持つシニアWordPressスペシャリスト。WordPressソリューションでビジネスの成功を支援することに情熱を注いでいます。

WordPressWooCommerceテーマ開発プラグイン開発パフォーマンス最適化

最新情報を入手

最新のWordPressのヒントとチュートリアルをメールで受け取りましょう。