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

1. WordPressブロックエディタの概要

WordPressは世界中で広く利用されているCMS（コンテンツ管理システム）ですが、2018年末にリリースされたWordPress 5.0以降、標準エディタが大きく変わりました。旧来の「クラシックエディタ」に代わり、新しく登場したのが「ブロックエディタ（Gutenberg）」です。

ブロックエディタでは、テキスト、画像、見出しなどの要素を「ブロック」として扱い、ドラッグ＆ドロップで自由に配置したり編集したりできます。まるでパズルのようにコンテンツを組み立てられるため、初心者でも直感的に記事を作成しやすいのが大きな特徴です。

ブロックエディタとは何か（基本概念）

• ブロック単位でコンテンツを扱う
  従来のテキストエディタのように、本文全体をひとつのエリアとして管理するのではなく、「段落ブロック」「画像ブロック」「リストブロック」など、パーツ（ブロック）ごとに区切って編集する仕組みです。
• 配置やスタイル変更が簡単
  ブロックごとにスタイルやレイアウトを変えられるため、ページ全体の見た目を整える作業が容易です。
• 実際の表示デザインを確認しながら操作できる
  編集画面は、一般的に記事公開時の実際の表示と同じデザインとなっているため、初心者でもページ全体のデザインを感覚的に理解しやすくなっています。
• デザインの変更を直感的に行える
  HTMLやCSSの知識がなくても、ブロックごとに用意された様々なオプションを設定するだけで、見た目を簡単に変えられます。

使用する利点とテキスト化の能力

ブロックエディタは、初心者でも直感的にテキストコンテンツを作成しやすい利点があります。また、細かいHTML編集にも対応しており、「実際に表示デザインを確認しながらレイアウトを仕上げていく」という流れが可能です。WordPress初心者の方が記事の執筆に慣れるうえで、とても心強い機能といえます。

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

まずは、ブロックを追加したり、移動・削除したりする操作方法を覚えましょう。これらを把握しておくだけでも、日々の作業がぐっと効率化します。

ブロックを追加する方法

1. 「+」ボタンを使用した追加方法
   新規の記事作成画面や既存の記事編集画面を開くと、ブロックの追加ボタン（「+」マーク）が各所に表示されます。そこをクリックすると、使用できるブロックの一覧が展開されます。
   • 編集画面の上部に表示されるツールバー内の「+」マークをクリックしてもブロックを選択可能です。
2. 小さい「+」マーク
   記事の途中にカーソルを置くと、行の端に小さい「+」マークが表示される場合があります。
   • その「+」マークをクリックすると、即座にブロック追加画面が開きます。

ブロックの移動と削除

1. ドラッグアンドドロップによる移動
   追加したブロックの左側にある上下矢印やドラッグ用のマークをつかんで、ドラッグ＆ドロップでブロックを好きな場所に移動できます。
   • リストや画像をあとで上に持ってきたいときなど、マウス操作だけでサクッと動かせます。
2. 削除する方法
   不要になったブロックは、ブロックツールバーの「︙」（縦の三点リーダー）をクリックして、「ブロックを削除」を選択すると消去できます。
   • 誤って削除してしまった場合でも、上部ツールバーの「戻る」ボタンで復元可能です。

3. 代表的なブロックの機能と特徴

ブロックエディタには実に多彩なブロックがありますが、ここでは代表的なものを紹介します。初心者の方はまず、よく使う基礎ブロックを覚えるところから始めるとスムーズです。

段落ブロック

• 特徴
  文字通り「段落」を入力するためのブロック。文章を書き進めるときのメインとなるブロックです。
• 使い方
  新規ブロックを追加すると、デフォルトで段落ブロックが選択されます。テキスト入力を続けるだけでOK。文章量が増えたら、改行ごとに自動でブロックが追加される感覚で使えます。

見出しブロック

• 特徴
  段落よりも文章の構造をはっきり示すブロック。SEO的にも重要で、記事の目次としても役立ちます。
• 使い方
  ブロックツールバーで「見出しレベル（H1, H2, H3など）」を選択可能。一般的に、本文中はH2以降（H2, H3…）を使い分けて、読みやすい記事構造に仕上げます。

画像の追加方法とセッティング

• 特徴
  記事内に画像を挿入するためのブロック。アップロードやメディアライブラリからの利用ができます。
• 使い方
  1. 「画像ブロック」を選択
  2. 「アップロード」「メディアライブラリ」「URLから挿入」などのオプションで画像を選ぶ
  3. 代替テキスト（alt属性）やキャプションを入力すると、SEOやアクセシビリティに効果的です。
• 画像の配置やサイズ調整
  ブロックツールバーやサイドパネルで、画像の横幅やリンク先、配置（左寄せ、中央寄せ、右寄せ）を変えられます。

リストブロックの特徴と使用法

• 特徴
  Bullet List（箇条書き）やNumbered List（番号リスト）などを作成するブロック。文章の要点を整理するときに便利です。
• 使い方
  ブロックツールバーからリストアイコンを選択すると、すぐに箇条書きが作成できます。
  • 行頭の「●」や「1.」は自動付与
  • 項目を増やしたいときはEnterキーで改行すれば新しいリスト項目が追加されます。

4. 記事の全体操作流れ

ここでは、実際に記事を作成・公開する一連の流れをまとめます。初めて投稿する際も、この手順を押さえておけば迷わず進められます。

