ブロックエディターを使いこなそう！WordPress Gutenberg完全ガイド

WordPressを初めて使うなら、まずブロックエディター（Gutenberg）の使い方をマスターするのがおすすめです。クラシックエディターに代わる新しい編集システムとして導入され、今ではWordPressでのWebサイト構築に欠かせない中核機能となっています。

ブロックエディターではブロックベースのデザインシステムを採用しており、初心者から上級者まであらゆるスキルレベルのユーザーが直感的に操作できるのが魅力。多彩な機能とデザイン性を理解すれば、コーディングなしでも理想的なWebサイトをカンタンに作れます。個人ブログを作りたい人も、本格的なWebサイトを構築したい人も、このガイドを読めばブロックエディターを最大限に活用できるようになります。

WordPressコミュニティでは、ブロックエディターを単なるコンテンツエディターではなく、サイト編集体験全体を変革する大規模プロジェクトの一部と位置づけ、コアチームはこの変革を実現するためのロードマップを次のように設定しています。

• より簡単な編集体験：WordPress 5.0で導入されたブロックエディターは、よりわかりやすく直感的なサイト構築アプローチを実現します。
• 高度なカスタマイズ：WordPress 5.9では、ブロックエディターの仕組みをベースにした全サイト編集機能やブロックパターン、ブロックディレクトリ、ブロックベースのテーマなどが追加されました。
• スムーズな共同作業：今後のアップデートでは、チームでの共同作業をさらに簡単で効率的にすることを目指しています。
• 多言語サポート：コアソフトウェア内で多言語Webサイトを直接構築できるよう開発が進められています。

ブロックエディターの基本的な使い方

ブロックエディターでは、投稿やページにある要素をすべて個別の「ブロック」として扱います。各ブロックはそれぞれ独立したパーツとして機能し、細かい設定も自由にカスタマイズできるのが特徴です。

ブロックエディターを使い始めるのは簡単。WordPressダッシュボードから固定ページまたは投稿→新規追加を選択するだけでOKです。

ブロックを追加したいときは、エディター左上の + アイコンをクリックすれば、カテゴリー別に整理された利用可能なブロック一覧が表示されるので、お好みのブロックをエディター内にドラッグ＆ドロップし、好きな位置に配置しましょう。

各ブロックは、要素上部に表示されるツールバーか、画面右側の設定パネルでカスタマイズできます。

デザイン作業をさらに効率化したいなら、ブロックパターンを活用するのがおすすめ。画像とボタンを組み合わせた列レイアウトなど、よく使うブロックの組み合わせが事前に用意されているので、一から作る手間が省けます。

技術に詳しい方であれば、独自のWordPressブロックやブロックパターンを作成し、コミュニティで共有することも可能です。

ブロックエディターとクラシックエディターの違いを徹底比較

ブロックエディターをより深く理解するために、ここではクラシックエディターとの違いを見てみましょう。

クラシックエディターは、TinyMCE WYSIWYG（What You See Is What You Get）HTMLエディターを搭載した昔ながらの編集ツールです。Microsoft Wordに似た馴染みのあるインターフェースで、太字、斜体、箇条書きなどの基本的なスタイリングが簡単に行えたのが特徴でした。

ビジュアルエディターモードでは組み込みの画像アップローダーからメディアを追加でき、テキストエディターモードに切り替えればカスタムHTMLコードを直接記述することも可能。

使いやすいと評判で安定した人気を誇っていましたが、デザインの自由度は今ひとつだったのも事実です。複雑なレイアウトや凝ったデザインを作ろうとすると、追加プラグインやHTMLコーディングが必須になることが多く、画像や動画の挿入もなかなか手間がかかり、編集中のコンテンツをリアルタイムでプレビューできないのも不便でした。

こうした制限を解消するために登場したのがブロックエディターです。

単一テキストボックスだけに依存するクラシックエディターと違い、ブロックエディターではテキストやメディアなどの要素をすべて個別の「ブロック」として扱うことでページデザインがはるかに視覚的で直感的になりました。

