テーマに必ず入っているstyle.css。
本文に使うCSSをエディターにも読み込むと、文字やブロックの見た目を公開画面に近づけられます。ブロックエディターではeditor-stylesへの対応とCSSの対象範囲の調整が必要で、ヘッダーやサイドバーを含む公開画面全体と同じ表示になるとは限りません。
そのカスタマイズに加えて、emmetによるCSSの自動補完機能とショートカットによる保存機能、バックアップ機能を加えてみました。
WordPress上でCSSを編集するのにとても便利なカスタマイズです。
style.cssをエディタに反映させて、さらに便利にする方法
本記事では、編集用スタイルの読み込み、Emmet補完、保存キー、CSSファイルの控えを作る4つの方法を紹介します。必要なものだけを検証環境で試してください。
- style.cssのcssをエディタにも反映
- emmetのCSSの自動補完機能
- ショートカットCtrl＋Sによる保存機能
- バックアップ機能（日時付きデータのダウンロード）
編集するのは子テーマのファイルを基本とし、変更前のファイルを別に保存します。日時付きCSSのダウンロードは、そのCSSファイルの控えであり、WordPress全体やデータベースのバックアップにはなりません。
2026年10月21日に有料部分を含む本文と掲載PHPコードを読み、WordPress公式資料とプラグイン公式説明を照合しました。編集画面への描画、補完・保存キー・ダウンロードの実操作は未確認です。使用する前に、対象のWordPress・テーマ・PHPのバージョンと適用する画面を確認してください。
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