記事作成の流れ

1. WordPressダッシュボードへ移動
   ブラウザでWordPressサイトにアクセスし、ログインページから管理画面（ダッシュボード）へ。
   • URLの例: https://yoursite.com/wp-admin など
2. 左サイドバー内の投稿から新規投稿を選択
   新規投稿を選択するとブロックエディタが表示されます。
3. 基本情報の設定
   • 記事タイトル: 記事の主題をわかりやすく。H1相当なので最重要キーワードを含めるとよいです。
   • カテゴリー: 投稿画面の右サイドバーから設定。記事のジャンル分けに必須。
   • タグ: 関連キーワードを登録。読者が関連コンテンツを見つけやすくなります。
   • アイキャッチ画像: 記事全体の代表イメージ。テーマやSNSでも表示されます。
4. ブロックを追加しながら本文を作成
   • 段落や見出しブロックを中心に文章を構成
   • 必要に応じて画像やリストブロックなどを挿入し、視覚的にわかりやすい記事へ
5. プレビューと公開ボタン
   • プレビュー: 記事を公開前にチェック。デザイン崩れや誤字などの確認に便利
   • 公開: 記事が完成したら、公開ボタンで実際にWeb上に反映。公開後も編集可能です。

5. 最適化のテクニックとコツ

ブロックエディタには、記事作成をより効率的かつ高品質にするための機能が多数備わっています。ここでは初心者でもすぐ実践できるテクニックを紹介します。

ショートコードの使用法

WordPressでは、機能拡張用の「ショートコード（shortcode）」を使うことで、問い合わせフォームやギャラリーなど、複雑な要素を簡単に埋め込めます。

• 例: [contact-form-7 id="123" title="お問い合わせ"]
• ブロックエディタ内では「ショートコードブロック」にペーストするだけで完了
• プラグイン次第でさまざまなショートコードが用意されているので要チェック

ブロックパターンの使い分け方法

ブロックパターンとは、複数のブロックがひとつにまとまったテンプレートのようなもの。

• 例: 「2カラムレイアウト」「特徴比較表」など
• 何度も使うレイアウトやデザインをパターン化しておけば、ワンクリックでサッと呼び出せるので非常に便利です。

内蔵のスタイルを利用した記事作成

ブロックエディタには、デフォルトで文字色や背景色変更などの簡単なスタイル変更機能が含まれています。

• 引用ブロックのデザイン変更
• テーマが備えるカスタムスタイルの利用
• カラフルなボックス風の装飾など、見た目を整える工夫が手軽にできます。

コード例: テーマ内で独自ブロックを追加する場合

以下のように functions.php などでカスタムブロックを登録し、テーマやプラグインと連携させると、独自のブロックを使った表現も可能です。
※上級者向けのカスタマイズです。

<?php
function my_custom_block_init() {
  // register_block_typeでカスタムブロックを登録
  register_block_type(
    __DIR__ . '/blocks/my-custom-block/build',
    array(
      'editor_script' => 'my-custom-block-editor-script',
      'editor_style'  => 'my-custom-block-editor-style',
      'style'         => 'my-custom-block-style'
    )
  );
}
add_action('init', 'my_custom_block_init');

6. 結論

ブロックエディタの便利さと可能性

ブロックエディタは、文字通りブロックの組み合わせで記事を構成できるため、ドラッグ＆ドロップ操作をメインにレイアウトが組み立てやすい利点があります。プログラミングスキルがなくても魅力的なデザインを実現できるので、WordPress初心者にはうってつけです。

初心者に必要な基礎知識

• ブロックの追加・移動・削除
• 段落／見出し／画像／リストなど、代表的なブロックの使い方
• 記事公開までの流れ（タイトル・カテゴリー設定、プレビュー、公開）

これらを押さえておけば、まずは問題なくブログやWebサイトの記事を更新できるようになります。

トレンドを踏まえた利用法の学習推奨

WordPress本体やテーマ、プラグインは日々進化しており、ブロックエディタも機能が追加され続けています。

• 新たなブロックプラグインを導入してさらに表現力アップ
• テーマやプラグインの更新情報をチェックして最新機能を活用
• 再利用ブロックやブロックパターンを自分用にカスタマイズ

こうした知識を積み重ねることで、より洗練されたコンテンツ制作が可能になります。慣れてきたら、自分なりにブロックエディタを拡張してみるのも面白いでしょう。

まとめ

本記事では、WordPressのブロックエディタを初めて触る初心者向けに以下のポイントを紹介しました。

1. 導入と概要: ブロックエディタのメリットと基本概念
2. 基本操作: ブロックの追加・移動・削除の手順
3. 代表的なブロックの紹介: 段落、見出し、画像、リストなどの使い方
4. 記事作成のフロー: タイトル・カテゴリー設定、プレビュー、公開手順
5. 最適化テクニック: ショートコード・ブロックパターンの活用、カスタムブロック導入の可能性

まずはここで紹介した基礎をしっかり押さえて、実際に記事を書いてみましょう。慣れてきたら、ブロックパターンの活用や独自のスタイル調整にも挑戦してみると、記事のクオリティや個性がさらに引き立ちます。ぜひ、WordPressブロックエディタの使い方に慣れて、あなたのサイトを充実させてください。