ドラッグ＆ドロップ機能のおかげで、ショートコードや追加プラグインなしでもカスタムレイアウトを作成でき、変更結果もリアルタイムで確認可能。さらに、豊富なブロックパターンを自分のニーズに合わせてカスタマイズすることも簡単です。

全サイト編集機能も大きな進化点で、ヘッダーやフッターなどのサイト全体の要素を投稿やページから直接デザインできるようになりました。技術に詳しいユーザーなら、カスタムブロックや再利用可能なテンプレートも作成可能です。

以下は、両エディターの主な違いをまとめた比較表です。

	ブロックエディター	クラシックエディター
エディターの見た目	直感的で使いやすいレスポンシブデザインと分かりやすい設定メニュー	Google Docsのようなシンプルなテキストベースのインターフェース
コンテンツ作成	多彩なブロックを組み合わせ、各ブロックごとに細かくカスタマイズ可能	白紙のキャンバスからテキストを入力して作成するシンプルな方式
使いやすさ	ドラッグ＆ドロップ操作が基本。必要に応じてコードも編集可能	Word感覚で使えるが、細かい調整には基本的なHTMLの知識が必要
機能性	多様なブロック、リアルタイムプレビュー、スキルレベルを問わない簡単カスタマイズ	基本的な文字装飾ツールを備えたシンプルなテキストエディター
メリット	柔軟なデザイン性、ドラッグ＆ドロップの直感操作、リアルタイムプレビュー、再利用可能なテンプレート	シンプルで馴染みやすいインターフェース、最小限の学習コスト
デメリット	慣れるまで少し練習が必要	デザインの自由度が低く、視覚的なレイアウトツールやモダンなカスタマイズ機能が不足

ブロックエディターはWordPress 5.0以降に標準搭載されており、もし古いバージョンを使っている場合でも、Gutenbergプラグインをインストールすれば利用可能です。ただ、セキュリティ面を考えるなら最新のWordPressバージョンへの更新を推奨します。

Hostingerに乗り換えれば、こうした更新作業の手間も省けます。HostingerのWordPress向けマネージドホスティングプランにはスマートWordPress自動更新機能が標準搭載されており、有効化すればサイトを常に安全で最新の状態に保てます。WordPressの更新にはブロックエディターの改良点が含まれることも多いので、スマート更新を活用すれば時間の節約にもなるでしょう。

ブロックエディターの基本操作

ここからはブロックエディターを使ってWebサイトを作るためのWordPress機能と手順を見ていきましょう。

ブロックの追加方法

ブロックエディターを開くと、最初からタイトルブロックが配置されており、新しいブロックを追加するにはいくつかの方法があります。

一番シンプルなのは、カーソルを置きたい位置に移動し、表示される黒い + アイコンをクリックする方法。そこから必要なブロックを選べます。目当てのブロックが見つからない場合はすべて表示をクリックして、すべてのオプションを確認しましょう。

別の方法として、左上隅にある青い + ボタンをクリックしてブロックインサーターを開く方法もあります。ここから必要なブロックを選んでクリックするか、エディター内の好きな位置に直接ドラッグして配置することもできます。

さらに素早く操作したい場合は、エディター内でスラッシュ（/）に続けてブロック名を入力する方法もおすすめ。候補が表示されたらEnterを押すだけで、そのブロックが追加される仕組みです。

ブロックは大きく分けて、テキスト、メディア、デザイン、ウィジェット、テーマ、埋め込みの6種類があります。もし必要なブロックが見つからない場合は、インサーターがWordPressプラグインリポジトリのGutenbergブロックディレクトリから追加オプションを提案してくれます。

ブロックのカスタマイズ方法

Gutenbergブロックのカスタマイズは非常に簡単です。エディターでブロックをクリックするだけで、そのブロック専用のツールバーが上部に表示されます。

ツールバーの内容は選択したブロックによって変わります。例えばテーブルブロックなら、テキスト配置の調整や行・列の追加などのオプションが表示される仕組みです。

