公開したブログ内の表の枠の色が、なぜか黒に変わっていました。
原因は、「style.min.css」。
この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。
1. サイトの表の枠の色がおかしい?
表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。

どうも、デフォルトの色に戻ってしまっているようです。
2. Cocoonの表の枠の色
Cocoonでは、テーマで選んだ色(サイトキーカラー)がスタイルでまとめて指定されています。

ブラウザで表のスタイルを検証してみます。

表の枠の色も、tableの td要素、th要素のスタイルで指定されています。
table th,table td,.page-numbers,.page-numbers.dots,.tagcloud a,.list.ecb-entry-border .entry-card-wrap,.related-entries.recb-entry-border .related-entry-card-wrap,.carousel .a-wrap,.pager-post-navi.post-navi-border a.a-wrap,.article .toc,.a-wrap .blogcard,.author-box,.comment-reply-link,.ranking-item {
border-color: rgba(255,172,5,.5)
}
ところが、その上に表の枠に関するスタイルが他にもあるんです。
.wp-block-table td,.wp-block-table th {
border: 1px solid;
padding: .5em
}
「style.min.css」のスタイルに border があるため、border-colorが上書きされています。
tdとthを限定する要素が、tableと.wp-block-tableで異なるため、style.min.cssのスタイルが優先されています。
3. 「style.min.css」とは?
「style.min.css」は、「Gutenberg(ブロック編集画面)」の文字スタイル(中心揃えなど)を反映させるCSSです。
WordPressの「wp-includes」の中に含まれています。
./wp-includes/css/dist/block-library/style.min.css?ver=6.1.1&fver=20221115082705

WordPress 5.0から標準搭載されるようになっていて、読み込まれています。
4. style.cssで上書きした
さしあたり、style.css に上書きするスタイルを追加しました。
.wp-block-table td,.wp-block-table th {
border-color: rgba(255,172,5,.5);
}

色を決め打ちしているのが不格好ですが、とりあえずは解決です。
こちらもどうぞ。
![[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]](https://chiilabo.com/wp-content/uploads/2021/11/image-18-320x198.jpg)
[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]
これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。ブログカードのデザインを少し変更しました。そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。img{ object-fit:cover; aspect-ratio: 100/100;}また、ドメイン名の色を変更することで、タイトルと区別...
![[Cocoon] ラベルボックスの枠の色を修正した(gutenberg.php)](https://chiilabo.com/wp-content/uploads/2023/02/image-34-320x198.png)
[Cocoon] ラベルボックスの枠の色を修正した(gutenberg.php)
Cocoon バージョン: 2.5.7.4 に更新したところ、ラベルボックスの枠の色がおかしくなってしまいました。ラベルボックスの枠を「白」に設定していた箇所が、「黒」に表示されています。追記Cocoon バージョン: 2.5.7.5 で修正されました。(参考)更新後にラベルボックスの枠の色がおかしい? | 不具合報告 | Cocoon フォーラムラベルボックスの枠とクラスを検証Chromeでスタイルを検証すると、「.has-white-border-color」なのに「va...
QRコードを読み込むと、関連記事を確認できます。
![[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)](https://api.qrserver.com/v1/create-qr-code/?data=?size=200x200&data=https%3A%2F%2Fchiilabo.com%2F2023-02%2Fcocoon-table-border-color-style-min-css%2F)