WordPressブロックエディタでテキスト選択が見えない！原因と解決方法

WordPressのブロックエディタ（Gutenberg）を使っていて、テキストを選択しても背景が透明のままになり、選択範囲がわかりにくくなってしまった…そんな経験はありませんか？

WordPressやテーマのアップデートに伴い、一部CSSが干渉してしまうことで、怒りうる事象です。

特定の環境では以下のようなCSSが適用されてしまい、選択範囲が透明になってしまうことがあります。

.block-editor-block-list__layout::selection {
    background: transparent;
}

この状態だと文章を編集するときにストレスが溜まりますよね。

今回は、この問題の原因と、シンプルに解決する方法を紹介します。

現象の原因

結論から言うと、この ::selection { background: transparent; } の指定は WordPressコア標準のCSSではありません。

多くの場合は以下の要因で追加されています。

• Gutenbergプラグインや一部テーマ／プラグインが追加するエディタ用スタイル
• 誰かが過去にコアファイルやCSSを直接編集してしまった
• バージョン差異によるエディタCSSの差し替え

いずれにせよ、「エディタ編集画面専用のCSS」として読み込まれているため、フロント用の style.css からは上書きできません。

解決方法

方法1: functions.php からインラインCSSを追加する（おすすめ）

もっとも手軽な解決方法は、functions.php にインラインスタイルを差し込むことです。

これなら別途CSSファイルを用意する必要がなく、エディタ画面だけに適用できます。

// ブロックエディタ編集画面にインラインCSSを追加
function my_editor_inline_css() {
    echo '<style>
    .block-editor-block-list__layout::selection {
        background: rgba(0, 123, 255, 0.3) !important;
    }
    .has-multi-selection .block-editor-block-list__layout::selection {
        background: rgba(0, 123, 255, 0.3) !important;
    }
    </style>';
}
add_action( 'admin_head', 'my_editor_inline_css' );

これで、テキストを選択したときにわかりやすく青系の背景がつきます。

方法2: エディタ用に editor-style.css を用意して上書きする

もし子テーマに editor-style.css を用意できるのであれば、以下の手順も可能です。

function my_block_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'my_block_editor_styles' );

.block-editor-block-list__layout::selection {
    background: rgba(0, 123, 255, 0.3) !important;
}

こちらはエディタ用に別途ファイルを追加する方法ですが、若干手間があります。

エディタ画面上でも複数のスタイル指定を行いたいときなどには適した方法になります。

まとめ

• block-editor-block-list__layout::selection { background: transparent; } はWordPress標準ではなく、テーマやプラグインが追加している可能性大。
• フロント用の style.css ではなく、ブロックエディタ専用のCSSを狙って上書きする必要がある。
• 最も簡単な解決策は、functions.php にインラインCSSを差し込む方法。

編集画面で選択範囲が見えないと、地味に作業効率が落ちます。
同じような現象で困っている方は、ぜひ今回の方法を試してみてください！✨