WordPressのブロックの使い方の基本まとめ|追加・移動・よく使う定番ブロックと便利ワザを解説

WordPressのブロックエディタにおけるブロックの基本構造、追加方法、並び替え、よく使う定番ブロックをまとめたアイキャッチ画像

WordPressでブログ記事や固定ページを作成する際に標準搭載されている「ブロックエディタ(Gutenberg)」。初めて触れたときは「どこをクリックして文章や画像を入れればいいのか迷う」「改行したら別枠に分かれてしまった」と戸惑うことも少なくありません。

しかし、ブロックエディタは「見出し・文章・画像・リスト・ボタンなどのパーツ(ブロック)を1つずつ積み木のように並べる」という基本ルールさえ押さえてしまえば、HTMLやCSSの知識がなくても見栄えの良い記事を素早く作れる非常に便利な仕組みです。さらに最新のWordPress 7.2やWordPress 7.1でも、ブロック単位でのデザイン調整機能がますます進化しています。

本記事では、WordPressのブロックエディタの基本的な仕組みから、ブロックの追加・並び替え・削除の方法、記事作成でよく使う定番ブロック6選、そして執筆スピードをぐっと高める「スラッシュ(/)入力」や「リスト表示」の活用法まで図解付きで分かりやすく解説します。

ブロックエディタの基本の仕組み(記事はパーツの組み合わせ)

WordPressのブロックエディタにおける「ブロック」とは、記事を構成する1つひとつの独立した要素(パーツ)のことです。見出し、本文の段落、画像、箇条書きリスト、表、ボタンなどがすべて個別の「ブロック」として扱われ、それらを上から順番に組み合わせることで1本の記事が完成します。

従来のエディタとWordPressブロックエディタの違いを比較し、段落や見出し・画像が独立したパーツとして組み合わさる仕組みを示した図解
ブロックエディタの基本概念:1つの大きな入力欄にすべてを書き込む従来の方式と異なり、見出し・段落・画像などを独立したブロックとして積み重ねて構成する
比較項目 従来のエディタ(クラシックエディタ) ブロックエディタ(現在の標準)
記事の構成単位 1つの大きなテキスト入力枠に文章や画像を流し込む 段落・見出し・画像などが1つずつ独立した「ブロック」になる
順番の入れ替え 文章を選択して「切り取り&貼り付け」する必要がある 矢印ボタンやドラッグ操作で段落や章ごと簡単に入れ替え可能
レイアウト表現 2列配置や背景枠にはHTMLやショートコードの記述が必要 カラムブロックやグループブロックを選ぶだけで直感的に作成可能

この「すべてが独立したパーツになっている」という特徴のおかげで、「後から段落の順番を入れ替える」「特定の部分だけ背景色をつけて囲み枠にする」「見出しをリストに変換する」といった編集がパズル感覚で行えるようになっています。

ブロックを追加する基本のやり方(ボタン・改行・スラッシュ入力)

エディタ画面で新しいブロックを追加する方法は、大きく分けて3つのパターンがあります。最初は「+」ボタンから始め、慣れてきたらキーボードだけで完結する方法を取り入れると記事作成がぐっと快適になります。

WordPressでブロックを追加する3つの方法(プラスボタン、Enterキー改行、半角スラッシュコマンド)を比較した図解
ブロックを追加する3つの基本パターン:「+」ボタンからの選択、Enterキーによる新規段落作成、行頭の「/(半角スラッシュ)」コマンド

画面左上や本文エリアの「+」ボタンをクリックする

最も直感的で分かりやすいのが、画面上部の左端にある青い「+」ボタン(ブロック挿入ツール)、または編集中のエリアの右側・ブロックとブロックの間にマウスを合わせたときに表示される黒い「+」ボタンを押す方法です。

「+」ボタンをクリックすると、利用可能なブロックの一覧メニューが開きます。「見出し」「画像」「リスト」などのアイコンを目で見て選べるほか、検索窓に「表」「ボタン」などのキーワードを入力して目的のブロックを探すこともできます。

Enterキーで改行して新しい「段落ブロック」を作る

文章を入力している途中でキーボードの「Enterキー」を押すと、カーソルが次の行へ移動すると同時に、自動的に新しい「段落ブロック」が作成されます。通常の文章を書き進める際は、特別な操作をしなくてもEnterキーだけでどんどん段落を増やしていけます。

