私はふだん、SWELL を使って WordPress サイトを作っています。
その中で、ずっと気になっていたことがありました。
SWELL のアコーディオンブロック、編集画面だと色の区別がつかない。
たとえば——
- 「項目（タイトル）」
- 「中の文章（本文）」
この2つが同じ背景色なので、どこがどこなのか分かりにくいのです。
公開画面は美しいのに、
編集画面は淡すぎて、境界線が曖昧で、見間違えてしまうこともある。
「これ、誰か困っていないのかな？」
そう思いながら、いつものように ChatGPT に相談してみました。
試行錯誤の日々：区切り線より難しかったアコーディオン
以前、SWELL の区切り線を改善してもらいました。
そのときは比較的スムーズ。
CSS を貼ればすぐ反映された。
しかし今回のアコーディオン改善は違いました。
- 公開画面と編集画面では CSS の適用レイヤーが違う
- SWELL の内部クラスが複雑
- 編集画面ではエディター専用CSSが必要
- そもそも functions.php が読み込む順序に注意が必要
まるで迷路のようでした。
「公開画面は変わるのに、編集画面は変わらない」
「CSS が効いているように見えない」
「サイトAでは動かないのに、サイトBでは動く」
原因にたどり着けないまま時間が過ぎていきました。
でも、あきらめずに ChatGPT と対話を続けると、
だんだん霧が晴れていきました。
答えはシンプルだった：エディター専用CSSを読み込ませる
鍵はたった2つでした。
🔑 1. 子テーマの functions.php に数行追加
これで「編集画面専用の CSS を読み込む」仕組みができる。
🔑 2. swell-child-editor.css を置く
編集画面だけに適用されるスタイル。
この2つが揃うと——
アコーディオンの項目と本文が、編集画面でキレイに色分けされる。
作業をすすめていた第3サイトではすぐ成功。
そこで成功したコードをそのまま最初のサイトに持っていくと……
あっけないほど一発成功。
原因は今も完全には分かっていません。
でも、パソコンの世界では「まず再現できる正しい形を作る」ことが重要。
結果、3つのサイトすべてで使える
“正解のテンプレート” が生まれました。
完成版コード（コピペで動きます）
1) functions.php（子テーマ）
add_action( 'enqueue_block_editor_assets', function() {
$editor_css_path = get_stylesheet_directory() . '/swell-child-editor.css';
if ( file_exists( $editor_css_path ) ) {
wp_enqueue_style(
'swell_child_block_editor',
get_stylesheet_directory_uri() . '/swell-child-editor.css',
[],
filemtime( $editor_css_path )
);
}
} );2) swell-child-editor.css（子テーマ直下に置く）
/**************************************
* SWELL アコーディオン（編集画面用）
**************************************/
/* 項目（タイトル） */
.editor-styles-wrapper .swell-block-accordion__title {
background-color: #f8dada; /* 淡いピンク */
color: #444;
padding: 10px 14px;
border-radius: 6px;
}
/* 内容（本文） */
.editor-styles-wrapper .swell-block-accordion__body {
background-color: #e6ffe6; /* 淡いグリーン */
padding: 14px;
border-radius: 0 0 6px 6px;
border: 1px solid #dcefdc;
border-top: none;
}なぜこの改善が“本当に価値がある”のか
- 編集画面の可読性が一気に上がる
- 記事執筆スピードが向上する
- マルチサイトの管理がラクになる
- 公開画面のデザインは壊さない
- コードを2つ置くだけなので再現性が高い
これは単なる色替えではなく、
執筆体験そのものを改善するカスタマイズ
と言えます。
おわりに：分からなくても前に進むことが大切
今回も ChatGPT との協働で、
「できない理由」より「できる方法」を積み上げていきました。
原因は後でゆっくり調べればいい。
まずは、正しく動くテンプレートを作ること。
“前に進めるコード” が手元にあることの安心感。
それこそが、今回の一番の成果です。
あなたの SWELL サイトでも、ぜひこの改善を試してみてください。