さらに細かい設定を行いたい場合は、エディター右上の歯車アイコンをクリックしましょう。右サイドバーにパネルが開き、スタイル、サイズ、タイポグラフィーなどを細かく調整できます。上級者であれば、カスタムHTMLやCSSを追加して自分好みの変更を加えることも可能です。

ブロックの整理方法

ブロックエディターの大きな魅力は、要素を簡単に整理できるところです。ブロックを移動させたいときは、そのブロックをクリックしてツールバーに表示される6点アイコンを選び、好きな場所にドラッグするだけです。

複数のブロックをまとめて移動することも可能です。Shiftキーを押しながら最初のブロックをクリックし、さらに含めたい他のブロックも選択します。一時的にグループ化された状態になったら、6点アイコンを使ってすべてを一度にドラッグできます。

複数のブロックをグループ化する方法

例えば、ホームページにサービス紹介セクションを作る場合、各項目には画像、見出し、説明文などがあり、すべてきれいに整列させたいですよね。こんなときはブロックのグループ化が便利です。セクション全体を一つのユニットとして管理できます。

ブロックをグループ化するには、ブロックインサーターのデザインセクションからグループ、カラム、行、またはスタックブロックを使います。これらのデザインブロックはネスト（入れ子）構造を作り、レイアウトに明確な構成を与えてくれます。

例えば、カラムブロックは親ブロックとして機能し、その中にテキストや画像などの子ブロックを配置できます。子ブロックはエディター内で親ブロックの下にインデントされて表示されるので、構造が分かりやすくなります。

カラムブロックを使う手順は次のとおりです。

• ブロックインサーターを開き、デザイン→カラムを選びます。
• 事前にデザインされたレイアウトを選ぶか、自分でカスタムレイアウトを作成します。

• 各カラム内に表示される + 記号をクリックして、中身となるブロックを追加します。

• ツールバーやサイドバー設定を使って、レイアウトと配置を調整します。

サイドバーには内部ブロックはコンテンツ幅を使用するなどのオプションもあり、オンにすると子ブロックが親ブロックの幅に収まり、統一感のあるデザインが作れます。

見出しとテキストの追加方法

段落ブロックと見出しブロックを使えば、投稿やページに簡単にテキストを追加できます。

段落を追加するには、単にブロックエディター内で入力を始めるだけでOK。または、ブロックインサーターから段落を選択することもできます。

段落ブロックのツールバーには、テキスト配置、太字、斜体、リンク追加などの基本機能が揃っています。さらに脚注、ハイライト、インライン画像、添え字・上付き文字などの追加機能も利用可能。サイドバー設定ではテキストの色やフォント、サイズなどをカスタマイズして、より洗練された見た目に調整できます。

見出しブロックはコンテンツを整理し、訪問者や検索エンジンが内容の流れを把握しやすくするのに役立ちます。見出しを追加するには、いずれかのブロック追加方法で見出しを選び、ツールバーから見出しレベル（H1～H6）を選択します。

段落ブロックと同様に、見出しブロックもツールバーやサイドバー設定で配置や幅、その他の属性を自由に調整できます。

画像とメディアの追加方法

ブロックエディターを使用すれば、画像、音声、動画、ファイルなどのさまざまなタイプのメディアを投稿やページに簡単に追加できるだけでなく、以下のような動的なブロックも実装されています。

• メディア＆テキスト：メディアとテキストを並べて表示し、優れたストーリーテリングを可能にします。
• 画像ギャラリー：複数の画像を一つのエリアに表示し、ポートフォリオや写真サイトに最適です。
• カバー：画像や動画にテキストオーバーレイを追加し、目を引くヘッダーやハイライトに理想的です。

こうしたブロックを使用するには、ブロックライブラリから1つを選び、メディアをアップロードするか、メディアライブラリからファイルを選択するか、URLを追加して音声や画像などのファイルを追加することもできます。画像およびギャラリーブロックでは、時間を節約するために複数のファイルを一度にドラッグ＆ドロップ可能です。