なお、「新しいブロックに分けるのではなく、同じ段落ブロックの中で改行だけしたい」という場合は、「Shift + Enter」を押すと枠内のまま改行できます。囲み枠の中や短い文をまとめたいときにとても重宝する操作です。

行頭で「/(半角スラッシュ)」を入力して高速で呼び出す

マウスに手を伸ばさずにブロックを素早く切り替えたいときに役立つのが、新しい空の段落の行頭で「/(半角スラッシュ)」を入力するショートカット機能です。「/」に続けてブロック名や英語のキーワードを打つと候補が表示され、Enterキーで即座にそのブロックへ変換されます。

// 行頭で入力すると便利なスラッシュコマンドの例
/h2        → 見出し(H2)ブロックを挿入
/h3        → 見出し(H3)ブロックを挿入
/image     → 画像ブロックを挿入(/画像 でも可)
/list      → リスト(箇条書き)ブロックを挿入
/table     → テーブル(表)ブロックを挿入
/columns   → カラム(横並び)ブロックを挿入

特に見出し(/h2 や /h3)と画像(/image)のスラッシュ入力を覚えておくだけでも、執筆時の手の移動が大幅に減り、文章作成に集中できるようになります。

記事作成でよく使う定番ブロック一覧と役割

WordPressには数十種類ものブロックが用意されていますが、すべてを覚える必要はありません。通常のブログ記事やWebページの制作では、まず以下の「6つの定番ブロック」の使い方を押さえておけば、読みやすく整った記事を自在に作成できます。

WordPressの記事作成で頻繁に使う段落・見出し・画像・リスト・カラム・グループの6つの定番ブロックの役割をまとめた図解
まず覚えておきたい定番ブロック6選:文章・見出し・画像・リストの基本4種に加え、レイアウトを整えるカラムとグループが活躍する

段落ブロック(通常の本文テキスト)

記事のベースとなる通常の文章を入力するブロックです。初期状態ではすべてこの「段落ブロック」から始まります。1つの段落ブロックに長文を詰め込みすぎず、話題の区切りや2〜4文ごとにEnterキーで段落を分けると、スマートフォンでも余白が生まれて読みやすくなります。

見出しブロック(H2・H3・H4で記事の骨格を作る)

記事の章タイトルや小見出しを作成するブロックです。ブロック上部のツールバーから「H2」「H3」「H4」などの見出しレベル(階層)を選択できます。

  • H2(大見出し):記事の大きな章の区切りに使います(目次のメイン項目になります)。
  • H3(中見出し):H2の章の中で、さらに話題を細分化したいときに使います。
  • H4(小見出し):H3の中をさらに補足・分類するときに使います。

※H1は「記事タイトル」自体に自動で使われるため、本文中の見出しは必ず「H2」から順番に使うのがSEOおよび文書構造の基本ルールです。

画像ブロック(写真・図解の挿入とalt設定)

記事内に写真や図解イラストを配置するブロックです。「アップロード」ボタンから直接ファイルを選択するか、パソコン上の画像ファイルをエディタ画面へドラッグ&ドロップするだけで簡単に挿入できます。画像を配置した後は、ツールバーから「キャプションを追加」で図の説明文を入れたり、右側の設定パネルにある「代替テキスト(alt属性)」に画像の内容を表すテキストを入力したりしておくと、読者にも検索エンジンにも親切な記事になります。

リストブロック(箇条書き・番号付きリスト)

要点を整理して伝えたいときに使う箇条書きブロックです。ツールバーのアイコンで「黒丸の箇条書きリスト(ul)」と「数字の番号付きリスト(ol)」をワンクリックで切り替えられます。また、リストの行頭で行を一段下げたい(入れ子リストにしたい)場合は、キーボードの「Tabキー」またはツールバーのインデントボタンを押すだけで階層化できます。

カラムブロック・グループブロック(横並びと囲み枠)

記事のレイアウトにメリハリをつけたいときに活躍するのが「カラム」と「グループ」です。

  • カラムブロック:「左側に画像、右側に説明文」や「メリット・デメリットの2列比較」など、複数のブロックを横並びに配置できます(スマートフォン表示では自動的に縦並びへ切り替わります)。
  • グループブロック:見出しと段落、あるいは複数のリストを1つの親枠としてひとまとめにするブロックです。グループ全体に背景色や枠線、内側の余白(パディング)を設定することで、記事のまとめ枠や補足ボックスをきれいに作成できます。

