WordPressブロック編集で文字色など設定が反映されない

WEB　2026/01/12

WordPressでお知らせなどの投稿記事は、「ブロックエディター」で編集ができます。
ブロックエディターを使えば、htmlのコードなど使わなくてもお客様で記事投稿が可能です。

今回、WordPressのブロックエディターで文字色を変更したのに、編集画面では変わるのに、実際のページでは反映されないという現象が起きました。

専門的な技術情報を含む内容ではありますので、やや開発者向けの記事となります。

結論から言うと、「ブロックエディター用のCSSが正しく読み込まれていなかった」ということが原因でした。

原因：ブロック用スタイルがフロント側で有効になっていなかった

WordPressでは、ブロックエディターで設定した文字色やデザインは、「ブロックエディター用のCSS」によって表側のページに反映されます。

しかし、オリジナルテーマやカスタマイズしたテーマを使用している場合、

①ブロックエディター用スタイルのサポートが宣言されていない
②ブロックCSSが分割読み込みされ、必要なスタイルが当たらない

といった理由で、「色を指定しているのに反映されない」状態になることがあります。

まず行ったのが、このテーマはブロックスタイルを使いますよ、という宣言文の追加です。

add_theme_support(‘wp-block-styles’);

これをfunction.phpというファイルに書き込み、設定することで、

①文字の色
②文字の大きさ
③文字の配置

など、WordPress標準のブロックエディター用スタイルがフロント側でも有効になり、表示に反映されます。

WordPress 5.8以降では、パフォーマンス向上のために「使われているブロックのCSSだけを個別に読み込む」機能が導入されています。不要なコードを読み込ませずなるべく早く表示させるための機能だと思われます。

ただしこの仕組みが、オリジナルで構築したサイトで使用しているテーマのCSS構造と何らかの理由であっていない場合、ブロックの文字色などが正しく反映されないことがあります。

そこで、分割読み込み設定を無効にし、すべてのブロックCSSをまとめて読み込む設定にしました。

add_filter(‘should_load_separate_core_block_assets’, ‘__return_false’);

これにより、ブロックエディター用のCSSが <head> 内で一括読み込みされ、文字色の指定も正しく反映されるようになりました。

実際のコード　function.php

※今回の案件の対応では、①ではなく②が有効でした。(したがって①は非対応）

既存のブロック対応テーマ（twentyシリーズ等）を使っている場合は、最初から設定されていることも多いです。

このようにブロック編集の見た目が反映されないときは、
①ブロックエディター用CSSを読み込むための宣言文が書かれているか
②分割読み込み機能が必要なコードの読み込みを邪魔していないか

以上の２点をご確認ください。

冒頭でも言いましたが、やや開発者向けの記事となりました。

開発者の方はfunction.phpにこれらのコードを書くことをお試しください。

一般ユーザーの方は、プログラムコードをさわることになるので、制作会社に依頼する方がいいですね。

Webデザイン、コーディング、庶務

普通の主婦からウェブデザインを約1年勉強し、ウェブデザイナーに。
ウェブデザイナー歴10年以上です。
お客様のご要望に丁寧に寄り添い、ウェブサイトについてわかりやすく説明しながら、制作・運営をサポートしています。主に女性向けのデザインが得意です。

名古屋発のホームページ制作会社ステイション