各ブロックには独自の設定があります。例えば、画像ブロックでは角、境界線、半径を調整でき、メディア＆テキストブロックでは配置、モバイルスタッキング、色、タイポグラフィーのオプションがあります。

多くの視覚素材が必要な場合は、ブロックインサーターにアクセスしてメディア→Openverseをクリックし、オープンライセンスの画像コレクションから検索できます。

メディアの埋め込み方法

デフォルトでは、WordPressブロックエディターはさまざまなサービスのメディアタイプをサポートしています。

コンテンツを埋め込むための専用ブロックの例をいくつか紹介します。

• YouTube、TikTok、Vimeo、Dailymotion、TEDからの動画。&
• Instagram、Flickr、Imgur、Pinterestからの画像。
• Facebook、X、Bluesky、Redditからの投稿。
• Spotify、SoundCloud、Mixcloudからの音声ファイル。
• ScribdとIssuuからのドキュメント。
• Crowdsignalからの投票とアンケート。

ブロックエディターでメディアを埋め込む方法は次のとおりです。

• ブロックインサーターを開き、埋め込みセクションまでスクロールします。
• メディアソースを選択します。
• メディアURLを貼り付け、埋め込みを選択します。
• これで固定ページや投稿に埋め込まれたコンテンツが表示されます。

パターンの作成方法

かつて再利用可能ブロックと呼ばれていたパターンは、サイト全体で時間を節約し、一貫したデザインを維持するのに役立つ便利なコンテンツスニペットです。

パターンには2種類あります。

• 同期パターン：サイト全体で再利用できるコンテンツブロックで、相互に接続されています。同期パターンに加えた変更は、使用されているすべての場所で自動的に更新され、バナー、CTA、ヘッダーなどの一貫した要素に最適です。
• 非同期パターン：独立したコピーとして機能するため、非同期パターンを投稿やページに挿入しても、他のインスタンスには影響しません。デザインを再利用したいものの、特定のページのコンテンツをカスタマイズしたい場合に便利です。

パターンの作成方法は次のとおりです。

• ドキュメント概要→リスト表示をクリックします。Shiftキーを押しながら、パターンとして保存したいセクションを選択します。

• ツールバーのオプションボタンをクリックし、パターンを作成を選択します。

• パターンに名前を付け、同期または非同期にするかを決定し、作成をクリックします。

パターンを使用するには、ブロックインサーターを開き、パターン→マイパターンに移動します。または、エディターに直接スラッシュ（/）に続けてブロック名を入力することもできます。

既存のパターンの編集も簡単です。パターンをクリックしてオリジナルを編集をクリックします。変更を加えて保存をクリックします。

既存のパターンをすべて管理するには、エディターの右上隅にあるオプションボタンをクリックし、パターンを管理を選択します。こうすることでサイトエディターに移動し、デフォルトおよびカスタムパターンを編集または一括管理できます。

他に影響を与えずにページや投稿でパターンを使用したい場合は、ブロックのツールバーにある3点メニューを開き、パターンを切り離すを選択します。これによりブロックが独立し、変更がサイト全体に同期されなくなります。

詳細については、WordPressブロックパターンの使用とカスタマイズに関する解説記事をチェックしてみてください。

キーボードショートカットでブロックを操作する方法

ブロックエディターのキーボードショートカットを活用すれば、作業効率が大幅にアップします。マウス操作を減らしてコンテンツ作成に集中できるので、特に長文記事を書く場合に便利です。

以下は特に役立つショートカットの一覧です。完全なリストを見たい場合は、エディター右上の3点アイコンをクリックしてキーボードショートカットを選択しましょう。

macOSユーザーの場合は、Ctrlの代わりにCommand（⌘）、Altの代わりにOption（⌥）を使ってください。