ブロックの移動・装飾・削除と知っておきたい便利ワザ

ブロックを配置した後に、「順番を入れ替えたい」「文字や背景に色をつけたい」「不要なブロックを消したい」といった場合は、画面内の3つの操作エリア(上部ツールバー・右設定サイドバー・左上リスト表示)を使い分けます。

ブロック上部のツールバー、画面右側の設定サイドバー、画面左上のリスト表示の役割と使い分けを整理した図解
3つの操作エリアの役割分担:ブロック上部のツールバーで基本操作、右側のサイドバーで色や余白の調整、左上のリスト表示で全体構造の管理を行う
操作したい内容 使う場所 具体的な操作手順
ブロックを上下に移動する ブロック上部ツールバー 「∧(上へ)」「∨(下へ)」矢印をクリック、または6つの点アイコンをドラッグ
太字・リンク・配置変更 ブロック上部ツールバー テキストを選択して「B(太字)」や「リンク(鎖マーク)」をクリック
別のブロックへ変換する ブロック上部ツールバー左端 ツールバー一番左のブロックアイコンを押して「見出し」や「リスト」へ変換
ブロックを複製・削除する ツールバー右端の「⋮」 三点リーダー「⋮(オプション)」を開き、「複製」または一番下の「削除」を選択
文字色・背景色・余白の調整 画面右側の設定サイドバー 右上の設定アイコンを開き、「ブロック」タブのスタイル(色・タイポグラフィ・寸法)で調整

長文記事の編集が圧倒的に楽になる2つの便利ワザ

  • 画面左上の「リスト表示(三本線アイコン)」を常時活用する:画面左上の斜め三本線アイコン(ドキュメント概観)をクリックすると、記事内のすべてのブロックがツリー状の目次のように一覧表示されます。カラムやグループの中に埋もれたブロックも一目で選択でき、リスト上でドラッグ&ドロップするだけで章ごとの入れ替えが一瞬で完了します。また、特定のブロックを一時的に非表示にする設定もここから素早く行えます。
  • よく使う装飾は「パターン(旧・再利用ブロック)」に登録する:毎回同じデザインの「まとめ枠」や「定型のお知らせボックス」を作る場合は、そのブロック(またはグループ)のツールバー右端「⋮」から「パターンを作成」を選んで保存しておきましょう。次回からは「+」ボタンのパターン一覧から数クリックで呼び出せるようになり、記事ごとのデザイン統一と時短が同時に叶います。

まとめ

WordPressのブロックエディタ(Gutenberg)の基本的な使い方と、記事作成を効率化する操作のポイントについて解説しました。最後に本記事の要点を振り返ります。

  • 記事は独立した「ブロック」の組み合わせで作る:見出し、段落、画像、リストなどがそれぞれ独立したパーツになっているため、後から順番を入れ替えたり部分的に装飾したりするのが簡単に行える。
  • ブロックの追加は「+」「Enter」「/」の3通り:最初は「+」ボタンから一覧で選び、慣れてきたら行頭で半角スラッシュ(/h2 や /image など)を入力すると手を止めずに執筆できる。枠内改行は「Shift + Enter」を使う。
  • まずは定番の6ブロックを押さえる:「段落」「見出し(H2〜H4)」「画像」「リスト」「カラム」「グループ」の6種類を使いこなせれば、視覚的に読みやすい記事レイアウトが作れる。
  • ツールバー・右サイドバー・リスト表示を使い分ける:上下移動や削除はブロック上部の「ツールバー」、色や余白の変更は「右側の設定サイドバー」、記事全体の構成整理や入れ替えは左上の「リスト表示」を使うと迷わず操作できる。

ブロックエディタは、一度基本の型に慣れてしまえば、文章の執筆から図解の配置、レイアウトの微調整まで直感的に進められる頼もしいツールです。まずは日々の記事作成の中で「/」入力や「リスト表示」からぜひ試してみてください。


eguchi.netをもっと見る

購読すると最新の投稿がメールで送信されます。