【テーマ】BcThemeSampleでBurgerEditorの表罫線設定(太さ・セル色)がフロント表示に正しく反映されない

[sou-koshiro]

概要

BcThemeSample を使用したサイトで、BurgerEditor(WYSIWYG/CKEditor)の「表のプロパティ」「セルのプロパティ」で罫線を設定しても、フロント表示(プレビュー)で一部の辺にしか反映されない不具合。

baserCMS version : 5.4.0

症状

• 表のプロパティで罫線の太さを変更しても、フロント表示では上側の罫線にしか反映されない
• セルのプロパティで罫線色を変更しても、フロント表示では縦罫線にしか反映されず横罫線に反映されない
• 管理画面の編集エリアでは正しく表示される(プレビュー/フロント表示でのみ崩れる)

原因

テーマの bge_style.css および baserCMS コア(bc-front)の editor.css の両方で、表の罫線が table(左右下)・tr(上)・td/th(左のみ)の3要素に分散して指定されている。BurgerEditor は罫線太さを <table border="N"> 属性、セル罫線色を style="border-color:..." というインラインスタイルとして書き込むが、border-collapse: collapse の境界衝突解決ルール上、罫線の指定元がバラバラだと変更した箇所によって反映される辺とされない辺が生じてしまう。

さらに、テーマは bge_style.css のみを持ち editor.css を持たないため、コア(bc-front)側の editor.css にフォールバックする。両ファイルに同じ分散指定が重複して存在し、後から読み込まれる bge_style.css 側だけを直しても、先に読み込まれる editor.css 側の指定が生き残ってしまう。

再現手順

1. BcThemeSample を使用したサイトでコンテンツを新規作成
2. BurgerEditor の wysiwyg(CKEditor)ブロックで表を挿入
3. 「表のプロパティ」で罫線の太さを変更して保存
4. フロント表示を確認 → 太さが反映されるのは上側の罫線のみ
5. 「セルのプロパティ」でいずれかのセルの罫線色を変更して保存
6. フロント表示を確認 → 色が反映されるのは縦罫線のみ

TODO

• plugins/BcThemeSample/webroot/css/bge_style.css の罫線指定をセル(td/th)単位に統一する
• plugins/bc-front/webroot/css/editor.css(コア)に残る同種の罫線分散指定を見直す
• 他の同梱テーマに同様の問題がないか確認する

備考

テーブル外枠と1セルの罫線が同じ境界線で重なる場合、CSSの境界衝突解決ルール上「太い方の罫線が優先される」ため、表全体の外枠を太くした状態でセル単位の細い罫線色を指定すると、外枠と重なる辺(通常は表の一番外側)は外枠の色が優先されます。これは仕様通りの挙動であり不具合ではありません。

[ryuring]

@sou-koshiro 報告ありがとうございます。対応お願いしてもいいですか？

[sou-koshiro]

@ryuring
対応します！