wordpress gutenberg 「enter」と「shift+enter」の動作を逆にしたい

2026.08.03

WordPressのブロックエディター（Gutenberg）において、「Enter」と「Shift + Enter」の挙動を直接入れ替える標準機能やプラグインはありません。Gutenbergは「Enter」で新しいブロック（段落）を作成し、「Shift + Enter」でブロック内改行（<br>）を行う設計（仕様）が深く組み込まれているためです。 [1, 2, 3, 4]

しかし、「Enterを押したときに、行間を空けずに次の行へ行きたい」という目的であれば、CSSの調整で完全に解決できます。 [5]

希望する見栄えや好みに合わせて、以下の2つのアプローチから選択してください。

解決策1：CSSで「Enter（段落）」の余白をなくす（推奨）

見た目上、Enterを押したときの広すぎる行間を「Shift + Enter」と同じように詰めたい場合は、テーマのCSSを調整します。この方法なら、入力時は普通にEnterを押すだけで思い通りの見た目になります。 [5]

  1. WordPress管理画面から 「外観」 ＞ 「カスタマイズ」（または「サイトエディター」）を開きます。
  2. 「追加CSS」 を選択します。
  3. 以下のコードを貼り付けて保存します。 [5]
/* 記事本文内の段落（Enter）の下余白をゼロにする */
.entry-content p {
    margin-bottom: 0;
    padding-bottom: 0;
}

※テーマによって記事部分のクラス名（.entry-content）が異なる場合があります。変わらない場合は、シンプルに p { margin-bottom: 0 !important; } を試してください。 [4, 5, 6]

解決策2：プラグインで旧エディターに戻す

「どうしてもHTML構造として、Enterで <br>（改行）を挿入し、Shift+Enterで <p>（段落）を作りたい」という場合は、現在のブロックエディター（Gutenberg）を廃止し、使い慣れた旧エディター（Classic Editor）に戻す必要があります。

  1. 管理画面の 「プラグイン」 ＞ 「新規プラグインを追加」 を開きます。
  2. 「Classic Editor」 を検索してインストール、有効化します。
  3. 有効化するだけで、以前の使い慣れたEnterキーの挙動（旧ビジュアルエディタの挙動）に切り替えることができます。 [6, 7, 8, 9]

💡 補足：ブロックエディターの便利な代替手段

ブロックエディターのまま改行を楽にしたい場合、「クラシックブロック」 を使う方法もあります。
記事内で /classic と入力して「クラシックブロック」を呼び出すと、そのブロックの中だけは使い慣れた旧エディターの感覚で文章を作成できます。 [3, 6]

現状の運用において、「公開された画面での見た目（行間）」 を変えたいのか、それとも 「HTMLタグの構造（pタグかbrタグか）」 にこだわりたいのか、どちらに近いでしょうか？
もし現在のテーマ名（SWELL、Cocoonなど）を教えていただければ、そのテーマに合わせた最適なCSSや設定方法を個別にご案内できます。

WordPressのGutenbergエディター（ブロックエディター）で「Enter」と「Shift + Enter」の挙動を完全に非公式に、かつ完全に逆転させる（Enterで改行、Shift+Enterで新しいブロック作成）には、WordPressのJavaScript APIを使用してキーボードイベントをインターセプトするカスタムプラグイン（またはテーマのスクリプト）を作成する必要があります。

Gutenbergにはこの挙動をワンクリックで切り替える標準設定が存在しないため、コードでの実装が必須です。

実装方法：カスタムプラグインの作成

最も安全で管理しやすい自作プラグインによる実装手順を解説します。

1. プラグインフォルダとファイルの作成

WordPressの wp-content/plugins/ ディレクトリ内に、新規フォルダ gutenberg-swap-enter を作成し、その中に以下の2つのファイルを作成してください。

  • gutenberg-swap-enter.php（プラグインの本体ファイル）
  • swap-enter.js（挙動を制御するJavaScriptファイル）

2. gutenberg-swap-enter.php のコード

以下のコードをコピーして貼り付けます。このスクリプトは、管理画面の投稿編集画面（Gutenberg）にのみ、後述するJavaScriptファイルを読み込ませる処理を行います。

<?php
/**
 * Plugin Name: Gutenberg Swap Enter and Shift+Enter
 * Description: WordPressのブロックエディターでEnterとShift+Enterの挙動を入れ替えます。
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function gse_enqueue_editor_assets() {
    wp_enqueue_script(
        'gse-swap-enter-script',
        plugins_url( 'swap-enter.js', __FILE__ ),
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
        '1.0',
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'gse_enqueue_editor_assets' );

3. swap-enter.js のコード

以下のコードをコピーして貼り付けます。リッチテキスト編集エリアでのキー入力を監視し、条件を反転させてイベントを再発行する仕組みです。

wp.domReady(function () {
    // 編集エリア全体でキーボードイベントをキャプチャ
    document.addEventListener('keydown', function (event) {
        // Gutenbergのリッチテキスト編集エリア（ブロック内）かどうかを判定
        const isRichText = event.target.closest('.rich-text') || event.target.classList.contains('block-editor-rich-text__editable');
        
        if (!isRichText) return;

        // Enterキーが押された場合（テンキーのEnterも含む）
        if (event.key === 'Enter') {
            if (!event.shiftKey) {
                // 1. 通常のEnterが押された時 -> Shift+Enter（改行）の挙動に偽装
                event.preventDefault(); // 本来の「新しいブロック作成」を止める
                event.stopPropagation();

                const shiftEnterEvent = new KeyboardEvent('keydown', {
                    bubbles: true,
                    cancelable: true,
                    key: 'Enter',
                    code: 'Enter',
                    keyCode: 13,
                    which: 13,
                    shiftKey: true // Shiftを強制付与
                });
                event.target.dispatchEvent(shiftEnterEvent);
            } else {
                // 2. Shift + Enterが押された時 -> 通常のEnter（新ブロック作成）の挙動に偽装
                event.preventDefault(); // 本来の「改行」を止める
                event.stopPropagation();

                const normalEnterEvent = new KeyboardEvent('keydown', {
                    bubbles: true,
                    cancelable: true,
                    key: 'Enter',
                    code: 'Enter',
                    keyCode: 13,
                    which: 13,
                    shiftKey: false // Shiftを外す
                });
                event.target.dispatchEvent(normalEnterEvent);
            }
        }
    }, true); // キャプチャフェーズでイベントを先取りする
});

有効化の手順

  1. 上記の2つのファイルを配置したら、WordPressの管理画面から**「プラグイン」>「インストール済みプラグイン」**に移動します。
  2. リストに表示される 「Gutenberg Swap Enter and Shift+Enter」 を探します。
  3. 「有効化」 をクリックします。 [1]

これで、投稿や固定ページの編集画面を開くと、**Enterキーで段落内改行（<br>）**になり、Shift + Enterキーで新しい段落ブロック（<p>）が生成されるようになります。 [2]

注意点とリスク

  • リストブロックなどでの挙動: リストブロック（箇条書き）の中でEnterを押した場合も改行になってしまうため、箇条書きの項目（<li>）を新しく追加したい時も Shift + Enter を押す必要があります。
  • プラグインの競合: 独自にキーボードショートカットを設定している他のプラグイン（テーブル拡張プラグインなど）と干渉する可能性があります。

このJavaScriptによる強制入れ替えアプローチを適用してみたいですか？
それとも、特定のブロック（段落ブロックのみなど）に限定して挙動を制御したいなど、細かいご要望はありますか？

Wordpress
楽天市場

くらブログ

コメント

タイトルとURLをコピーしました