2026年5月20日

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

カスタマイズ

はじめに

Gutenbergブロックエディタ（WordPress 5.0以降の標準エディタ）は、コンテンツをブロック単位で組み立てる編集UIです。よく使うブロックとショートカットを覚えることで、記事作成の効率が大幅に上がります。

症状・原因

Gutenbergの使い方が分からずクラシックエディタに戻したい
特定のレイアウトをすばやく作れるようにしたい
同じブロック構成を複数の記事で再利用したい
Gutenbergでショートカットを使って効率化したい

解決手順

ステップ1：よく使うブロックを覚える

主要ブロック一覧:

【テキスト系】
・段落（Paragraph）   → 通常の本文テキスト
・見出し（Heading）   → H2〜H6 / ショートカット: ## + スペース（H2）
・リスト（List）      → 箇条書き・番号リスト
・引用（Quote）       → 引用文にスタイルを付ける
・コード（Code）      → コードブロック（等幅フォント）

【メディア系】
・画像（Image）       → アイキャッチ以外の画像
・ギャラリー（Gallery）→ 複数画像をグリッド表示
・動画（Video）       → MP4などの動画

【レイアウト系】
・カラム（Columns）   → 2〜6列のグリッドレイアウト
・グループ（Group）   → 複数ブロックをまとめて背景色を設定
・スペーサー（Spacer）→ 余白を追加

【ウィジェット系】
・ショートコード      → [shortcode] を実行
・カスタムHTML        → 生のHTMLを挿入
・最新の投稿         → 投稿一覧を自動表示

ステップ2：キーボードショートカットで効率化する

【エディタ操作】
Ctrl + Z          → 取り消し（元に戻す）
Ctrl + Shift + Z  → やり直し
Ctrl + S          → 下書き保存
Ctrl + Shift + P  → ブロックパネルを開く

【ブロック挿入（スラッシュコマンド）】
/paragraph → 段落
/heading   → 見出し
/image     → 画像
/columns   → カラム
/code      → コード
/html      → カスタムHTML

【マークダウンショートカット】
## + スペース  → H2見出し
### + スペース → H3見出し
* + スペース   → 箇条書き
1. + スペース  → 番号リスト
> + スペース   → 引用
---            → 区切り線

【テキスト書式】
Ctrl + B → 太字
Ctrl + I → イタリック
Ctrl + K → リンク挿入

ステップ3：再利用ブロックで同じ内容を複数記事で使う

再利用ブロックの作成方法:
1. ブロックを選択
2. ブロックツールバーの「⋮」メニュー → 「再利用ブロックを作成」
3. 名前を付けて保存

再利用ブロックの使用方法:
1. 「/」→「再利用」と入力 → ブロック名を選択
   または
2. ブロック追加（＋）→「再利用」タブ

管理方法:
・管理画面 → 外観 → ブロック（または /wp-admin/edit.php?post_type=wp_block）
・一括編集・削除が可能

ステップ4：ブロックパターンで複雑なレイアウトをすばやく挿入する

ブロックパターンの使い方:
1. ブロック追加（＋）→「パターン」タブ
2. カテゴリーから選ぶ（ヒーロー・フィーチャー・CTA等）
3. クリックで挿入 → 内容を編集

カスタムパターンを登録（functions.php）:

// functions.php — カスタムブロックパターンを登録
add_action('init', function(): void {
    register_block_pattern(
        'my-theme/cta-section',
        [
            'title'       => 'CTAセクション',
            'description' => 'ボタン付きのCTAセクション',
            'categories'  => ['featured'],
            'content'     => '<!-- wp:group {"backgroundColor":"primary","textColor":"white"} -->
<div class="wp-block-group has-primary-background-color has-white-color">
<!-- wp:heading {"level":2} --><h2>今すぐお申し込みください</h2><!-- /wp:heading -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link" href="/contact">お問い合わせ</a></div><!-- /wp:button -->
</div><!-- /wp:buttons -->
</div><!-- /wp:group -->',
        ]
    );
});

ステップ5：クラシックエディタとGutenbergを共存させる

# Classic Editor プラグインで全体をクラシックに戻す
wp plugin install classic-editor --activate

# 投稿タイプごとにエディタを切り替え（設定 → 表示設定）

// functions.php — 特定CPTのみクラシックエディタを使用
add_filter('use_block_editor_for_post_type', function(bool $use, string $post_type): bool {
    if ($post_type === 'news') {
        return false; // newsのみクラシックエディタ
    }
    return $use;
}, 10, 2);

注意事項

再利用ブロックを編集すると、そのブロックを使用しているすべての投稿・固定ページに変更が反映されます
Gutenbergのブロックマークアップ（HTMLコメント）はデータベースに直接保存されます。エディタを切り替えるとHTMLが崩れる場合があります
register_block_pattern() は WordPress 5.5以降で使用できます

まとめ

Gutenbergは / コマンドでブロックを素早く挿入し、マークダウンショートカットで見出し・リスト・引用を変換できます。同じレイアウトの再利用には「再利用ブロック」を、複雑なレイアウトのテンプレートには「ブロックパターン」を活用してください。

Post Views: 11