BLOG

ワードプレスのブロックエディター(gutenberg)の解説

ブロックエディターの概要

ブロックエディタは、WordPressの最新バージョンに組み込まれたテキストとメディア編集インターフェースです。このエディターは、ウェブページやブログ記事の作成・編集に使用されます。一般に「ブロックエディタ」として知られていますが、開発段階では「Gutenberg(グーテンベルク)」という名前でも呼ばれています。

このエディタは、WordPress 5.0以降に標準で付属しているので、2019年以降にWordPressをセットアップしたユーザーは、既にこのエディタがデフォルトとして設定されているはずです。

最大の特点:直感的な操作性

ブロックエディタの主な機能は、各種コンテンツ(見出し、画像、テキストなど)を「ブロック」として個別に管理することです。多種多様なブロックタイプがあり、それらを自由に配置、移動、編集することができます。この機能のおかげで、ブロックエディタには以下のような多くの利点があります。

  • ブロックごとに容易に移動、複製、削除が可能
  • HTMLやCSSの専門知識がなくても多様なレイアウトとデザインが可能
  • ショートカットが多数用意されており、編集作業が効率的に行える

HTMLやCSSといったウェブデザインの専門的な知識がない人でも、ブロックを用いて自由に、かつ直感的にページを設計・編集できるのがブロックエディタの最も重要な特徴と言えるでしょう。

ブロックエディターの機能

ブロックエディタはWordPressの編集インターフェイスに組み込まれており、以下のような主要な部分で構成されています。

  1. ツールバー: ブロックの追加や、操作の取り消し・再実行、ブロック一覧などがここでできます。
  2. 保存/公開オプション: 下書きとして保存したり、プレビューを見たり、記事を公開する設定などがあります。
  3. メイン編集エリア: 記事の主要なコンテンツ(テキスト、画像など)を編集する場所です。
  4. ブロック設定メニュー: 各ブロックの細かい設定が行えます。
  5. 設定パネル: 記事全体や特定のブロックの詳細な設定を行います。
  6. パンくずリスト: 現在編集中のブロックの階層を表示します。

設定パネルには、「投稿」タブと「ブロック」タブがあり、それぞれの作業内容に応じて切り替えて使用します。

ブロックエディタの具体的な使い方

タイトルの設定: タイトル入力欄が最初にあり、そこに記事のタイトルを入力します。

見出しの作成: 「+」アイコンを押して、「見出し」ブロックを選ぶと見出しが作れます。見出しのレベル(H1, H2, H3など)はブロック設定メニューで調整できます。

通常テキストの追加: 「段落」ブロックを使用して、通常のテキストを追加します。新しい段落はEnterキーで作成でき、改行だけをしたい場合はShift+Enterを使用します。

テキストの装飾: ブロック設定メニューを使って、太字やイタリック、テキストリンクなどの装飾が可能です。

アンカーリンク: 特定の部分に直接リンクするための「アンカーリンク」も設定できます。この場合、リンク元とリンク先の両方で設定が必要です。

フォントと色の設定: 右側の設定パネルを使って、フォントサイズやテキスト色、背景色などを調整できます。

リスト作成: 「リスト」ブロックを使用して、箇条書きまたは番号付きリストを作成できます。

画像の挿入: 「+」アイコンから「画像」ブロックを選び、画像をアップロードまたは選択して挿入できます。

その他のブロック: 他にも「引用」、「ギャラリー」、「動画」、「表」など、多種多様なブロックが利用できます。

投稿設定の最終確認: 投稿する前には、カテゴリ、タグ、アイキャッチ画像などの設定を確認してください。

ブロックエディタとクラシックエディタの違い

ブロックエディタのメリット

  1. 執筆速度の向上: ブロックエディタを使用すると、テキストやメディア、その他の要素を素早く配置できます。
  2. 高度な機能: ユーザーは多くの便利な機能にアクセスすることができます。

クラシックエディタの特性

  • コーディング寄り: クラシックエディタは、ライティングよりもコーディングに近い形での編集が必要です。
  • ショートコード依存: 多くの機能やデザイン要素はショートコードを使用して実装されます。これは、HTMLコーディングと大差なく、時間がかかる場合があります。

ブロックエディタの使いやすさ

  • 選択ベースの編集: ブロックエディタでは、ブロックを選択するだけで容易に編集ができます。
  • リアルタイムプレビュー: 編集中にもそのままの表示が確認できるため、プレビューする手間が省けます。

付加機能

  • テンプレート管理: ブロックエディタには、繰り返し使用するブロックを保存しておく「再利用ブロック」という機能があります。
  • 定型文機能: あらかじめ設定した複数のブロックの組み合わせ(ブロックパターン)を呼び出すことができます。

拡張性

  • クラシックエディタでは、独自に作成された機能を追加するのは困難です。
  • ブロックエディタでは、WordPressの標準化により、サードパーティのプラグインで新しい機能やブロックを簡単に追加できます。

以上の点を考慮すると、ブロックエディタは現代のウェブ執筆においてより効率的で、多機能な選択肢と言えるでしょう。

ブロックエディターのデメリット

ブロックエディターには以下のようなデメリットも存在します。

  1. 適応に時間がかかる: クラシックエディタに慣れ親しんでいる人々にとって、新しいブロックエディタのインターフェースに適応するのは時間がかかる可能性があります。
  2. 一部の非対応テーマやプラグイン: 現在でも、すべてのWordPressテーマやプラグインがブロックエディタに対応しているわけではありません。
  3. 表のデザイン制限: ブロックエディタでの表のデザインは、多少制限されており、カスタマイズの自由度が低いと感じることがあります。

説明と詳細

  • 適応期間: クラシックエディタとブロックエディタは、編集インターフェースが大きく異なるため、旧式のエディタに慣れている人は新しいシステムに馴染むのに時間がかかる可能性があります。
  • テーマとプラグインの互換性: 特に有料のテーマでは、多くの場合、クラシックエディタとブロックエディタの両方が使えますが、一部の特定の機能(例えば、ランキング生成ツールや特定の表など)は制限されていることがあります。
  • デザインの自由度: ブロックエディタで表を作る場合、その見た目はあまりカスタマイズできません。もちろん、CSSを直接編集することで一定の調整は可能ですが、この点ではクラシックエディタが使いやすいと言えます。

記事で使われる表が多い場合は、クラシックエディタを使用するか、ブロックエディタ内で「クラシックブロック」を使うことが推奨されています。これにより、表のデザインや機能についてより柔軟な選択が可能になります。

ブロックエディターの将来性


2018年からGutenbergブロックエディタは急速に発展しており、フルサイト編集の導入もされ、WordPressのエコシステム内でその重要性は増していくでしょう。

この記事では、ブロックエディタの基本概念から様々な機能に至るまで広範にわたる内容を紹介しました。Gutenbergブロックエディタはこれからも進化を続ける予定なので、ぜひ使ってみてはいかがでしょうか。