WordPressのブロックエディターでは、「整形済みテキスト」ブロックを使っていても、テーマやエディター設定によっては通常の段落ブロックとほとんど同じ見た目になることがあります。

特に、数式・コード・入力例・計算式などを記事内で扱う場合、編集画面上でどこが「整形済みテキスト」なのか分かりにくいと、修正時にかなり不便です。

この記事では、公開ページには影響を出さず、WordPressの編集画面だけで「整形済みテキスト」ブロックを分かりやすく装飾する方法を紹介します。

結論

WordPressの編集画面だけにCSSを追加して、「整形済みテキスト」ブロックに枠線・背景色・ラベルを付けます。

今回の方法では、次のような見た目にできます。

• 整形済みテキストだけ背景色を変える
• 左側に目立つラインを入れる
• 上部に「整形済みテキスト」というラベルを表示する
• 公開ページ側のデザインには影響させない

WordPressのブロックエディターでは、エディター本体のUIと、記事本文側のブロック表示を分けて考える必要があります。WordPress公式ドキュメントでも、本文ブロック側のスタイルには enqueue_block_assets を使い、必要に応じて is_admin() で編集画面だけに限定できると説明されています。

なぜ「追加CSS」だけではダメなのか

WordPressには「外観」→「カスタマイズ」→「追加CSS」という機能があります。

ただし、ここにCSSを書いた場合、基本的には公開ページ側の見た目を調整するためのものです。

今回やりたいことは、公開ページではなく、管理画面の投稿編集画面だけを装飾することです。

そのため、通常の追加CSSではなく、エディター用のCSSとして読み込ませる必要があります。

完成コード

以下のコードを、Code Snippetsプラグイン、または子テーマの functions.php に追加してください。

function eguchi_preformatted_editor_style() {
    if ( ! is_admin() ) {
        return;
    }    $css = '
        .editor-styles-wrapper .wp-block-preformatted {
            border: 2px solid #2271b1 !important;
            background: #f0f6fc !important;
            padding: 18px 20px !important;
            border-radius: 8px !important;
            box-shadow: inset 5px 0 0 #2271b1 !important;
            font-family: Consolas, Monaco, "Courier New", monospace !important;
            line-height: 1.8 !important;
            white-space: pre-wrap !important;
            color: #1d2327 !important;
            position: relative !important;
        }        .editor-styles-wrapper .wp-block-preformatted::before {
            content: "整形済みテキスト";
            display: block;
            width: fit-content;
            margin: 0 0 10px 0;
            padding: 3px 10px;
            border-radius: 999px;
            background: #2271b1;
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0.03em;
        }
    ';    wp_register_style( 'eguchi-preformatted-editor-style', false, array(), '1.0.0' );
    wp_enqueue_style( 'eguchi-preformatted-editor-style' );
    wp_add_inline_style( 'eguchi-preformatted-editor-style', $css );
}
add_action( 'enqueue_block_assets', 'eguchi_preformatted_editor_style' );

wp_add_inline_style() は、登録・読み込み済みのスタイルに追加CSSを付与するWordPress標準関数です。公式リファレンスでも、登録されたスタイルシートに追加CSSを加えるための関数として説明されています。

Code Snippetsで追加する手順

Code Snippetsを使う場合は、次の手順です。

1. WordPress管理画面を開く
2. 「スニペット」→「新規追加」を開く
3. タイトルを「編集画面の整形済みテキスト装飾」などにする
4. 上記のPHPコードを貼り付ける
5. 実行場所は「管理画面のみ」または「サイト全体で実行」を選ぶ
6. 保存して有効化する
7. 投稿編集画面を再読み込みする

コード内で is_admin() を入れているため、公開ページ側には基本的に影響しません。

このコードで何をしているのか

1. 編集画面だけに限定している

if ( ! is_admin() ) {
    return;
}

この部分で、管理画面以外では処理を止めています。

つまり、公開ページを見ている読者には、この装飾は表示されません。

2. 整形済みテキストブロックだけを指定している

.editor-styles-wrapper .wp-block-preformatted

wp-block-preformatted は、WordPressの「整形済みテキスト」ブロックに付くクラスです。

そのため、このCSSは段落ブロックや見出しブロックには影響しません。

3. ラベルを付けて判別しやすくしている

.editor-styles-wrapper .wp-block-preformatted::before {
    content: "整形済みテキスト";
}

この部分で、ブロックの先頭に「整形済みテキスト」というラベルを表示しています。

編集画面で見たときに、通常の段落ではないことが一目で分かるようになります。

もっと控えめな見た目にしたい場合

目立ちすぎる場合は、以下のように少し控えめなCSSに変更できます。

function eguchi_preformatted_editor_style_simple() {
    if ( ! is_admin() ) {
        return;
    }    $css = '
        .editor-styles-wrapper .wp-block-preformatted {
            border: 1px dashed #8c8f94 !important;
            background: #f6f7f7 !important;
            padding: 16px !important;
            border-radius: 6px !important;
            font-family: Consolas, Monaco, "Courier New", monospace !important;
            white-space: pre-wrap !important;
        }        .editor-styles-wrapper .wp-block-preformatted::before {
            content: "整形済みテキスト";
            display: block;
            margin-bottom: 8px;
            color: #646970;
            font-size: 12px;
            font-weight: 700;
        }
    ';    wp_register_style( 'eguchi-preformatted-editor-style-simple', false, array(), '1.0.0' );
    wp_enqueue_style( 'eguchi-preformatted-editor-style-simple' );
    wp_add_inline_style( 'eguchi-preformatted-editor-style-simple', $css );
}
add_action( 'enqueue_block_assets', 'eguchi_preformatted_editor_style_simple' );

最初のコードと、この控えめ版のコードはどちらか一方だけ使ってください。

注意点

公開ページにも反映したい場合

今回のコードは編集画面だけを対象にしています。

公開ページの「整形済みテキスト」も同じように装飾したい場合は、is_admin() の条件を外すか、通常の追加CSSにも同じCSSを入れます。

ただし、公開ページ側に表示されるデザインまで変わるため、記事全体の見た目を確認してから反映してください。

テーマやプラグインによって効かない場合

テーマやブロックエディター関連プラグインによっては、CSSの優先順位が強く、反映されにくい場合があります。

その場合は、次の部分を追加で強めます。

.editor-styles-wrapper pre.wp-block-preformatted,
.editor-styles-wrapper .wp-block-preformatted {
    border: 2px solid #2271b1 !important;
    background: #f0f6fc !important;
}

WordPress 6.3以降は、条件によって投稿エディターの本文部分がiframe内に表示される仕様があります。そのため、エディターUI向けではなく、本文ブロック側に届く方法でCSSを読み込むことが重要です。

まとめ

「整形済みテキスト」ブロックが通常の段落と見分けにくい場合は、編集画面専用のCSSを追加するとかなり作業しやすくなります。

今回の方法なら、公開ページのデザインを崩さず、投稿編集画面の中だけで「整形済みテキスト」を目立たせることができます。

特に、数式、コード、スプレッドシート関数、手順説明、入力例をよく使うブログでは、編集ミスの防止にもつながります。