WordPressブロックエディター(Gutenberg)の基本操作と便利なショートカット
WordPress 5.0から標準搭載された「ブロックエディタ(Gutenberg)」は、文章や画像、見出しなどの要素を「ブロック」という単位で組み合わせてページを作成する直感的なエディタです。
かつての旧エディタ(クラシックエディタ)と異なり、HTMLやCSSの専門知識がなくても、マウス操作と簡単なキーボード操作だけでプロのようなレイアウトを構築できるのが最大のメリットです。
本記事では、ブロックエディタの基本的な操作方法から、記事執筆のスピードを爆発的に高める便利ショートカットまでを分かりやすく解説します。
1. ブロックエディタの基本構造と画面の見方
記事編集画面を開くと、主に3つのエリアで構成されています。
- 上部ツールバー(画面最上部)
- 「+」ボタン: ブロックの追加(ブロック挿入ツール)
- 矢印アイコン: 元に戻す(Undo)/ やり直す(Redo)
- リストアイコン: 文書構造(見出し数や文字数)の確認
- 「公開」ボタン: 記事の保存・公開設定
- メイン編集エリア(中央)
- タイトルや見出し、本文を入力する作業エリアです。
- 設定サイドバー(画面右側)
- 「投稿」タブ: パーマリンク、カテゴリー、アイキャッチ画像などの記事全体の設定
- 「ブロック」タブ: 現在選択しているブロック個別の細かな設定(文字サイズ、色、配置など)
2. よく使う基本ブロック5選と使い方
文章を作成する際によく使う基本ブロックの追加・設定方法です。
① 見出しブロック
記事の目次や構造を作るために必須のブロックです。
- 追加方法:
段落ブロックで/hと入力するか、上部の「+」から「見出し」を選択します。 - 使い方: ツールバーで H2 / H3 / H4 などの見出しレベルを変更します(※1つの記事内でH1はタイトルのみに使用するため、本文内はH2から順番に使います)。
② 段落ブロック
通常のテキストを入力するための標準ブロックです。
- 使い方: Enterキーを押すたびに自動で新しい「段落ブロック」が生成されます。
- 装飾: テキストを選択して文字の太字化(B)、斜体、リンク挿入(
Ctrl + KまたはCmd + K)が行えます。右側のサイドバーから「文字色」や「背景色」の変更も可能です。
③ 画像ブロック
写真やイラストを挿入します。
- 追加方法: 「+」から「画像」を選択し、「アップロード」または「メディアライブラリ」からファイルを選択します。
- 使い方: 画像の角をドラッグしてサイズ調整したり、キャプション(説明文)を入力したりできます。
④ リストブロック
箇条書き(箇条書きリスト)や番号付きリストを作成します。
- 追加方法: 行頭に
*または1.と入力してスペースを押すか、「+」から「リスト」を選択します。 - 使い方: ツールバーで「番号なしリスト」と「番号付きリスト」を切り替えられます。
⑤ 引用ブロック
他サイトや書籍からの文章を引用する際に使用します。
- 追加方法: 行頭に
>と入力してスペースを押すか、「+」から「引用」を選択します。 - 使い方: 引用文と、引用元(出典URLや名称)を明記して記述します。
3. 執筆スピードを倍増させる便利ショートカット&入力記号
マウスで「+」ボタンを押さなくても、キーボード操作だけでブロックを瞬時に呼び出すテクニックです。
スラッシュ(/)による高速ブロック呼出
新しい行で /(スラッシュ) を入力し、続けてブロック名を入力すると、メニューから選択できます。
/h$\rightarrow$ 見出し/imgまたは/画像$\rightarrow$ 画像/listまたは/リスト$\rightarrow$ リスト/tableまたは/表$\rightarrow$ テーブル(表)/quoteまたは/引用$\rightarrow$ 引用
マークダウン(Markdown)記法による自動変換
半角記号を入力してスペースを押すだけで、自動的に該当ブロックへ変換されます。
##+ スペース $\rightarrow$ H2見出し###+ スペース $\rightarrow$ H3見出し*または-+ スペース $\rightarrow$ 箇条書きリスト1.+ スペース $\rightarrow$ 番号付きリスト>+ スペース $\rightarrow$ 引用
覚えておくべきキーボードショートカット一覧
| 操作 | Windows | Mac |
|---|---|---|
| 下(上)に新しいブロックを追加 | Ctrl + Enter(Ctrl + Shift + Enter) | Cmd + Enter(Cmd + Shift + Enter) |
| 選択中のブロックを複製 | Ctrl + Shift + D | Cmd + Shift + D |
| 選択中のブロックを削除 | Shift + Alt + Z | Control + Option + Z |
| 段落内で改行(ブロックを分けずに改行) | Shift + Enter | Shift + Enter |
| リンク挿入 | Ctrl + K | Cmd + K |
| サイドバーの表示 / 非表示切り替え | Ctrl + Shift + , | Cmd + Shift + , |
4. ブロック操作の応用テクニック
① ブロックの移動・並べ替え
ブロックの左側に表示される「▲ ▼」アイコンで1段ずつ上下移動できます。また、6つの点マーク(グリップ)をドラッグ&ドロップすることで、自由な場所へ移動できます。
② 再利用ブロック(パターン / 同期パターン)の活用
「お問い合わせ案内」や「定型文」など、複数の記事で使い回すコンテンツは、右クリックメニューから「パターンを作成(同期)」に登録しておくと便利です。1箇所修正すれば、サイト全体の該当ブロックが一括更新されます。
③ ブロックのグループ化
複数のブロックをまとめて枠線で囲んだり、背景色をつけたりしたい場合は、対象のブロックを複数選択して「グループ化」を行います。
まとめ
ブロックエディタは、最初は操作に戸惑うかもしれませんが、「スラッシュ入力(/)」と「マークダウン記法」 を覚えるだけで執筆スピードが格段に向上します。
- 見出し・段落・画像・リストの基本ブロックを覚える
- キーボード操作でスラッシュ(/)や「##」を使って素早くブロックを呼び出す
- よく使う定型文は「同期パターン(旧再利用ブロック)」に保存する
これらの操作をマスターして、ストレスなく快適に記事執筆を進めましょう!