操作	キーボードショートカット
すべてのショートカットを表示	Shift + Alt + H
グローバルショートカット
コマンドパレットを開く	Ctrl + K
ビジュアルエディターとコードエディターの切り替え	Ctrl + Shift + Alt + M
集中モードをオン	Ctrl + Shift + \
フルスクリーンモードを有効化	Ctrl + Shift + Alt + F
ブロックリスト表示を開く	Shift + Alt + O
設定サイドバーの表示/非表示	Ctrl + Shift + ,
エディターの次の部分に移動	Ctrl + ` または Shift + Alt + N
エディターの前の部分に移動	Ctrl + Shift + ` または Shift + Alt + P
最寄りのツールバーに移動	Alt + F10
変更を保存	Ctrl + S
最後の操作を元に戻す	Ctrl + Z
元に戻した操作をやり直す	Ctrl + Shift + Z
選択操作
入力中のテキストをすべて選択	Ctrl + A
選択をクリア	Escape
ブロック操作
選択したブロックを複製	Ctrl + Shift + D
選択したブロックを削除	Shift + Alt + Z
選択ブロックの前に新ブロックを挿入	Ctrl + Alt + T
選択ブロックの後に新ブロックを挿入	Ctrl + Alt + Y
選択を削除	Delete または Backspace
選択ブロックを上に移動	Ctrl + Shift + Alt + T
選択ブロックを下に移動	Ctrl + Shift + Alt + Y
新段落追加後にブロックタイプを変更	/
テキスト書式設定
選択テキストを太字に	Ctrl + B
選択テキストを斜体に	Ctrl + I
選択テキストをリンクに変換	Ctrl + K
リンクを削除	Ctrl + Shift + K
選択テキストに下線	Ctrl + U
選択テキストに取り消し線	Shift + Alt + D
選択テキストをインラインコードに	Shift + Alt + X
選択見出しを段落に変換	Shift + Alt + 0
段落や見出しをH1～H6に変換	Shift + Alt + 1-6

ブロックリスト表示の使い方

ブロックエディターのブロックリスト表示機能は、記事やページ内のすべてのブロックをツリー構造で表示してくれます。特に入れ子になったブロックがたくさんある長文コンテンツを扱うときに重宝します。

ブロックリスト表示を開くには、エディター左上のドキュメント概要アイコン（3本の水平線）をクリックするか、ショートカットShift + Alt + Oを使います。リストから任意のブロックをクリックすれば、どれだけ深く入れ子になっていても、そのブロックに直接ジャンプできるので便利です。

ブロックリスト表示の隣にはアウトラインタブもあり、見出しのタイトルと階層構造を一目で確認できます。これはコンテンツが論理的に流れているか、見出しレベルが適切に使われているかをチェックするのに最適なツールです。特にSEO対策を意識したライターやコンテンツ作成者には欠かせない機能と言えるでしょう。

全サイト編集でブロックをカスタマイズする方法

ここまでは個別のページや投稿でブロックエディターを使う方法を見てきましたが、WordPress 5.9以降では「サイトエディター」を使ってサイト全体のデザインを統一的に編集することも可能になりました。

サイトエディターにアクセスするには、WordPressダッシュボードから外観 → エディターに進みます。ここではWebサイトのさまざまな部分を一元的にカスタマイズできます。

• ナビゲーション：メニューにカスタムリンクやサイトロゴなどの要素を追加・編集できます。
• スタイル：テーマのスタイルセットを選択し、サイト全体の色使い、フォント、レイアウトを調整できます。
• ページ：サイトエディター内で直接ページコンテンツを編集できるので、画面を切り替える手間が省けます。
• テンプレート：ブログのホームページや投稿ページなど、特定のページタイプ用のレイアウトを作成できます。テーマによっては追加のレイアウトオプションも用意されています。
• パターン：サイト全体で使う同期パターンを一括管理できます。

より完全な編集を実現するために、ページや投稿の内容を編集しながらテンプレートをプレビューすることも可能です。右サイドバーの投稿タブを開き、テンプレート → テンプレートを表示を選択すれば、コンテンツが全体的なページレイアウトにどう収まるかを確認できます。

注意点として、全サイト編集機能はWordPressブロックテーマを使用している場合のみ利用できます。この機能を活用したい場合は、以下のようなブロックテーマへの切り替えを検討してみてください。

• Twenty Twenty-Four：クリーンでモダンなレイアウトが特徴のWordPressデフォルトテーマです。
• Ona：さまざまなニーズに対応した子テーマも用意されています。
• Neve FSE：人気テーマの全サイト編集対応版で、あらゆるタイプのWebサイトに適しています。
• Tove：40以上のブロックパターンが同梱されており、素早くサイトをカスタマイズできます。
• Bricksy：豊富なブロックパターンに加え、WooCommerceにも対応しています。

コマンドパレットの使い方

コマンドパレットは、ブロックエディターでの作業効率を格段に高めてくれる便利なツール。検索バーを使ってさまざまな操作にすばやくアクセスできるので、メニューを探し回る手間が省けます。

この機能を使うには、ショートカットCtrl + K（MacではCmd + K）を押すか、インターフェース上部のバーをクリックします。

コマンドパレットを開くと、検索バーと複製、削除、後に追加などのよく使うタスクのリストが表示されます。探しているタスクに関連するキーワードを入力すれば、関連するオプションがすぐに表示されるので、操作がぐっと速くなります。

コマンドパレットを活用すれば、こんなことが素早くできます。

• タイトルを入力するだけで特定の投稿やページに直接ジャンプ
• 新しい固定ページや投稿をすぐに追加
• フルスクリーンモードを終了してWordPress管理画面に戻る
• 集中モードへの切り替え
• 別タブでの作業プレビュー表示

ブロックエディターを無効にする方法

ブロックエディターに慣れるのが難しい場合は、プラグインを使うか、functions.php fileファイルを編集して一時的に無効にする方法もあります。

最も簡単なのは、有効化するだけでブロックエディターを完全に無効にできるクラシックエディタープラグインのインストールです。より細かい制御が必要ならDisable Gutenbergプラグインを使えば、特定の権限、投稿タイプ、テンプレートのみでブロックエディターを無効にすることもできます。

テクニカルな方法としては、WordPressテーマのfunctions.phpファイルに直接コードを追加することも可能です。

Hostingerのhパネルを使った方法は次のとおりです。

• hPanelのファイルマネージャーにアクセスし、public_html → wp-content → themesフォルダを開きます。
• 現在使用中のテーマのフォルダに入り、functions.phpファイルをダブルクリックして開きます。
• ファイルの最後の行の前に次のコードを追加します。

add_filter('use_block_editor_for_post', '__return_false');

ファイルを保存して閉じ、WordPressサイトを再度読み込みます。

コード編集に不安がある場合は、Code Snippetsプラグインを使うと安全です。

• プラグインをインストールして有効化し、ダッシュボードのスニペット → 新規追加に進みます。
• スニペットに名前を付け、上記のコードをFunctions PHPタブに貼り付けます。管理エリアでのみ実行するオプションをチェックします。

変更を保存して有効化をクリックします。

ただし、現在ブロックエディターはWordPressの標準エディターなので、無効化はあくまで一時的な対応策と考えましょう。ブロックエディターは継続的に機能が強化されているので、慣れれば作業効率が大幅に向上する可能性が高いです。

まとめ

ブロックエディターはWordPressでのWebサイト作成・デザイン方法を根本から変えました。さまざまなサイト要素に対応する柔軟なブロックを使うことで、直感的に投稿やページを構築できる仕組みを提供しています。

クラシックエディターの制限を克服したドラッグ＆ドロップインターフェースは、技術レベルを問わずすべてのユーザーにとってカスタマイズを簡単にしました。同期パターンによってサイト全体のデザイン一貫性を保ちつつ、サイトエディター機能では追加プラグインなしでテーマを直接カスタマイズできるようになりました。

このガイドがブロックエディターの基本操作とWordPress体験向上のヒントを理解する助けになれば幸いです。さらに詳しいテクニックを知りたい方は、ブロックエディターでWebサイトを作成する方法の解説記事も参考にしてみてください。

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

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。